el-table 的折叠展开
今天使用elment-ui的el-table组件做表格的折叠和展开 使用 default-expand-all属性 通过click控制它为true或false来完成折叠展开 但是却没有效果!!!
通过查资料发现需要这样来写
<el-table
v-if="refreshTable"
:header-cell-style="{background:'#f4f3f9',color:'#606266'}"
:data="deptList"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:default-expand-all="Expand"
:tree-props="{children: 'children', hasChildren: 'hasChildren'
>
-------------数据设置
data() {
return {
Expand: true,
refreshTable: true,
}
}
-------------鼠标点击事件
/** 展开/折叠操作 */
toggleExpandAll() {
this.refreshTable = false
this.Expand = !this.Expand
this.$nextTick(() => {
this.refreshTable = true
})
},
设置v-if table的显示和隐藏 设置default-expand-all 两个都要设置 向上面那样 最后成功了 也不知道具体 原理 先这样记住!
一起加油啊 ~~~
最近发现之前那个方法有bug 很不好用 又找到一个简单好用得
this.$refs.table..toggleRowExpansion(this.tableData[0]) // 全部折叠
直接拿到table得dom元素, 然后调用element-ui的table表格得一个方法toggleRowExpansion就可以实现展开和折叠了