<template>
<div class="wlGantt">
<el-button @click="clickButton('expand1')">展开所有行</el-button>
<el-button @click="clickButton('expand2')">收起所有行</el-button>
<el-table :data="tableData" border style="width: 100%" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
row-key="id" @expand-change="expandChange" :default-expand-all="flag">
<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>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄',
children: [{
id: 35,
date: '2016-05-01',
name: '王小虎35',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 36,
date: '2016-05-01',
name: '王小虎36',
address: '上海市普陀区金沙江路 1519 弄',
}, {
id: 37,
date: '2016-05-01',
name: '王小虎37',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 40,
date: '2016-05-01',
name: '王小虎340',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 41,
date: '2016-05-01',
name: '王小虎41',
address: '上海市普陀区金沙江路 1519 弄'
}]
}]
}, {
id: 38,
date: '2016-05-01',
name: '王小虎39',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 3,
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎31',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 33,
date: '2016-05-01',
name: '王小虎33',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 34,
date: '2016-05-01',
name: '王小虎34',
address: '上海市普陀区金沙江路 1519 弄'
}]
}, {
id: 32,
date: '2016-05-01',
name: '王小虎32',
address: '上海市普陀区金沙江路 1519 弄'
}]
}],
flag: false,
}
},
methods: {
clickButton(str) {
if(str == 'expand1') {
console.log(1111)
this.flag = false;
} else if(str == 'expand2') {
console.log(2222)
this.flag = true;
}
}
}
}
</script>
点展开所有行和收起所有行按钮的时候打印了111,222但是展开和收起却没有生效。
解决办法:
给表格添加v-if="showTable"
(一定要添加)
// 方法改成这样
clickButton(str) {
if(str == 'expand1') {
console.log(1111)
this.showTable= false;
this.flag = false;
this.$nextTick(() => {
this.showTable= true;
});
} else if(str == 'expand2') {
console.log(2222)
this.showTable= false;
this.flag = true;
this.$nextTick(() => {
this.showTable= true;
});
}
}
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。