标签：record id item selectedRowKeys 全选 Antd selectedRows Table children

组件库antd里面的树型选择不能做到勾选父组件然后一起勾选子组件情况，我也不知道是组件库的问题还是原本设计就是这样

刚好组件库存在rowselection的配置项，既然存在拓展方法，又遇到需求，那么就对数据进行处理了

 以下方法临时起意编写，可能有些地方没有考虑的很完善，也可以有些代码冗杂，不过方法是可以正常使用的，由于用到了递归，对于数据规模大的话来说可能就没那么快

由于是在封装a-table的基础上进行修改，基本功能和a-table是一样的

 首先对于勾选的选中和取消，这里耗费的事件会比较多，现在的方法还算是完善的，就是长得不好看

onSelect(record, selected, selectedRows) { // selected 判断是否勾选
      if (selected) {  // 添加当前节点和子节点，使其勾选
        this.selectedRowKeys.push(record.id)  // 添加当前点击的节点
        this.selectedRows.push(record.value)  // 添加当前点击的节点的数据
        if (!Com.isEmpty(record.children)) {  // 这里的isEmpty方法是判断是否为空，当然也可以判断他的长度==0
          record.children.forEach(item => {
            if (item.children) { // 如果存在子节点，进行递归
              this.onSelect(item, true)
            }
            this.selectedRows = [...this.selectedRows, item.value]
            this.selectedRowKeys.push(item.id)
          })
          // 去重
          this.selectedRows = [...new Set(this.selectedRows)]
          this.selectedRowKeys = [...new Set(this.selectedRowKeys)]
        }
      } else {  // 取消勾选，清空当前节点和子节点
        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1);
        this.selectedRows.splice(this.selectedRows.indexOf(record.id), 1)
        if (!Com.isEmpty(record.children)) {
          this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record.id), 1);
          this.selectedRows.splice(this.selectedRows.indexOf(record.id), 1)
          record.children.forEach(item => {
            if (item.children) {
              this.onSelect(item, false)
            }
            let index = this.selectedRowKeys.indexOf(item.id)
            this.selectedRows.splice(index, 1)
            this.selectedRowKeys.splice(index, 1)
          })
        }
        return false
      }
    },

对于上面的勾选与取消，会导致一个问题，就是全选按钮也不能实现全部取消或者全部勾选，于是乎全选事件也得重新写，全选事件其实还好，就是遍历完然后将key和数据添加到两个数据里面去而已

// 全选操作---自定义选中操作导致全选操作失效，从而有这个方法
onSelectAll(selected, selectedRows, changeRows) {
    if (selected) {
        let rows = []
        let arr = []
        selectedRows.forEach(item => {
            arr.push(item.id)
            rows.push(item.value)
        })
        this.selectedRows = rows
        this.selectedRowKeys = arr
    } else {
        this.selectedRows = []
        this.selectedRowKeys = []
    }
}

最后还有一个默认展开整棵table树的方法也是递归

使用的是这里的属性赋值

fnChildren(data) { // 这里的data是table的树数据
    data.forEach((val, index, arr) => {
        this.expandedKeys.push(val.id)
        if (!Com.isEmpty(val.children)) { // 判断是否为空 也就是判断还是否存在子节点
            val.children = this.fnChildren(val.children)
        }
    })
    return data
},

有想法或者建议可以留言

标签：record,id,item,selectedRowKeys,全选,Antd,selectedRows,Table,children
来源： https://www.cnblogs.com/lemonnnnz/p/15879681.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。