element-plus表格树toggleRowSelection记录

1、取消element-plus自带的父子联动

:tree-props="{children: 'childrens', hasChildren: 'hasChildren'}"

将子级更改为childrens即可

2、左键点击行选中

@row-click="(row, column, e)=>proxy.leftBtn(row, column, e, 'table')"

leftBtn(row, col, e, ref = 'table', show = true) {
    let refs
    if (Array.isArray(this.$refs[ref])) {
        refs = this.$refs[ref][0]
    } else {
        refs = this.$refs[ref]
    }
    refs.toggleRowSelection(row)
    var selection = refs.getSelectionRows();
    if (show) {
        if (selection.length > 1) {
            refs.clearSelection();
            refs.toggleRowSelection(row);
        }
    }
},

3、点击el-table复选框选中

@select-all="(selection)=>proxy.tableSelectAll(selection,list,'table','childrens')"
@select="(selection,rows)=>proxy.tableRowSelect(selection,rows,'table','childrens')"

/*表格树全选*/
tableSelectAll(selection, list, ref = 'table', children = 'children') {
    this.isCheckedAll = !this.isCheckedAll
    this.toggleSelection(list, this.isCheckedAll, ref, children)

},
/*表格树行选*/
tableRowSelect(selection, rows, ref = 'table', children = 'children') {
    this.toggleSelection([rows], selection.indexOf(rows) > -1, ref, children);
},
/*表格树关联选择子级*/
toggleSelection(list, show, ref, children) {
    list.forEach(el => {
        this.$refs[ref].toggleRowSelection(el,show)
        if (el[children]?.length > 0) {
            this.toggleSelection(el[children], show, ref, children)
        }
    })
},

区别于element-plus自带的父子联动，想单选点击行，想关联子级选中点复选框