效果图
问题,一般情况下做了展开,无法全选,系统管理下面的选择框,做法如下taable加事件自己处理
@select-all,调用ref的toggleRowSelection方法
<el-dialog
title="修改角色"
:visible.sync="editmenudialogVisible"
width="60%"
@close="oncloseeditmenu">
<el-table
ref="product"
:data="tableDatarole"
stripe
border
row-key="Menuid"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@selection-change="handleSelectionChange"
@select-all="handleSelectAll">
height="520"
style="width: 100%">
<el-table-column type="selection">
</el-table-column>
<el-table-column prop="Menuname" label="菜单名称"></el-table-column>
<el-table-column prop="Superior" label="上级菜单"></el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="editmenudialogVisible = false">取 消</el-button>
<el-button type="primary" @click="oneditmenu" :disabled="disabledclick">确 定</el-button>
</span>
</el-dialog>
方法如下
//选中某一条
handleSelectionChange(val)
{
//点击选中会存入multipleSelection,在SelectAll时会触发该方法
this.multipleSelection = val;
},
//选中所有
handleSelectAll(){
//tableDatarole为table数据
for (let item of this.tableDatarole)
{
//一级数据 加入到toggleRowSelection中会触发handleSelectionChange
this.$refs.product.toggleRowSelection(item);
if (item.children !==null){
//一级数据,children数据
for (let item1 of item.children){
//加入到toggleRowSelection中会触发handleSelectionChange方法
this.$refs.product.toggleRowSelection(item1);
}
}
}
},