elemengui多选表格超出允许数量后再次选择给出提示信息

elemengui多选表格超出允许数量后再次选择给出提示信息

需考虑的点：

1. 单个选择时大于允许数量给出提示信息

2. 全选后如果选中数量大于允许数量等于全选事件没有操作但是会有个提示信息

效果图：

 

实现方案

1.单选时超过允许数量后直接把最后的这个置为无选择，单选解决

 2. 多选时

     全选且总数大于允许值

     保留原来的勾选状态,全选清空,原来勾选数据重新勾选为选中

 

<template>
  <div class="main-content">
    <p>选择5个后在点击其他选项给出提示信息</p>
    <p>全选如果数量超过允许值给出提示信息,不做任何数据和展示上的变动</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">
      </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>
// 1. 超出数量后点击提示错误信息并且不选中最后点击的这个
// 2. 超出数量后其他选项置为不可选择
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);
      if (selection.length > this.maxAllowedNumber) {
        this.$message({
          message: "超出最大数量限制,不可再次选择",
          type: "error",
        });
        this.$refs.multipleTable.toggleRowSelection(row, false);
      }
    },
    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);
            }
          });
        });
      }
    },
    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,
      });
      console.log("mockData--", res);
      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>