• element el-table表格树状图全选/取消 子节点无法选中问题


    效果图(全选、取消):


    html

    <el-table ref="table" :data="tableData" row-key="id" border @select="select" @select-all="selectAll" :tree-props="{children: 'childList'}"></el-table>
    
    

    data

    tableData: [
            { name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄' },
            { id: 3, date: '2016-05-01', name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄',
              childList: [{ id: 31, date: '2016-05-01', name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄'},
                { id: 32,  date: '2016-05-01',  name: '王小虎', jc: '上海市普陀区金沙江路 1519 弄' }]
            }
          ]
    

    js

      methods: {
        setChildren(children, type) {
          // 编辑多个子层级
          children.map((j) => {
            this.toggleSelection(j, type)
            if (j.childList) {
              this.setChildren(j.childList, type)
            }
          })
        },
        // 选中父节点时,子节点一起选中取消
        select(selection, row) {
          if (
            selection.some((el) => {
              return row.id === el.id
            })
          ) {
            if (row.childList) {
              // 解决子组件没有被勾选到
              this.setChildren(row.childList, true)
            }
          } else {
            if (row.childList) {
              this.setChildren(row.childList, false)
            }
          }
        },
        toggleSelection(row, select) {
          if (row) {
            this.$nextTick(() => {
              this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
            })
          }
        },
        // 选择全部
        selectAll(selection) {
          // tabledata第一层只要有在selection里面就是全选
          const isSelect = selection.some((el) => {
            const tableDataIds = this.tableData.map((j) => j.id)
            return tableDataIds.includes(el.id)
          })
          // tableDate第一层只要有不在selection里面就是全不选
          const isCancel = !this.tableData.every((el) => {
            const selectIds = selection.map((j) => j.id)
            return selectIds.includes(el.id)
          })
          console.log(isSelect, 'isSelect')
          if (isSelect) {
            selection.map((el) => {
              if (el.childList) {
                // 解决子组件没有被勾选到
                this.setChildren(el.childList, true)
              }
            })
          }
          if (isCancel) {
            this.tableData.map((el) => {
              if (el.childList) {
                // 解决子组件没有被勾选到
                this.setChildren(el.childList, false)
              }
            })
          }
          this.$emit('handleSelect', this.tableData)
        }
      }
    
    
  • 相关阅读:
    公司内部图书管理界面原型设计图
    对象的判等
    虚方法的调用
    类的初始化顺序
    A good idea: TotT – Testing on the Toilet
    变量命名
    QSignalMapper
    dxsdk出错,代码写完后按这个solution试下
    SVG 我太土了。。
    gsl在vc下编译时一个问题
  • 原文地址:https://www.cnblogs.com/wwj007/p/14535932.html
Copyright © 2020-2023  润新知