修改公司页面,下拉框在前台如何定义【归属集团字段】
需求
这个功能,在前面有点涉及,因为归属集团字段只有两个值,0(否),1(是)
需求分析
因此这个功能可以参考 system/dict/data.vue
中的回显样式
是如何展示的
// 数据标签回显样式
listClassOptions: [
{
value: "default",
label: "默认"
},
{
value: "primary",
label: "主要"
},
{
value: "success",
label: "成功"
},
{
value: "info",
label: "信息"
},
{
value: "warning",
label: "警告"
},
{
value: "danger",
label: "危险"
}
],
label:前端展示的值
value:最终赋给form.listClass的值(该值保存在数据库)
如何实现
仿照该样式,改造前端页面(company/index.vue)
修改后如下:
js代码如下:
<el-form-item label="归属集团" prop="isOur">
<el-select v-model="form.isOur">
<el-option
v-for="item in isOurOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
item.value和item.label,千万不要写成item.dictValue和item.dictLabel
select
标签和radio
标签是不同的
isOurOptions定义如下:
// 归属集团字典
isOurOptions: [
{
value: 1,
label: "是",
},
{
value: 0,
label: "否",
}
],
value是数据库返回的值,我返回的是int类型数据,如果是String类型,则要写成
"1"
测试部署
略