| | |
| | | <template> |
| | | <el-form-item label="用户类型"> |
| | | <el-form-item label="用户类型" :prop="prop"> |
| | | <el-select |
| | | v-model="selectedOptions" |
| | | :model-value="value" |
| | | @change="handleChange" |
| | | placeholder="用户类型" |
| | | style="width: 150px" |
| | | > |
| | | <el-option |
| | | v-for="s in userTypes" |
| | | :key="s.value" |
| | | :label="s.label" |
| | | :value="s" |
| | | /> |
| | | <el-option v-for="s in userTypes" :key="s.value" :label="s.label" :value="s" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </template> |
| | |
| | | // 是否在首选项处添加“全部”选项 |
| | | allOption: { |
| | | type: Boolean, |
| | | default: true, |
| | | default: true |
| | | }, |
| | | // 返回结果 |
| | | value: Object, |
| | | // 是否默认返回初始选项 |
| | | initValue: { |
| | | type: Boolean, |
| | | default: true, |
| | | default: true |
| | | }, |
| | | prop: { |
| | | type: String, |
| | | default: '_usertype' |
| | | } |
| | | }, |
| | | emits: ['update:value'], |
| | | data() { |
| | | return { |
| | | userTypes: enumUser(this.allOption), |
| | | selectedOptions: {}, |
| | | userTypes: enumUser(this.allOption) |
| | | }; |
| | | }, |
| | | watch: { |
| | | selectedOptions: { |
| | | handler(nVal, oVal) { |
| | | if (nVal != oVal) { |
| | | this.$emit('update:value', nVal); |
| | | } |
| | | }, |
| | | deep: true, |
| | | }, |
| | | value: { |
| | | handler(nVal, oVal) { |
| | | if (nVal != oVal) { |
| | | this.selectedOptions = nVal; |
| | | } |
| | | }, |
| | | deep: true, |
| | | immediate: true |
| | | }, |
| | | methods: { |
| | | handleChange(value) { |
| | | this.$emit('update:value', value); |
| | | } |
| | | }, |
| | | mounted() { |
| | | if (this.initValue) { |
| | | this.selectedOptions = this.userTypes[0]; |
| | | this.handleChange(this.userTypes[0]); |
| | | } |
| | | }, |
| | | } |
| | | }; |
| | | </script> |