el-select实现下拉多选,全选,反选,清空功能

el-select实现下拉多选,全选,反选,清空功能

vue+elementui实现下拉多选，全选，反选，清空功能

显示效果 ,复制所有代码即可看到效果

页面组件使用

<template>
  <div style="width: 300px">
    <MultipleSelect
      ref="multipleSelect"
      :bindValue.sync="formData.stocking_status"
      :options="stockingStatusListData"
      :options-symbol="symbolListData"
      :stocking-placeholder="stockingPlaceholder"
      @changeSelect="changeSelect"
    />
  </div>
</template>

<script>
import MultipleSelect from "./components/MultipleSelect/index";
export default {
  name: "TestSelect",
  components: {
    MultipleSelect,
  },
  data() {
    return {
      formData: {
        category: "",
        stocking_status: {
          condition_code: "",
          condition_type: "",
          condition_value: "",
        },
      },
      stockingStatusListData: [
        { label: "Stocked", value: "0" },
        { label: "Unstocked", value: "1" },
        { label: "Three", value: "2" },
        { label: "Two", value: "3" },
        { label: "One", value: "4" },
      ],
      symbolListData: [
        { label: "=", value: 1, type: "IN" },
        { label: "!=", value: 2, type: "NOT IN" },
      ],
      stockingPlaceholder: "Select Stocking Status",
    };
  },

  methods: {
    changeSelect(value) {
      console.log(value, "最终值");
    },
  },
};
</script>

子组件代码 MultipleSelect

<template>
  <div class="multiple-select">
    <el-select
      slot="prepend"
      v-model="symbolSelect"
      placeholder="symbol"
      size="mini"
      clearable
      style="width: 90px"
      @change="changeSymbolSelect"
    >
      <el-option
        v-for="item in optionsSymbol"
        :key="item.value"
        :label="item.label"
        :value="item"
      />
    </el-select>

    <el-select
      v-model="stockingSelect"
      multiple
      collapse-tags
      size="mini"
      :placeholder="stockingPlaceholder"
      @change="changeStockingSelect"
      style="width: 100%"
    >
      <div class="select_up">
        <el-button type="text" @click="selectAll">
          <i class="el-icon-check" />
          All</el-button
        >
        <el-button type="text" @click="clearAll">
          <i class="el-icon-close" />
          Clear</el-button
        >
        <el-button type="text" @click="selectReverse">
          <i class="el-icon-refresh" />
          Reverse</el-button
        >
      </div>
      <div class="select_list">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item"
        />
      </div>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "MultipleSelect",
  props: {
    // 符号下拉
    optionsSymbol: {
      type: Array,
      default: () => [],
    },
    // 下拉选项
    options: {
      type: Array,
      default: () => [],
    },
    bindValue: {
      type: Object,
      default: () => {},
    },
    // 符号下拉的placeholder
    symbolPlaceholder: {
      type: String,
      default: "symbol",
    },
    // 下拉选项的placeholder
    stockingPlaceholder: {
      type: String,
      default: "stocking_status",
    },
    // 格式化的值
    formatValue: {
      type: String,
      default: () => "label",
    },
  },
  data() {
    return {
      symbolSelect: {},
      stockingSelect: [],
      formData: {
        condition_code: "",
        condition_type: "",
        condition_value: "",
      },
    };
  },
  watch: {
    formData: {
      handler(val) {
        this.$emit("update:bindValue", val);
      },
      deep: true,
    },
  },
  methods: {
    //清空操作
    clearAll() {
      this.stockingSelect = [];
      this.formData.condition_value = "";
    },
    //全选操作
    selectAll() {
      this.stockingSelect = this.options;
      this.formatData(this.stockingSelect);
    },
    //反选操作
    selectReverse() {
      let val = this.options.filter((item) => {
        return !this.stockingSelect.includes(item);
      });
      this.stockingSelect = val;
      this.formatData(val);
    },
    // 选中值发生变化时触发
    changeStockingSelect(val) {
      this.formatData(val);
    },

    // 选中值发生变化时触发
    changeSymbolSelect(val) {
      this.stockingSelect = [];
      this.formData.condition_code = val.value;
      this.formData.condition_type = val.type;
      this.$emit("changeSelect", this.formData);
    },
    clearSymbolAndStocking() {
      this.symbolSelect = {};
      this.stockingSelect = [];
      this.formData = {
        condition_code: "",
        condition_type: "",
        condition_value: "",
      };
    },

    formatData(vals) {
      if (vals.length > 0) {
        if (this.formatValue === "label") {
          const formattedString = vals.map((item) => item.label).join(",");
          this.formData.condition_value = formattedString;
        } else {
          const formattedString = vals.map((item) => item.value).join(",");
          this.formData.condition_value = formattedString;
        }
      }
      this.$emit("changeSelect", this.formData);
    },
  },
};
</script>

<style lang="scss" scoped>
.multiple-select {
  display: flex;
}
::v-deep .el-select__tags-text {
  display: inline-block;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select_up {
  display: flex;
  padding: 0 12px;
  font-size: 14px;
  position: absolute;
  z-index: 9999;
  background-color: white;
  top: 0px;
  width: 100%;
  border-radius: 5px 5px 0 0;

  ::v-deep .el-button {
    color: #bcbcbc;
    font-size: 14px;

    i {
      font-size: 14px;
    }
  }
  ::v-deep .el-button:hover {
    color: #409eff;
  }

  .el-button + .el-button {
    margin-left: 6px;
  }
}
.select_list {
  margin-top: 25px;
  min-width: 180px;
}
</style>