<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>
使用组件
<CommonSelect
v-model="form.axisNetId"
:data="axisNetList"
:option="axisNetOption"
:disabled="!!axisNetId"
placeholder="请选择轴网"
@change="axisNetChange"
/>
在option里面根据自己业务来配置