标签：el sameIdentify vue 树结构 item length 选中 checkedLength children

 上代码！

<!-- html -->
<el-table :data="tableData" stripe border style="width: 98%" ref="tableRef"
            default-expand-all :indent="0" :span-method="spanMethod" 
            @select="handleSelectionChange" @select-all="selectAll" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄" align="center"></el-table-column>
      <el-table-column prop="time" label="时间" align="center"></el-table-column>
      <el-table-column prop="thing" label="事件" align="center"></el-table-column>
      <el-table-column prop="place" label="地点" align="center"></el-table-column>
</el-table>

// 数据结构
data() {
    return {
        multipleSelection: [],
        sonSelection: [],
        checkedLength: 0, // 全局定义父表的选中数量
        dataLength: 0, // table所有父表数量
        isSelectAll: false,
        tableData: [
            {
                id:'1',
                sameIdentify: 'one',
                name:"西瓜家族",
                children:[
                    {
                        id: '1_1',
                        sameIdentify: "one",
                        name: '有籽西瓜',
                        age: '1天',
                        time: '2020/01/01',
                        thing: '播种',
                        place: '田里',
                    },
                    {
                        id: '1_2',
                        sameIdentify: "one",
                        name: '无籽西瓜',
                        age: '2个月',
                        time: '2020/03/01',
                        thing: '开刀',
                        place: '菜市场',
                    },
                ]
            },
            {
                id:'2',
                sameIdentify: 'two',
                name:"柚子家族",
                children:[
                    {
                        id: '2_1',
                        sameIdentify: "two",
                        name: '白柚',
                        age: '1天',
                        time: '2020/01/01',
                        thing: '播种',
                        place: '田里',
                    },
                    {
                        id: '2_2',
                        sameIdentify: "two",
                        name: '红柚',
                        age: '2个月',
                        time: '2020/03/01',
                        thing: '开刀',
                        place: '菜市场',
                    },
                ]
            },
        ]
    };
  },

created() {
    this.tableData.forEach(item => {
        this.dataLength += item.children.length + 1
    })
},

// 合并父表行
spanMethod({ row, columnIndex }) {
      if (columnIndex === 2) {
        if (row.children && row.children.length > 0) {
          return {
            rowspan: 1,
            colspan: 5
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }
},

handleSelectionChange(val, row) {
      // row 拿到的是父表的数据，val是所有选中的数据，可能有父表的也可能有散落的子表的
      let checkedLength = val.length;
      const sameIdentify = row.sameIdentify; // 子表和父表的一个一样值的字段
      
      if (row.children && row.children.length > 0) { // 操作的是父表
        if (this.checkedLength < val.length) { // 父表选中，让当前父表下的子表选中
          row.children.forEach(citem => {
            this.$refs.multipleTable.toggleRowSelection(citem, true)
            ++checkedLength;
          })
        } else {
          row.children.forEach(citem => { // 父表取消选中，让当前父表下的子表取消选中
            this.$refs.multipleTable.toggleRowSelection(citem, false)
            --checkedLength;
          })
        }
      } else { // 操作的是子表
        let curParentItem = this.tableData.find(item => item.sameIdentify== sameIdentify) // 找到该子表的父表
        if (this.checkedLength < val.length) { // 子表选中
          let length = 0;
          val.forEach(item => {
            if (item.sameIdentify== row.sameIdentify) { // 在已选中的值中找到与该中子表项为同一个父类下的个数
              length++
            }
          })
          if (length == curParentItem.children.length) { // 子表都选中了，让父表选中
            this.$refs.multipleTable.toggleRowSelection(curParentItem, true)
            ++checkedLength;
          }
        } else { // 子表取消选中
          this.$refs.multipleTable.toggleRowSelection(curParentItem, false) // 让父表全选取消选中
          --checkedLength;
        }
      }
      this.checkedLength = checkedLength;
      this.multipleSelection = this.$refs.multipleTable.selection;

      if (this.multipleSelection.length == this.dataLength) { // 表头是否全选
        this.isSelectAll = true
      } else {
        this.isSelectAll = false
      }

      // 子表选中数据操作
      this.sonSelection = this.multipleSelection.filter(item => item.children == undefined)
    }

// 表头全选
    selectAll(val) {
      this.isSelectAll = !this.isSelectAll
      let checkedLength = val.length;
      // 全选
      if (this.isSelectAll) {
        val.forEach(item => {
          if (item.children && item.children.length > 0) {
            item.children.forEach(citem => {
              this.$refs.multipleTable.toggleRowSelection(citem, true)
              ++checkedLength
            })
          }
        })
      } else {
        this.$refs.multipleTable.clearSelection()
        checkedLength = 0
      }
      this.checkedLength = checkedLength
      // 子表选中数据操作
      this.multipleSelection = this.$refs.multipleTable.selection;
      this.sonSelection = this.multipleSelection.filter(item => item.children == undefined)
    }

-------------------------

over 如果有问题或者更好建议欢迎留言~

标签：el,sameIdentify,vue,树结构,item,length,选中,checkedLength,children
来源： https://blog.csdn.net/weixin_43551840/article/details/108204741

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