element ui 解除禁用按钮状态

先看先看效果:

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>