<template>
  <el-table ref="myTable" :data="tableData" @selection-change="handleSelectChange">
    <el-table-column type="selection"></el-table-column>
    <el-table-column prop="date" label="Date"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
  <br>
  <div>
    <el-button @click="selectRows([tableData[1], tableData[3]])">选中第2行和第4行</el-button>
    <el-button @click="selectRows()">选中第2行和第4行</el-button>
  </div>
</template>

<script>
export default {
  name: "Table_Demo11",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          address: "No. 189, Grove St, Los Angeles"
        },
        {
          date: "2016-05-04",
          name: "Tom1",
          address: "No. 1891, Grove St, Los Angeles"
        },
        {
          date: "2016-05-05",
          name: "Tom2",
          address: "No. 1892, Grove St, Los Angeles"
        },
        {
          date: "2016-05-06",
          name: "Tom3",
          address: "No. 1893, Grove St, Los Angeles"
        },
      ]
    }
  },
  methods: {
    selectRows(rows) {
      if (rows) {
        rows.forEach((row)=>{
          this.$refs.myTable.toggleRowSelection(row);
        })
      }else{
        this.$refs.myTable.clearSelection();
      }
    },
    handleSelectChange(selectRows) {
      console.log(selectRows)
    }
  }
}
</script>

<style scoped>

</style>
