elementplus 自定义多选组件

<template>
  <div class="tag-wrap">
    <div
      class="tag-item el-button"
      v-for="tabItem in props.cardItems"
      :key="tabItem.value"
      :class="[modelValue.includes(tabItem.value) ? 'el-button--primary' : '']"
      @click="changeTab(tabItem)"
    >
      {{ tabItem.label }}
    </div>
  </div>
</template>
<script setup lang="ts" name="select_tag">
import { computed } from "vue";
import { useFormItem } from "element-plus";

interface cardItem {
  label: string;
  value: string | number;
}

interface selectTagProps {
  cardItems?: cardItem[];
  modelValue: Array<string | number>;
}

const emit = defineEmits(["update:modelValue"]);
const { formItem } = useFormItem();

const props = withDefaults(defineProps<selectTagProps>(), {
  cardItems: () => [],
  modelValue: () => []
});

const changeTab = (tabItem: cardItem) => {
  let tabItems = modelValue.value.slice();
  let haveSelected = false;
  for (let i = 0; i < tabItems.length; i++) {
    if (tabItems[i] == tabItem.value) {
      tabItems.splice(i, 1);
      haveSelected = true;
      break;
    }
  }

  if (!haveSelected) {
    tabItems.push(tabItem.value);
  }

  modelValue.value = tabItems;
};

const modelValue = computed<Array<string | number>>({
  get(): Array<string | number> {
    return props.modelValue;
  },
  set(v: Array<string | number>) {
    emit("update:modelValue", v);
    formItem?.validate?.("change").catch(err => {
      console.log(err);
    });
  }
});
</script>

<style lang="scss" scoped>
.tag-wrap {
  display: flex;
  flex-wrap: wrap;
  .tag-item {
    margin-right: 8px;
    margin-bottom: 8px;
    margin-left: 0;
  }
}
</style>