vue table表格多选 以及 单击某行选中与取消 全选按钮正常显示

单击某行关键事件

row-click   rowclick（）{ this.$refs.multipleTable.toggleRowSelection(row);}

若全选按钮不能正常显示 需要另外添加事件

:row-key="getRowKey"

getRowKey(row){

return row.id

}

<template>

  <div>

    <el-table

      ref="multipleTable"

      :data="tableData"

      tooltip-effect="dark"

      style="width: 100%"

      @selection-change="handleSelectionChange"

      @row-click="rowClick"

    >

      <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 style="margin-top: 20px">

      <el-button @click="toggleSelection([tableData[1], tableData[2]])"

        >切换第二、第三行的选中状态</el-button

      >

      <el-button @click="toggleSelection()">取消选择</el-button>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      tableData: [

        {

          date: "2016-05-03",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          date: "2016-05-02",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          date: "2016-05-04",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          date: "2016-05-01",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          date: "2016-05-08",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          date: "2016-05-06",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

        {

          date: "2016-05-07",

          name: "王小虎",

          address: "上海市普陀区金沙江路 1518 弄",

        },

      ],

      multipleSelection: [],

    };

  },

  methods: {

    rowClick(row) {

      this.$refs.multipleTable.toggleRowSelection(row);

    },

    toggleSelection(rows) {

      if (rows) {

        rows.forEach((row) => {

          this.$refs.multipleTable.toggleRowSelection(row);

        });

      } else {

        this.$refs.multipleTable.clearSelection();

      }

    },

    handleSelectionChange(val) {

      this.multipleSelection = val;

      // console.log("多选",this.multipleSelection)

    },

  },

};

</script>