Element table 表格默认勾选

需求：

父组件一组数据，子组件是表格数据，父组件的数据需要在子组件表格中进行默认勾选；

代码如下：

在 table 提供了这样一个方法 toggleRowSelection ：

HTML代码：

<template>
    <el-table
        ref="multipleTable"
        :data="tableData"
        row-key="id"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

js代码：

<script>
export default {
  data() {
    return {
      // 默认勾选的数据
      checkeAll: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ],
      // 表格数据
      tableData: [
        {
          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 弄'
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  mounted() {
    this.getDefault();
  },
  methods: {
    handleSelectionChange(val) {
      this.checkeAll = val;
    },
    getDefault() {
      this.checkeAll.forEach((val, index) => {
        let obj = this.tableData.find(o => o.id === val.id);
        if(obj) this.$refs.multipleTable.toggleRowSelection(obj);
      })
    }
  }
}
</script>