element ui table 表格全选时候选中当前页面所有父,子数据。选中父,子全选。

实现效果在这里插入图片描述

<template>
  <div class="app-container order-list">
        <el-table ref="orderTable" 
        :data="list" tooltip-effect="dark"
          style="width: 100%;border-top: 1px solid #EBEEF5;" row-key="id"
          :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
          :header-cell-style="{background:'#fafafa',color:'#606266'}" :indent="20"
          @select="handleSelectionChange"
           @select-all="selectAll"
          >
          <el-table-column type="selection" width="30" align="left"
            :reserve-selection="true" />
          <el-table-column type="index" :label="$t('table.number')" width="110" align="center" />
        <el-table-column
           prop="date"
           label="日期"
           sortable
           width="180">
         </el-table-column>
         <el-table-column
           prop="name"
           label="姓名"
           sortable
           width="180">
         </el-table-column>
         <el-table-column
           prop="address"
           label="地址">
         </el-table-column>
       </el-table>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        list: [{
                  id: 1,
                  date: '2016-05-02',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1518 弄'
                }, {
                  id: 2,
                  date: '2016-05-04',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1517 弄'
                }, {
                  id: 3,
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄',
                  childList: [{
                      id: 31,
                      date: '2016-05-01',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                      id: 32,
                      date: '2016-05-01',
                      name: '王小虎',
                      address: '上海市普陀区金沙江路 1519 弄'
                  }]
                }, {
                  id: 4,
                  date: '2016-05-03',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1516 弄'
                }],

        checkedKeys: false, //是否全选
        checkedId:[] ,//选中的Id 
      }
    },
    created() {

    },
    methods: {
      // 全选
      selectAll() {
          this.checkedKeys = !this.checkedKeys;
          this.splite(this.list, this.checkedKeys);
        },
        /**
         * 处理数据
         */
        splite(data, flag) {
           // console.log(data)
          data.forEach((row) => {
            this.$refs.orderTable.toggleRowSelection(row, flag);
            row.isSelect = flag
            // console.log(row.childList)
            if (row.childList !=null && row.childList != undefined && row.childList.length>0) {
              this.splite(row.childList,flag);
            }
          });
          this.checkedId = []
          this.recursionComputed(this.list)
        },
        // 单选
        handleSelectionChange(val,row){
          /*
          *  第一次选中的父 ,子是手动循环选中
          * 子选中的数据 只会在下一次点击选中的时候 打印出选中的子和父的选中的数据
          */
          console.log('当选选中数据',val);
          console.log('当前点击',row);
          console.log('当前点击id',row.id);
          /*
          找到 当前点击的 数据是否是在val中 已经选中的 
          如果是 当把当前点击的数据得子全部选中
          */ 
            let findCheckId  = val.find(item=>item.id==row.id)
            if(findCheckId){
              row.isSelect = true
              if(row.childList !=null && row.childList != undefined && row.childList.length>0){
                row.childList.forEach(item=>{
                    this.$refs.orderTable.toggleRowSelection(item, true);
                     item.isSelect = true
                 })
              }
            }else{
              row.isSelect = false
              if(row.childList !=null && row.childList != undefined && row.childList.length>0){
                row.childList.forEach(item=>{
                    this.$refs.orderTable.toggleRowSelection(item, false);
                     item.isSelect = false
                 })
              }
            }
            this.checkedId = []
            this.recursionComputed(this.list)
        },
        // 递归处理列表中的选中的数据的id 
        recursionComputed(data){
          data.forEach((row) => {
            if(row.isSelect==true){
              this.checkedId.push(row.id)
            }
            if (row.childList !=null && row.childList != undefined && row.childList.length>0) {
              this.recursionComputed(row.childList);
            }
          });
            this.checkedId = [...new Set(this.checkedId)]  //这是ID去重
            console.log( ' this.checkedId===',this.checkedId)
        },
     }
  }
</script>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值