vue+element-ui树形表多选，支持多层级联动

添加@select=“rowSelect” @select-all=“selectAll”

<el-table:data="tableData"ref="tableRef"style="width: 100%;margin-bottom: 20px;"row-key="id"borderdefault-expand-allselect-on-indeterminate@select="rowSelect"@select-all="selectAll":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column type="selection" width="55">el-table-column><el-table-column prop="id" label="ID" width="180" align="center">el-table-column><el-table-column prop="distribution" label="订餐点" width="180" align="center">el-table-column><el-table-column prop="level" label="层级" align="center" width="120"> el-table-column><el-table-column prop="user" label="关联用户" align="center" width="160"> el-table-column><el-table-column prop="address" label="地址说明" align="center"> el-table-column><el-table-column prop="date" label="创建时间" align="center" width="200"> el-table-column><el-table-column fixed="right" label="操作" align="center"><template><el-button type="text" size="small" @click="openCodeDialog">查看二维码el-button><el-button type="text" size="small" @click="to_modify_distribution">编辑el-button><el-button type="text" size="small" @click="openAddNextDialog">新增下级el-button><el-button type="text" size="small" class="delete-txt-btn" >删除el-button>template>el-table-column>el-table>

1.遍历数据加上select字段，判断是否被选中
2.点击每一个节点数据的时候，去判断是否有子节点，有的话操作子节点（全选or全取消）
3.然后判断是否有父节点，如果有，拿到父节点，再去对父节点进行操作
我定义的规则（可根据需求重新自定义）：
当所有节点都被选中，父节点打勾，兄弟节点只要有一个节点没打勾，父节点要取消打勾

  import Vue from 'vue'export default {data() {return {tableData: [{id: 1,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',}, {id: 2,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',children: [{id: 21,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',}, {id: 22,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',children: [{id: 221,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',}, {id: 222,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',children: [{id: 2221,distribution: "一楼",level: "1",user: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-02',}]}]}]},selectFlag: false,}},methods: {toggleSelection(rows, flag) {if (rows) {rows.forEach(row => {this.$refs.tableRef.toggleRowSelection(row, flag);if(row.children){this.toggleSelection(row.children, flag);}});}},rowSelect(selection,row){// 全选 or 取消全选if(selection.indexOf(row)>-1){this.toggleSelection(row.children, true);row.select=trueif(row.children){this.addSelect(row.children,true)}}else if(selection.indexOf(row)==-1){this.toggleSelection(row.children, false);row.select=falseif(row.children){this.addSelect(row.children,false)}}this.getParent(this.tableData,row)},// 获取父节点并操作// 当所有子节点取消选中，父节点也要取消选中；当所有子节点已选中，父节点也要相应选中getParent(data,row){data.forEach((item) => {//判断该行是否有子节点if (item.children) {//遍历子节点item.children.forEach((item2) => {//判断该节点是否为我点击的节点if (item2.id == row.id) {// 去遍历被点击节点的父节点if(item.children){let rowParentFlag = true;item.children.forEach((i) => {rowParentFlag=i.select && rowParentFlag})// 当所有节点都被选中，父节点打勾if(rowParentFlag){this.$refs.tableRef.toggleRowSelection(item, true);item.select=true// 获取父节点的父节点进行判断this.getParent(this.tableData,item)}else{// 兄弟节点只要有一个节点没打勾，父节点都要取消打勾this.$refs.tableRef.toggleRowSelection(item, false);item.select=false// 获取父节点的父节点进行判断this.getParent(this.tableData,item)}}}else if(item.children){this.getParent(item.children,row)}});}});},selectAll(selection){if(!this.selectFlag){this.toggleSelection(selection, true);this.addSelect(this.tableData,true)}else{this.$refs.tableRef.clearSelection();this.addSelect(this.tableData,false)}this.selectFlag=!this.selectFlag},// 树形表多选，添加select字段区分当前行是否被选中// 为了：当所有子节点取消选中，父节点也要取消选中；当所有子节点已选中，父节点也要相应选中// element文档貌似没相关操作addSelect(data,flag){data.forEach((item,index)=>{Vue.set(item,'select',flag);if(data[index].children){this.addSelect(data[index].children,flag)}})}},created(){this.addSelect(this.tableData,false)}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！