表头添加
~~~
row-key="id" default-expand-all border
~~~
![](https://img.kancloud.cn/35/8c/358c38ff280943414d47740328075d0a_980x329.png)
数据格式
![](https://img.kancloud.cn/d3/74/d3740c31e6c1762f7cf3c0d9dbb8f728_452x303.png)
操作中添加
~~~
<el-link @click="add(row)" icon="el-icon-plus" type="primary" :underline="false" v-if="permission.includes('sys:servicetype:addz') && row.pid==0">添加</el-link>
~~~
![](https://img.kancloud.cn/2a/de/2ade42fbea5f3a5ef49ceabb864d9e62_1069x410.png)
顶部操作按钮添加
~~~
<el-button @click="expendAll()" type="success" icon="el-icon-_fold" class="ele-btn-icon" v-if="permission.includes('sys:producttype:expand')">展开全部</el-button>
<el-button @click="foldAll()" type="warning" icon="el-icon-_unfold" class="ele-btn-icon" v-if="permission.includes('sys:producttype:collapse')">折叠全部</el-button>
~~~
js中添加
~~~
/**
* 展开全部
*/
expendAll(){
this.data.forEach(d => {
this.$refs.table.toggleRowExpansion(d, true);
});
},
/**
* 折叠全部
*/
foldAll(){
this.data.forEach(d => {
this.$refs.table.toggleRowExpansion(d, false);
});
}
~~~