概念
枚举数据: 后端返回的是编号,而页面需要的是文本,这是我们就要用枚举来优化代码,而不是把文本的内容给固定写死
import xxx from 'xxx' 得到的数据不能直接在template中使用,需要通过data(){} 或者 computed中转一下才能直接在模板中渲染
常规使用
1.引入枚举文件
import A from '@/枚举文件'
data() {
return {
type: A.type,
// 省略其它...
}
}
2.渲染数据
<el-form-item label="形式" prop="formOf">
<el-select v-model="form.formOf" style="width:50%" placeholder="请选择">
<el-option
v-for="item in type"
:key="item.id"
:label="item.value"
:value="item.id"
/>
</el-select>
</el-form-item>
注意 这里设置的value值是 id
返回值为 null
但,若因其他原因,后端可能会给我们返回一个null
这时,我们需要对这个返回值null做处理。
原代码
<template>
<div>
<template v-for="(item, index) in options">
<template v-if="values.includes(item.value)">
<span
v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
:key="item.value"
:index="index"
:class="item.raw.cssClass"
>{{ item.label }}</span
>
<el-tag
v-else
:disable-transitions="true"
:key="item.value"
:index="index"
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
:class="item.raw.cssClass"
>
{{ item.label }}
</el-tag>
</template>
</template>
</div>
</template>
<script>
import Template from "@/views/billing/template";
export default {
name: "DictTag",
components: {Template},
props: {
options: {
type: Array,
default: null,
},
value: [Number, String, Array],
},
computed: {
values() {
if (this.value !== null && typeof this.value !== 'undefined') {
return Array.isArray(this.value) ? this.value : [String(this.value)];
} else {
return [];
}
},
},
};
</script>
其实只需要在
在v-for的同级加一行代码即可
<template v-if="values.length <= 0">
—
</template>
但也要注意顺序
总代码
<template>
<div>
<template v-if="values.length <= 0">
—
</template>
<template v-for="(item, index) in options">
<template v-if="values.includes(item.value)">
<span
v-if="item.raw.listClass == 'default' || item.raw.listClass == ''"
:key="item.value"
:index="index"
:class="item.raw.cssClass"
>{{ item.label }}</span
>
<el-tag
v-else
:disable-transitions="true"
:key="item.value"
:index="index"
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
:class="item.raw.cssClass"
>
{{ item.label }}
</el-tag>
</template>
</template>
</div>
</template>
<script>
import Template from "@/views/billing/template";
export default {
name: "DictTag",
components: {Template},
props: {
options: {
type: Array,
default: null,
},
value: [Number, String, Array],
},
computed: {
values() {
if (this.value !== null && typeof this.value !== 'undefined') {
return Array.isArray(this.value) ? this.value : [String(this.value)];
} else {
return [];
}
},
},
};
</script>
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>