element-ui表格复选超出数量后剩下的全部禁止选择-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui表格复选超出数量后剩下的全部禁止选择。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先上效果图

elementui表格全选框禁用,ui,vue.js,elementui

主要是两个方面，

1.单选

2.页面内的全选

单选逻辑简单

elementui表格全选框禁用,ui,vue.js,elementui

全选是无法置灰，只能在事件触发后给出提示信息，跟上篇文章提到的方案一致文章来源地址https://www.toymoban.com/news/detail-524316.html

<template>
  <div class="main-content">
    <p>选择5个后就会禁用其他选项</p>
    <el-table
      ref="multipleTable"
      :data="tableData"
      :row-key="handleRowKeyEvent"
      @select="handleOneSelect"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
        :selectable="rowSelectable"
      >
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.shopId }}</template>
      </el-table-column>
      <el-table-column prop="shopName" label="姓名" width="120">
      </el-table-column>
    </el-table>
    <div class="pagebox pall15">
      <div class="eboss-row mt20 justify-center">
        <div class="page-scroll">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 超出数量后其他选项置为不可选择
import mock from "mockjs";
export default {
  name: "tableList",
  data() {
    return {
      maxAllowedNumber: 5,
      totalCount: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizes: [10, 20, 30, 40],
      tableData: [],
      multipleSelection: [],
    };
  },
  mounted() {
    this.queryList();
  },
  methods: {
    // 跨页选择
    handleRowKeyEvent(row) {
      return row.shopId;
    },
    handleOneSelect(selection, row) {
      console.log("单选一个", selection, row);
    },
    handleSelectAll(selection) {
      const tabRef = this.$refs.multipleTable;
      let allSelectResult = tabRef.store.states.isAllSelected;
      console.log("全选按钮勾选后状态为:", allSelectResult);
      console.log("全选:", selection);
      // allSelectResult=true表示未全选状态点击后变为全选
      // 全选且总数大于允许值
      // 全选清空,保留原来的勾选状态,原来勾选数据重新勾选为选中
      if (selection.length > this.maxAllowedNumber && allSelectResult) {
        this.$message({
          message: "超出最大数量限制,不可再次选择",
          type: "error",
        });
        let selectedIds = this.multipleSelection.map(e=>e.shopId)
        console.log("选中全选前,选中id为:", selectedIds);
        tabRef.clearSelection();
        this.$nextTick(() => {
          this.tableData.forEach((row) => {
            if(selectedIds.includes(row.shopId)){
              tabRef.toggleRowSelection(row,true);
            }
          });
        });
      }
    },
    rowSelectable(row, index) {
      const allowedIds = this.multipleSelection.map((e) => e.shopId);
      if (this.multipleSelection.length == this.maxAllowedNumber) {
        return allowedIds.includes(row.shopId);
      }
      return true;
    },
    handleSelectionChange(val) {
      console.log("选中的是", val);
      if (val.length > this.maxAllowedNumber) {
        return;
      }
      this.multipleSelection = val;
    },

    queryList() {
      const res = mock.mock({
        success: true,
        model: {
          "shopList|10": [
            {
              shopId: "@id",
              shopName: "@cname",
            },
          ],
        },
        pageIndex: 1,
        totalCount: 500,
        pageSize: 10,
      });
      if (res.success) {
        this.totalCount = res.totalCount;
        this.tableData = res.model.shopList;
      } else {
        this.$alert(res.errorMessage, "提示");
      }
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageIndex = 1;
      this.queryList();
    },
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.queryList();
    },
  },
};
</script>

到了这里，关于element-ui表格复选超出数量后剩下的全部禁止选择的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！