element vue 获取select 的label_项目中常用的vue代码总结（2）

下拉多选以及全选

项目中使用的是element-ui的el-select组件；

需求：

• 下拉的所有字段多选；
• 额外在下拉框中多一个全选选项，点击全选，则全选所有字段

templete中代码：

<el-select
    class="select-options"
    @change="selectValueChange"
    v-model="selectValue"
    multiple
    placeholder="请选择"
>
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
</el-select>

options部分代码在我的项目中有很多，我写了一个js文件，页面用的时候就导入options就好了，要不然页面中的代码很长很长，其中加了一个全选，allcheck选项：

const TraveledInfoList = [
  {
    value: "allcheck",
    label: "全选"
  },
  {
    value: "expDescription",
    label: "描述"
  },
  {
    value: "classify",
    label: "分类"
  },
  {
    value: "travelTime",
    label: "经验使用季节"
  }
];

主要是selectValueChange方法：

selectValueChange(val) {
      const allValues = [];

      // 保留所有值
      for (const item of this.options) {
        allValues.push(item.value);
      }
      // 用来储存上一次的值，可以进行对比
      const oldVal =
        this.oldselectValue.length === 1 ? this.oldselectValue[0] : [];
      // 若是全部选择

      if (val.includes("allcheck")) {
        this.selectValue = allValues;
      }
      // 取消全部选中 上次有 当前没有 表示取消全选
      if (oldVal.includes("allcheck") && !val.includes("allcheck")) {
        this.selectValue = [];
      }
      // 点击非全部选中 需要排除全部选中 以及 当前点击的选项
      // 新老数据都有全部选中
      if (oldVal.includes("allcheck") && val.includes("allcheck")) {
        const index = val.indexOf("allcheck");

        val.splice(index, 1); // 排除全选选项
        this.selectValue = val;
      }
      // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
      if (!oldVal.includes("allcheck") && !val.includes("allcheck")) {
        if (val.length === allValues.length - 1) {
          this.selectValue = ["allcheck"].concat(val);
        }
      }
      // 储存当前最后的结果 作为下次的老数据
      this.oldselectValue[0] = this.selectValue;
    },

效果如下：

• 在下拉列表中增加一个全选选项。
• 当点击全选之后选择全部下拉选项，
• 当点击某一个已经选择的选择则全选选择取消，所选选项也取消选择

如果项目中有涉及到类似需求，可直接调用该方法，做项目做了很多需求，以后慢慢都抽离出来整理，项目中常用的vue代码总结系列会一直更新，哈哈哈，欢迎一起探讨！