【ElementUI】实现树形Table表格多选效果，全网最精简版！！ |
您所在的位置：网站首页 › 表格没办法全选 › 【ElementUI】实现树形Table表格多选效果，全网最精简版！！ |
|
一、HTML 部分
@select=“rowSelect” 监听elementUI表格事件：当用户手动勾选数据行的Checkbox时触发的事件 @select-all=“selectAll” 监听当用户手动勾选全选Checkbox时触发的事件 > 二、功能实现部分注：每个数据都要有 isChecked:false 作初始标志参数 1. 单行勾选① selection 是选中的数据集合 ② toggleRowSelection(row, selected) 多选表格切换某一行选中状态,selected 为 true 则选中 rowSelect(selection, row) { // 1.当前点击是父节点 if (row.children) { // 1.1 当前父节点没被选中 if (!row.isChecked) { // 子节点全部变为选中 row.children.map((item) => { this.$refs.multipleTable.toggleRowSelection(item, true); item.isChecked = true; }); // 当前父节点变为选中 row.isChecked = true; } // 1.2 当前父节点选中 else { // 子节点全部取消选中 row.children.map((item) => { this.$refs.multipleTable.toggleRowSelection(item, false); item.isChecked = false; }); // 当前父节点取消选中 row.isChecked = false; } } // 2.当前点击是子节点 else { // 2.1 改变子节点选中状态 if (!row.isChecked) { row.isChecked = true; } else { row.isChecked = false; } // 2.2 判断该父节点下的子节点是否全选 this.$refs.multipleTable.data.map((father) => { if (father.name === row.father) { let istrue = 0; father.children.map((items) => { if (items.isChecked === true) istrue += 1; }); // 2.2.1 当前子节点全选 if (istrue === father.children.length) { this.$refs.multipleTable.toggleRowSelection(father, true); father.isChecked = true; } // 2.2.2 当前子节点未选 else if (istrue === 0) { this.$refs.multipleTable.toggleRowSelection(father, false); father.isChecked = false; } } }); } }, 2. 全选① selection 是选中的数据集合 ② this.$refs.multipleTable.store.states.isAllSelected 判断所有父节点勾选状态,父节点全部勾选为 true selectAll(selection) { // 1. 父节点全部选中 if (this.$refs.multipleTable.store.states.isAllSelected) { this.$refs.multipleTable.data.map((items) => { items.isChecked = false; this.rowSelect(selection, items); }); } // 2. 父节点没有全部选中 else { this.$refs.multipleTable.data.map((items) => { items.isChecked = true; this.rowSelect(selection, items); }); } }, |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |