先看先看效果:
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>