在子组件中带复选框的element表格默认勾选

Question

封装了一个组件，子组件中有带有复选框的element表格，数据都是在父组件中控制的，怎样让子组件中的复选框默认勾选上

点击编辑的时候，弹出弹窗，弹窗的表格复选框自动勾选上。

父组件数据如下，通过selected来控制复选框的勾选

子组件就是个elementui的带复选框组件

 

 

Answer 1

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>