前端最终规范


字典项选择

<p>字典项选择 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/d975c575025af9c20956346d9d402046" alt="" /></p> <pre><code class="language-javascript">&lt;template&gt; &lt;div class="SelectDataCode"&gt; &lt;div v-if="readOnly"&gt; {{labelName}} &lt;/div&gt; &lt;el-select v-model="value" v-bind="$attrs" v-on="$listeners" v-else&gt; &lt;el-option v-for="item in options" :key="item[defaultProps.value]" :label="item[defaultProps.label]" :value="item[defaultProps.value]"&gt; &lt;/el-option&gt; &lt;/el-select&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; 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: () =&gt; { 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 &amp;&amp; this.value &amp;&amp; this.options) { if (this.$attrs.hasOwnProperty('multiple')) { //多选 let arr = this.value.split(','); return arr.map(item =&gt; { return this.findOne(item) }).join(';'); } else { return this.findOne(this.value) } } else { return '' } } }, methods: { findOne(value) { return this.options.find(item =&gt; { 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; } } &lt;/script&gt; &lt;style lang="scss" scoped&gt; &lt;/style&gt; &lt;el-table-column show-overflow-tooltip prop="sex" label="性别"&gt; &lt;template #default="{ row }"&gt; &lt;select-data-code :dataCodeValue.sync="row.sex" dataCode="sex"&gt;&lt;/select-data-code&gt; &lt;/template&gt; &lt;/el-table-column&gt; &lt;el-table-column show-overflow-tooltip prop="userType" label="用户类别"&gt; &lt;template #default="{ row }"&gt; &lt;select-data-code :dataCodeValue.sync="row.userType" dataCode="userType"&gt;&lt;/select-data-code&gt; &lt;/template&gt; &lt;/el-table-column&gt;</code></pre>

页面列表

ITEM_HTML