elementUI选择框实现全选功能

如默

撰写于 2023年 04月 29 日

前言

如题，前两天写一个功能的时候需要用到选择框的多选功能，记录一下

正文

elementUI的官方选择框是没有全选功能的，整理一下思路，在选择框里添加一个新的选项，全选，点击全选的时候，isAll方法用来确定是否点击了全选，selectClick方法则用来进行判断，逻辑很简单，代码如下：

对应的element组件：

      <el-form-item label="考核人员" prop="userIds">
        <el-select
          v-model="form.userIds"
          multiple
          filterable
          placeholder="请选择考核人员"
          style="width: 80%"
        >
        <!-- 全选功能 -->
          <el-option
            key="all"
            value="all"
            label="全选"
            @click.native="isAll"
          ></el-option>
          <!-- 选择人员 -->
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            @click.native="selectClick"
          >
          </el-option>
        </el-select>
      </el-form-item>

实现方法：

    selectClick() {
      if (this.userList.length > this.form.userIds.length && this.form.userIds.includes("all")) {
          this.form.userIds.splice(this.form.userIds.indexOf("all"), 1);
      } else if (this.userList.length === this.form.userIds.length && !this.form.userIds.includes("all")) {
        this.form.userIds = ['all', ...this.form.userIds]
      } else {
        if (this.form.userIds.includes("all")) {
        this.form.userIds.splice(this.form.userIds.indexOf("all"), 1);
      }
      }
    },
    isAll() {
      if (this.form.userIds.includes("all")) {
        this.form.userIds = [
          "all",
          ...this.userList.map((item) => item.userId),
        ];
      } else {
        this.form.userIds = [];
      }
    }