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>