el-tab用户实现单选多选功能（@row-click，@selection-change）以及取消选中

1、效果图

1.1、默认选中效果

1.2、单选，多选，全选效果

2、实现代码

<template>
  <el-table
    :data="tableData3"
    ref="multipleTable"
    @row-click="handleCurrentChange"
    @selection-change="selsChange"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column type="index" label="序号" width="60"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
<script>
export default {
  // 变量声明
  data() {
    return {
      // 表格动态绑定属性
      tableData3: [
        {
          id: "1",
          date: "2016-05-03",
          name: "呼保义",
          address: "山东省郓城县",
        },
        {
          id: "2",
          date: "2016-05-02",
          name: "玉麒麟",
          address: "河北省大名县",
        },
        {
          id: "3",
          date: "2016-05-02",
          name: "智多星",
          address: "山东省郓城县",
        },
      ],

      // 存 所选中行的id
      arrID: [],

      // 存 当前行数据
      arrNew: [],
    };
  },

  // 所定义的方法
  methods: {
    /**
     * % tag 1 取消选中
     * @param arr 已选中行id 数组
     * @param val 当前选中行id
     * @description 取消选中
     */
    removeByValue(arr, val) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          break;
        }
      }
    },

    /**
     * % tag 点击事件
     * @param row 行数据
     * @description 当某一行被点击时会触发该事件
     */
    handleCurrentChange(row) {
      // 是否是已选中的行
      var same = false;

      if (this.arrID.length > 0) {
        for (var i = 0; i < this.arrID.length; i++) {
          if (this.arrID[i] == row.id) {
            same = true;
            this.removeByValue(this.arrID, row.id);
            break;
          }
        }
        if (same == true) {
          this.$refs.multipleTable.toggleRowSelection(row, false);
        } else {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        }
      } else {
        // 首次点击直接选中 设置true
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },

    /**
     * % tag 行变化调用
     * @param val 所选中id 数组
     * @description 获取选中的值
     */
    selsChange(val) {
      let valId = [];
      for (var i = 0; i < val.length; i++) {
        valId.push(val[i].id);
      }
      this.arrID = valId;
      this.arrNew = val;
    },
  },

  // 页面加载调用
  mounted() {
    // 默认选中
    this.$refs.multipleTable.toggleRowSelection(this.tableData3[2], true);
  },
};
</script>

3、关键代码

1、splice方法

<template>
  <div>
    <ul>
      <li v-for="(item, index) in books" :key="index">{{ item }}</li>
    </ul>
    <br />
    <button @click="add">添加</button>
    <button @click="modify">替换</button>
    <button @click="del">删除</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 定义 数组heros
      message: "你好",
      books: ["三国演义", "西游记", "水浒传"],
    };
  },
  methods: {
    add() {
      this.books.splice(
        2,
        0,
        "splice可以增、删、替换元素 splice(开始地址，删除个数，内容) "
      );
    },
    modify() {
      // 表示 西游记 被替换 红楼么 中间1  删除一位
      this.books.splice(1, 1, "删除个数必须为1才是修改");
    },
    del() {
      // splice(开始地址，删除个数，内容)
      // 删除第一位数据
      this.books.splice(0, 1);
    },
  },
};
</script>

效果图

2、push方法

// push  最后一位追加
// pop   最后一位删除
this.books.push("push添加1", "push添加2");
this.books.pop();

2、toggleRowSelection

toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中
用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否 selected 为 true 则选中

3、@row-click=“handleCurrentChange”

当某一行被点击时会触发该事件

4、@selection-change=“selsChange”

当选择项发生变化时会触发该事件 比如获取当前行数据

5、this.$refs.multipleTable.toggleRowSelection(row, true)理解

this,代表在当前vue里面，$refs代表一个引用（可以看成一个包名），然后multipleTable就是el-tab中的ref,可以理解为该控件的一个对象，之后通过对象调用方法toggleRowSelection

可参考elementui官网