elementUI之下拉选项加多选框功能实现vue3+ts-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementUI之下拉选项加多选框功能实现vue3+ts。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

根据
@牛先森家的牛奶
的代码修改后实现

<template>
    <div class="select-checked">
      <el-select
        v-model="selected"
        :class="{ all: optionsAll }"
        multiple
        placeholder="请选择"
        :popper-append-to-body="false"
      >
        <el-option :value="''" label="全部" class="multiple">
          <el-checkbox v-model="optionsAll" @change="handleOptionsAllChange" style="width: 100%;">
            全部
          </el-checkbox>
        </el-option>
        <el-option
          class="multiple"
          :value="item.value"
          :label="item.label"
          v-for="(item, key) in optionsData"
          :key="key"
        >
          <el-checkbox v-model="item.check" @change="handleTaskItemChange(item)" style="width: 100%;">
            {{ item.label }}
          </el-checkbox>
        </el-option>
      </el-select>
    </div>
  </template>
  
<script lang="ts">
  import { defineComponent } from 'vue';
  
  export default defineComponent({
    props: {
      options: {
        type: Array as () => Array<any>,
        required: true,
      }
    },
    data() {
      return {
        optionsData: [] as any[],
        optionsAll: false,
        selectedOptions: [] as any[],
      };
    },
    watch: {
      options: {
        handler(newVal) {
          this.optionsData = newVal;
          let checkedData = newVal.filter((item: any) => item.check);
          this.selectedOptions = checkedData.map((item: any) => item.value);
          this.optionsAll = checkedData.length === newVal.length;
        },
        immediate: true,
      }
    },
    mounted() {        
        // 在控件载入时触发父级的selected方法
        this.$emit('selected', this.selectedOptions);
    },
    computed: {
      selected: {
        get() {
          return this.selectedOptions.length > this.options.length ? [''] : this.selectedOptions;
        },
        set(value: any[]) {
          this.selectedOptions = value;
        },
      },
    },
    methods: {
      handleOptionsAllChange(isAll: boolean) {
        this.optionsData.forEach((elm: any) => {
          elm.check = isAll;
        });
        this.selectedOptions = isAll ? this.optionsData.map((item: any) => item.value) : [];
        this.$emit('selected', this.selectedOptions);
      },
      handleTaskItemChange(item: any) {
        if (!item.check) {
          this.selectedOptions = this.selectedOptions.filter((value: any) => value !== item.value);
        } else {
          this.selectedOptions.push(item.value);
        }        
        this.optionsAll = this.selectedOptions.length === this.optionsData.length;
        this.$emit('selected', this.selectedOptions);
      },
    },
  });
  </script>
  <style lang="scss">
  .select-checked {
    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
      content: '';
    }
    .el-checkbox {
      width: 100%;
      padding: 0 30px;
      .el-checkbox__label {
        margin-left: 20px;
      }
    }
    .el-select-dropdown__item {
      padding: 0;
    }
    .el-tag__close,
    .el-icon-close {
      display: none;
    }
    .el-tag.el-tag--info {
      background: transparent;
      border: 0;
    }
  
    .el-select {
      .el-select__tags {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
      }
      .el-tag {
        background-color: #fff;
        border: none;
        color: #606266;
        font-size: 13px;
        padding-right: 0;
        & ~ .el-tag {
          margin-left: 0;
        }
        &:not(:last-child)::after {
          content: ',';
        }
      }
    }
  }
  </style>