el-table 切换勾选状态和禁止勾选

原文地址：https://huaweicloud.csdn.net/638f11a4dacf622b8df8e61f.html

<template>
  <div>
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        class="tables"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :selectable="selectEnable">
        el-table-column>
        <el-table-column label="日期" width="320">
          <template slot-scope="scope">{{ scope.row.date }}template>
        el-table-column>
        <el-table-column prop="name" label="姓名" width="220">
        el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip />
      el-table>
    div>

    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])"
        >切换第二、第三行的选中状态el-button
      >
      {{ multipleSelection }}
    div>
  div>
template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-07",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎5",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "王小虎6",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
    };
  },
  created() {
    //必须使用
    this.$nextTick(() => {
      this.$refs.multipleTable.toggleRowSelection(this.tableData[0], true);
    });
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(row, true);
            // this.$refs.multipleTable.toggleRowSelection(row, false);
            // this.$refs.multipleTable.toggleRowSelection(row);
          });
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    selectEnable(row, rowIndex) {
      return rowIndex;
    },
  },
};
script>
<style lang='scss' scoped>
.tables {
  height: calc(100vh - 100px);
  overflow: auto;
}

style>

复选框

<el-table-column type="selection" width="55" :selectable="selectEnable" />

selectable : 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
selectEnable: Function(row, index)

//默认第一条不可勾选的
selectEnable(row, rowIndex) {
  //rowIndex===0(false)
      return rowIndex;
    },

返回值 1. true 复选框是可以勾选的 2. false 复选框是禁用的

默认值勾选

//必须使用 this.$nextTick,因为可能视图还没渲染或者更新,没法通过refs获取DOM
    this.$nextTick(() => {
      this.$refs.multipleTable.toggleRowSelection(this.tableData[0], true);
    });

toggleRowSelection: 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
toggleRowSelection(row,flag)
row: 当前被选中的数据
flag: 可填 (false,true,不填)

flag :false不可被选中
flag :true 永久被选中
flag 不填 双击点击按钮,选中会消失;单击点击按钮,会被选中

//可以一个一个试一试
toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
          // this.$refs.multipleTable.toggleRowSelection(row, false);
          // this.$refs.multipleTable.toggleRowSelection(row);
        });
      }
    },