el-table树形结构的复选

el-table树形结构的复选

在element-ui 2.13中，树形表格加复选框后，子结构无法选中的问题。于是在table上监听点击和全选，根据数据有子节点来手动切换选中与否。
template如下：

  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :indent="50"
    :select-on-indeterminate="false"
    @select="select"
    @select-all="selectAll"
    @selection-change="selectionChange"
    default-expand-all
    :tree-props="{children: 'childList'}">
    <el-table-column
    type="selection"
    width="55">
    </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>
  {{ selectArr.map(el => el.id) }}
  <div style="margin-top: 20px">
    <el-button @click="cancelAll()">取消选择</el-button>
  </div>

data如下

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

script代码如下

select (selection, row) {
  if (selection.some(el => { return row.id === el.id })) {
    if (row.childList) {
      row.childList.map(j => {
        this.toggleSelection(j, true)
      })
    }
  } else {
    if (row.childList) {
      row.childList.map(j => {
        this.toggleSelection(j, false)
      })
    }
  }
},
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)
  })
  if (isSelect) {
    selection.map(el => {
      if (el.childList) {
        el.childList.map(j => {
          this.toggleSelection(j, true)
        })
      }
    })
  }
  if (isCancel) {
    this.tableData.map(el => {
      if (el.childList) {
        el.childList.map(j => {
          this.toggleSelection(j, false)
        })
      }
    })
  }
},
selectionChange (selection) {
  this.selectArr = selection
},
toggleSelection (row, select) {
  if (row) {
    this.$nextTick(() => {
      this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
    })
  }
},
cancelAll () {
  this.$refs.table.clearSelection()
}

有个问题手动切换选中会多次切换表格的selection-change，
满足了基本效果，希望有其他方法的留言