element ui 解除禁用按钮状态

最新推荐文章于 2024-10-12 21:18:55 发布

原创最新推荐文章于 2024-10-12 21:18:55 发布 · 3.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

elementui

1 篇文章

订阅专栏

本文展示了一个使用Vue.js实现的简单示例，其中包括两个按钮：一个用于解除另一个按钮的禁用状态，另一个初始为禁用状态。当点击解除禁用按钮后，禁用按钮变为可用，并显示一条成功消息。此外，还包含一个表格组件，该表格在特定条件下可见。

先看先看效果:
在这里插入图片描述
dome代码

<template>
	<div class="home">
		<el-button type="primary" @click="add">点击解除禁用按钮</el-button>
		<el-button type="success" :disabled="disabled" @click="btn(display)">禁用按钮</el-button>
		<div v-show="isShow">
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="date" label="日期" width="180"></el-table-column>
				<el-table-column prop="name" label="姓名" width="180"></el-table-column>
				<el-table-column prop="address" label="地址"></el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
	name: 'Home',
	components: {},
	data() {
		return {
			display: '0',
			disabled: true,
			isShow: false,
			tableData: [
				{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				},
				{
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}
			]
		};
	},
	methods: {
		add() {
			console.log('接触禁用按钮');
			this.disabled = false;
		},
		btn(display) {
			this.$message({
				message: '禁用按钮接触成功',
				type: 'success'
			});
			if (this.display == 0) {
				
				this.isShow = true;
			}
		}
	}
};
</script>