<el-button type="success" @click="toggleRowExpansion">
全部{{ isExpansion ? "收缩" : "展开" }}
</el-button>
<el-table
:data="tableData"
style="width: 100%"
row-key="orgId"
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
ref="dataTreeList"
>
<el-table-column
prop="orgName"
label="部门名称"
show-overflow-tooltip
align="center"
>
</el-table-column>
<el-table-column prop="orgId" label="编号" align="center" width="80">
</el-table-column>
<el-table-column
prop="sort"
label="排序"
width="140"
show-overflow-tooltip
align="center"
>
</el-table-column>
<el-table-column
prop="status"
align="center"
label="状态"
width="180"
>
<template slot-scope="scope">
<span v-if="scope.row.status == 1" style="color: green"
>启用</span
>
<span v-if="scope.row.status == 2" style="color: red">禁用</span>
</template>
</el-table-column>
<el-table-column
prop="createTm"
label="创建时间"
show-overflow-tooltip
align="center"
>
</el-table-column>
<el-table-column label="操作" align="center" width="250px">
<template slot-scope="scope">
<el-button
size="mini"
v-show="$route.meta.buttonPermissions.includes('编辑')"
@click="handleEdit(scope.$index, scope.row)"
>编辑</el-button
>
<el-button
size="mini"
v-show="$route.meta.buttonPermissions.includes('删除')"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
isExpansion: false,
tableData: [], 列表数据
row-key="orgId" 最重要的id
通过ref找到table执行方法toggleRowExpansion(row, expanded) 调用实列
toggleRowExpansion() {
this.isExpansion = !this.isExpansion;
this.toggleRowExpansionAll(this.tableData, this.isExpansion);
},
toggleRowExpansionAll(data, isExpansion) {
data.forEach((item) => {
this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
if (item.children !== undefined && item.children !== null) {
this.toggleRowExpansionAll(item.children, isExpansion);
}
});
},
Element-ui table 全部展开和收缩
最新推荐文章于 2024-06-07 10:54:39 发布