You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
2.3 KiB
98 lines
2.3 KiB
<template>
|
|
<el-form-item :style="{ ...style, height: height, ...styleObject }"
|
|
:class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']"
|
|
:label="label" :prop="prop" :rules="rules">
|
|
<p v-if="desc" class="desc_right">{{ desc }}</p>
|
|
<el-select :style="{ width: width }" :placeholder="placeholder1" @change="handleChange" v-model="selectedValue"
|
|
v-bind="$attrs">
|
|
<el-option v-for="item in processedOptions" :key="getItemValue(item)" :label="getItemLabel(item)"
|
|
:disabled="item.disabled" :value="getItemValue(item)">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'GuipSelect',
|
|
props: {
|
|
value: [String, Number, Array],
|
|
options: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
// 新增配置字段
|
|
valueKey: {
|
|
type: String,
|
|
default: 'value'
|
|
},
|
|
labelKey: {
|
|
type: String,
|
|
default: 'label'
|
|
},
|
|
styleObject: Object,
|
|
disabled: Boolean,
|
|
defaultValue: [String, Number, Array],
|
|
placeholder: String,
|
|
width: String,
|
|
height: String,
|
|
label: String,
|
|
type: String,
|
|
prop: String,
|
|
rules: [Object, Array],
|
|
column: Boolean,
|
|
addClass: String,
|
|
desc: String
|
|
},
|
|
data() {
|
|
return {
|
|
selectedValue: '',
|
|
style: {},
|
|
placeholder1: '请选择',
|
|
}
|
|
},
|
|
computed: {
|
|
// 处理options为空的情况
|
|
processedOptions() {
|
|
return this.options || []
|
|
}
|
|
},
|
|
watch: {
|
|
value(newVal) {
|
|
this.selectedValue = newVal
|
|
},
|
|
defaultValue(newVal) {
|
|
if (newVal !== undefined && newVal !== null) {
|
|
this.selectedValue = newVal
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// 默认值赋值
|
|
if (this.defaultValue !== undefined && this.defaultValue !== null) {
|
|
this.selectedValue = this.defaultValue
|
|
}
|
|
if (this.value !== undefined && this.value !== null) {
|
|
this.selectedValue = this.value
|
|
}
|
|
// 默认提示语
|
|
if (this.placeholder) {
|
|
this.placeholder1 = this.placeholder
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取value值
|
|
getItemValue(item) {
|
|
return item[this.valueKey]
|
|
},
|
|
// 获取label值
|
|
getItemLabel(item) {
|
|
return item[this.labelKey]
|
|
},
|
|
handleChange(value) {
|
|
this.$emit('input', value)
|
|
this.$emit('change', value)
|
|
}
|
|
}
|
|
}
|
|
</script>
|