el-select增加全选选项

最新推荐文章于 2024-09-18 11:01:49 发布

UpUp_seaboy

最新推荐文章于 2024-09-18 11:01:49 发布

阅读量523

点赞数 1

分类专栏： element-ui开发笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Y_seaboy/article/details/132765803

版权

element-ui开发笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果截图：

在这里插入图片描述

<template>
  <div>
    <span>专业：</span>
    <el-select
      multiple
      collapse-tags
      @change="specialityNoChange"
      :value="specialityNoList"
    >
      <el-option :key="-999" label="全选" :value="-999"></el-option>
      <el-option
        v-for="item in specialityList"
        :key="item.specialityNo"
        :label="item.specialityName"
        :value="item.specialityNo"
      >
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectQueryList: {
        specialityNoList: [],
      },
      specialityNoList: [],
      specialityList: [
        {
          specialityName: "建筑",
          specialityNo: "ZY0001",
        },
        {
          specialityName: "总图",
          specialityNo: "SZY0046",
        },
        {
          specialityName: "结构",
          specialityNo: "ZY0003",
        },
        {
          specialityName: "给排水",
          specialityNo: "ZY0004",
        },
        {
          specialityName: "暖通",
          specialityNo: "ZY0006",
        },
        {
          specialityName: "燃气",
          specialityNo: "SZY0005",
        },
        {
          specialityName: "电气",
          specialityNo: "ZY0005",
        },
        {
          specialityName: "弱电",
          specialityNo: "SZY0003",
        },
        {
          specialityName: "消防电",
          specialityNo: "SZY0045",
        },
        {
          specialityName: "智能化",
          specialityNo: "SZY0004",
        },
        {
          specialityName: "BIM",
          specialityNo: "ZY0011",
        },
        {
          specialityName: "土石方工程",
          specialityNo: "ZY0030",
        },
      ],
    };
  },
  methods: {
    // 筛选专业改变
    specialityNoChange(val) {
      const list = this.specialityList;
      const idList = list.map((el) => el.specialityNo);
      if (val.indexOf(-999) >= 0) {
        if (
          this.specialityNoList.indexOf(-999) >= 0 &&
          val.length === list.length
        ) {
          val.splice(0, 1);
          this.specialityNoList = val;
        } else {
          this.specialityNoList = [-999, ...idList];
        }
      } else {
        if (val.length === list.length) {
          if (this.specialityNoList.indexOf(-999) >= 0) {
            this.specialityNoList = [];
          } else {
            this.specialityNoList = [-999, ...val];
          }
        } else {
          this.specialityNoList = val;
        }
      }
      this.selectQueryList.specialityNoList = this.specialityNoList.filter(
        (e) => e != -999
      );
      this.$nextTick(() => {
        console.log(this.selectQueryList);
      });
    },
  },
};
</script>