el-table 复选框默认勾选和禁止勾选

最新推荐文章于 2024-05-17 16:40:55 发布

坏人OvO

最新推荐文章于 2024-05-17 16:40:55 发布

阅读量7.6k

点赞数 4

分类专栏： element-ui 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/MM_520131400/article/details/126500387

版权

element-ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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);
        });
      }
    },