Vue3基于Element-plus的Select组建进行二次封装-demo

 组件 

<template>
  <ElSelect
    class="follow-records-pairs-select"
    v-model="selectVal"
    :placeholder="placeholder"
    @change="selectChange"
  >
    <ElOption
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </ElSelect>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive } from 'vue';
import { ElSelect, ElOption } from 'element-plus';
const props = defineProps({
  modelValue: {
    type: String
    // default: false
  },
  options: {
    type: Array,
    default: () => []
  },
  placeholder: {
    type: String,
    default: '请选择'
  }
});
const emits = defineEmits(['update:modelValue', 'onChangeSelect']);
const selectVal = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  }
});

const selectChange = (val) => {
  console.log(val);
  emits('onChangeSelect', val);
};
</script>
<style lang="less" scoped>
.follow-records-pairs-select {
  background-color: #f5f5f5;
  height: 31px;
  width: 132px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  // margin-left: 16px;
}
</style>

使用

<DarkSelect
v-model="selectVal"
:options="options"
@onChangeSelect="selectChange"
/>

import DarkSelect from './DarkSelect.vue';
const selectVal = ref('all');
const options = [
    {
    label: '全部合约',
    value: 'all'
    },
    {
    label: '全部合约2',
    value: 'all2'
    }
];

const selectChange = (val) => {
    console.log(val);
};

Vue3基于Element-plus的Select组件进行二次封装可以提高开发效率，使组件的使用更加简便。下面是封装的基本步骤：

1. 创建一个组件文件，比如Select.vue，引入Element-plus的Select组件。
2. 定义组件的props属性，以便外部传递数据。
3. 在组件中使用template标签，包裹Element-plus的Select组件，并使用v-model绑定选中的值。
4. 可以在组件中添加一些默认的选项，也可以将选项通过props属性传入。
5. 将组件通过export default导出，以便其他组件可以引用。
6. 在需要使用该组件的父组件中，引入组件并传入props属性。
7. 在父组件中使用该组件，通过v-model绑定选中的值，并通过props属性传入选项。
8. 最后，在父组件中处理选中值的变化。

以下是一个示例代码：

<template>
  <el-select v-model="selectedValue" :placeholder="placeholder">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
import { defineComponent } from "vue";
import { ElSelect, ElOption } from "element-plus";

export default defineComponent({
  components: { ElSelect, ElOption },
  props: {
    value: String,
    placeholder: String,
    options: {
      type: Array,
      default: () => [],
    },
  },
  emits: ["update:value"],
  data() {
    return {
      selectedValue: "",
    };
  },
  watch: {
    selectedValue(val) {
      this.$emit("update:value", val);
    },
    value(val) {
      this.selectedValue = val;
    },
  },
});
</script>

在父组件中使用该组件：

<template>
  <select
    v-model="selectedValue"
    :options="selectOptions"
    placeholder="请选择"
  ></select>
</template>

<script>
import Select from "./Select.vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: { Select },
  setup() {
    const selectedValue = ref("");
    const selectOptions = [
      { value: "option1", label: "选项1" },
      { value: "option2", label: "选项2" },
      { value: "option3", label: "选项3" },
    ];

    return {
      selectedValue,
      selectOptions,
    };
  },
});
</script>

<template>
  <select
    v-model="selectedValue"
    :options="selectOptions"
    placeholder="请选择"
  ></select>
</template>

<script>
import Select from "./Select.vue";
import { defineComponent, ref } from "vue";

export default defineComponent({
  components: { Select },
  setup() {
    const selectedValue = ref("");
    const selectOptions = [
      { value: "option1", label: "选项1" },
      { value: "option2", label: "选项2" },
      { value: "option3", label: "选项3" },
    ];

    const handleChange = (val) => {
      console.log(val);
    };

    return {
      selectedValue,
      selectOptions,
      handleChange,
    };
  },
});
</script>