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 = [];
      }
    }

elementUI选择框实现全选功能

温馨提示:

本文最后更新于2023年04月29日,已超过358天没有更新,若内容或图片失效,请留言反馈。

前言

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

正文

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 = [];
      }
    }

赞 (0)

猜您想看

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论

Vaptcha 初始化中...