element中table多选框的勾选与回显处理

1、通过@selection-change="handleSelectionChange"获取勾选的数据
2、通过this.$refs.multipleTable.toggleRowSelection(row, true);将数据回显

注意：toggleRowSelection方法的row数据必须是从tableData中获取

初级表格

<template>
  <div>
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column label="日期"
                       width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址"
                       show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      selectionKeys: [1, 2],
      tableData: [{
        id: 1,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
    }
  },
  // 注意 toggleRowSelection 方法的 row 必须是从 tableData 中提出来的
  // 只有这样获取的 row 才能确定哪一行数据被勾选  涉及到复杂数据指向地址问题
  mounted () {
    const { selectionKeys, tableData } = this
    selectionKeys.forEach(key => {
      tableData.forEach(row => {
        if (row.id == key) {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      })
    })

    // 错误示范  虽然数据一摸一样  但是指向地址不同  并不能视为同一条数据
    // let selectionRows = [{
    //   id: 1,
    //   date: '2016-05-03',
    //   name: '王小虎',
    //   address: '上海市普陀区金沙江路 1518 弄'
    // }, {
    //   id: 2,
    //   date: '2016-05-02',
    //   name: '王小虎',
    //   address: '上海市普陀区金沙江路 1518 弄'
    // }]
    // selectionRows.forEach(row => {
    //   this.$refs.multipleTable.toggleRowSelection(row, true);
    // })
  },
  methods: {
    handleSelectionChange (rows) {
      this.selectionKeys = rows.map(item => item.id);
      console.log(this.selectionKeys)
    },
  }
}
</script>
<style scoped lang="less">
</style>

树状表格

参考文档01
参考文档02 有待考察

形如参考文档01
1、给每条数据绑定一个属性，如pageCheck，控制复选框状态
2、自定义一个全选复选框，通过定位覆盖element ui 表格原来的全选复选框
3、对el-table-column type="selection"写入插槽，自定义复选框，绑定状态属性如pageCheck属性以及相应的点击事件

<template>
  <div class="table-wrap">
    <el-checkbox class="check-page-all"
                 v-model="checkPageAll"
                 @change="checkPageAllEv($event)"></el-checkbox>
    <el-table ref="tableRef"
              :data="tableData"
              style="width: 100%"
              row-key="id"
              border
              default-expand-all
              :tree-props="{children: 'children'}">
      <el-table-column type="selection"
                       width="55">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.pageCheck"
                       @change="pageCheckEv(scope)"></el-checkbox>
        </template>
      </el-table-column>
      <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 {
      // 全选状态
      checkPageAll: false,
      // 选中数据集合
      selectionAllData: [],
      // 表格数据
      tableData: [{
        id: 1,
        parentId: null,
        date: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        parentId: null,
        date: '2',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      {
        id: 3,
        parentId: null,
        date: '3',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          parentId: 3,
          date: '31',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 311,
              parentId: 31,
              date: '311',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 312,
              parentId: 31,
              date: '312',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [
                {
                  id: 3121,
                  parentId: 312,
                  date: '3121',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄',
                },
                {
                  id: 3122,
                  parentId: 312,
                  date: '3122',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄',
                }
              ]
            }
          ]
        }, {
          id: 32,
          parentId: 3,
          date: '32',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      },
      {
        id: 4,
        parentId: null,
        date: '4',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 数据初始化 绑定 pageCheck 属性
    initData () {
      let bindCheck = (data) => {
        data.forEach(item => {
          // item.pageCheck = false
          this.$set(item, 'pageCheck', false)
          if (item.children && item.children.length) {
            bindCheck(item.children)
          }
        });
      }
      bindCheck(this.tableData)
    },
    // 点击全选
    checkPageAllEv (state) {
      let checkAll = (data, checked) => {
        for (let item of data) {
          // item.pageCheck = checked
          this.$set(item, 'pageCheck', checked)
          if (item.children && item.children.length) {
            checkAll(item.children, checked)
          }
        }
      }
      checkAll(this.tableData, state)
      this.selectionAllData = []
      this.mapChecked(this.tableData)
    },
    // 行点击
    pageCheckEv (scope) {
      // 如果是勾选  则 自身 以及 所有子集都需要选中  所有父集也都需要选中
      // 如果是勾销  则 自身 以及 所有子集都需要取消  所有父级则需要逐级判断其子集是否有勾选的子集
      // 此外 无论是勾选还是勾销  都需要判断对全选状态的影响

      // 处理自身以及子集选中状态
      this.handleCheckAll(scope.row, scope.row.pageCheck)
      // 处理父级
      if (scope.row.parentId) {
        let parents = this.getParent(this.tableData, scope.row.parentId)
        if (scope.row.pageCheck) {
          // 如果是勾选 所有父集都需要选中
          parents.forEach(item => {
            this.$set(item, "pageCheck", true)
          })
        } else {
          // 如果是勾销 所有父级则需要逐级判断其子集是否有勾选的子集
          // 因为 parents 是逐级递归获取的  所以循环父集合也是逐级处理  
          // 只有当上级父元素处理完成 才能处理上上一级元素 
          // 因为上上一级元素的处理是根据其子集情况 即包含了上级父元素的处理状态
          // 万幸的是 object 是复杂数据类型  当你改变了上级父元素的处理状态 那么上上一级元素中的其处理状态也会变化
          parents.forEach(item => {
            let isCheck = item.children.some(child => child.pageCheck)
            this.$set(item, "pageCheck", isCheck)
          })
        }
      }
      // 处理对全选状态的影响
      this.checkPageAll = this.isCheckAllEv(this.tableData)

      this.selectionAllData = []
      this.mapChecked(this.tableData)
      console.log("selectionAllData", this.selectionAllData)
    },
    // 获取选中的数据  使用该方法前需要将 selectionAllData 原有数据清空
    mapChecked (rows) {
      let that = this
      for (let item of rows) {
        if (item.pageCheck) {
          that.selectionAllData.push(item)
          if (item.children && item.children.length) {
            that.mapChecked(item.children)
          }
        }
      }
    },
    // 处理自身以及子集选中状态
    handleCheckAll (row, checked) {
      let that = this
      that.$set(row, 'pageCheck', checked)
      if (row.children && row.children.length) {
        row.children.forEach(item => {
          that.handleCheckAll(item, checked)
        })
      }
    },
    // 判断数据是否全部选中
    isCheckAllEv (data) {
      let isCheckAll = true
      let fn = (arr) => {
        for (let item of arr) {
          if (!item.pageCheck) {
            isCheckAll = false
            break
          }
          if (item.children && item.children.length) {
            fn(item.children)
          }
        }
      }
      fn(data)
      return isCheckAll
    },
    // 逐级获取父级  父级集合
    getParent (data, parentId) {
      let parents = []
      let fn = (arr, parentId) => {
        for (let item of arr) {
          if (item.id == parentId) {
            parents.push(item)
            if (item.parentId) {
              // 注意 此处用的 data 即还是得从原来得查找范围重新开始查找
              fn(data, item.parentId)
            }
            break
          }
          if (item.children && item.children.length) {
            fn(item.children, parentId)
          }
        }
      }
      fn(data, parentId)
      return parents
    }
  }
}
</script>
<style scoped lang="less">
.table-wrap {
  position: relative;
  .check-page-all {
    position: absolute;
    top: 20px;
    left: 11px;
    z-index: 100;
  }
}
</style>