字典项选择
<p>字典项选择
<img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/d975c575025af9c20956346d9d402046" alt="" /></p>
<pre><code class="language-javascript"><template>
<div class="SelectDataCode">
<div v-if="readOnly">
{{labelName}}
</div>
<el-select v-model="value" v-bind="$attrs" v-on="$listeners" v-else>
<el-option v-for="item in options" :key="item[defaultProps.value]" :label="item[defaultProps.label]" :value="item[defaultProps.value]">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: 'SelectDataCode',
data() {
return {
value: '',
}
},
props: {
readOnly: { //用于只读显示
type: Boolean,
default: false,
},
dataCode: {
type: String,
required: true,
},
dataCodeValue: {
type: String,
required: true,
},
defaultProps: {
type: Object,
default: () => {
return {
label: 'name',
value: 'code'
}
}
}
},
computed: {
options() {
if (this.$store.getters['dataCode/dataCodes'][this.dataCode]) {
return this.$store.getters['dataCode/dataCodes'][this.dataCode]
} else {
this.$message.error(`没有${this.dataCode}相关的字典数据,请先检查!`);
return []
}
},
labelName() {
if (this.readOnly && this.value && this.options) {
if (this.$attrs.hasOwnProperty('multiple')) { //多选
let arr = this.value.split(',');
return arr.map(item => {
return this.findOne(item)
}).join(';');
} else {
return this.findOne(this.value)
}
} else {
return ''
}
}
},
methods: {
findOne(value) {
return this.options.find(item => { return item[this.defaultProps.value] === value })[this.defaultProps.label];
}
},
watch: {
value: {
handler: function(oldval, newval) {
this.$emit('update:dataCodeValue', this.value)
}
}
},
mounted() {
this.value = this.dataCodeValue;
}
}
</script>
<style lang="scss" scoped>
</style>
<el-table-column show-overflow-tooltip prop="sex" label="性别">
<template #default="{ row }">
<select-data-code :dataCodeValue.sync="row.sex" dataCode="sex"></select-data-code>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="userType" label="用户类别">
<template #default="{ row }">
<select-data-code :dataCodeValue.sync="row.userType" dataCode="userType"></select-data-code>
</template>
</el-table-column></code></pre>