Element-ui el-table 树形表格多选

1. 关键方法

   toggleRowSelection(row,flag) @select="rowSelect"(行选中) @select-all="selectAll"(全选)

2. 页面代码

<el-table
:data="dataList"
ref="tableRef"
highlight-current-row
v-loading="loading"
style="width: 100%;"
size="small"
row-key="id"
@selection-change="selsChange"
@select="rowSelect"
@select-all="selectAll"
:tree-props="{children: 'children', hasChildren: 'children.length>0'}"
>
>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column prop="menuName" label="菜单名称" sortable></el-table-column>
<el-table-column prop="menuDes" label="菜单描述" sortable></el-table-column>
<el-table-column prop="menuIcon" label="导航图标" sortable>
<template slot-scope="scope">
<i :class="scope.row.menuIcon"></i>
</template>
</el-table-column>
<el-table-column prop="menuPath" label="导航路径" sortable></el-table-column>
<el-table-column prop="menuComponent" label="Vue文件路径" sortable></el-table-column>
<el-table-column prop="menuLeaf" label="是否单节点" sortable>
<template slot-scope="scope">{{scope.row.menuLeaf === 1?'是':'否'}}</template>
</el-table-column>
<el-table-column prop="menuHidden" label="是否隐藏" sortable>
<template slot-scope="scope">{{scope.row.menuHidden === 1?'是':'否'}}</template>
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag type="success" v-show="scope.row.menuStatus == 1" effect="dark" size="medium">正常</el-tag>
<el-tag type="danger" v-show="scope.row.menuStatus == 2" effect="dark" size="medium">禁用</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
type="danger"
size="small"
@click="changeMenuStatus(scope.row)"
v-if="scope.row.menuStatus == 1"
>禁用</el-button>
<el-button
type="success"
size="small"
@click="changeMenuStatus(scope.row)"
v-if="scope.row.menuStatus == 2"
>启用</el-button>
<el-button type="primary" size="small" @click="toUpdate(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>

1. js代码

toggleSelection(rows, flag) {
if (rows) {
rows.forEach(row => {
this.$refs.tableRef.toggleRowSelection(row, flag);
});
} else {
this.$refs.tableRef.clearSelection();
}
},
rowSelect(selection, row) {
if (selection.indexOf(row) > -1 && row.menuLevel === 1) {
this.toggleSelection(row.children, true);
}
if (selection.indexOf(row) === -1 && row.menuLevel === 1) {
this.toggleSelection(row.children, false);
}
if (selection.indexOf(row) > -1 && row.menuLevel === 2) {
let s = this.dataList.filter(item => {
if (item.id === row.menuPid) {
return item;
}
});
this.toggleSelection(s, true);
}
},
selectAll(selection) {
var flag = false; // 默认 为全不选
selection.forEach(item => {
if (item.menuLevel === 1) {
flag = true;
this.toggleSelection(item.children, true);
}
});
if (!flag) {
this.toggleSelection();
}
},

1. 目前能实现我想要的结果,可能跟你们需求不太一致,可自行修改
   效果如下:
   

• 点赞
• 收藏
• 分享
• 文章举报