v2 基于element封装公用组件select_el-select-v2

<template>
  <el-select placeholder="请选择" clearable v-bind="$attrs" v-on="$listeners">
    <el-option
      v-for="item in data"
      :key="item[option.key]"
      :label="option.isLabelFuc ? option.label(item) : item[option.label]"
      :value="item[option.value]"
      :disabled="
        option.isDisabledFun ? option.disabled(item) : item[option.disabled]
      "
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: "CommonSelect",
  components: {},
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({
        isLabelFuc: false, // 是否自定义label -- 开启后label请传递函数
        isDisabledFun: false,
        key: "id",
        label: "name",
        value: "id",
        disabled: false,
      }),
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

使用组件

  <CommonSelect
          v-model="form.axisNetId"
          :data="axisNetList"
          :option="axisNetOption"  
          :disabled="!!axisNetId"
          placeholder="请选择轴网"
          @change="axisNetChange"
        />
1
2
3
4
5
6
7
8

在option里面根据自己业务来配置