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自带的父子联动,想单选点击行,想关联子级选中点复选框