需求!!!!(先看铺垫,问题为绿色字体)
新增表单时有字段需要下拉框选值,下拉框数据由后台单独给一个接口,接口返回数据为数组包含key:value形式的对象,数据例子如下
[ { num: "1", name: "战略管理风险", remark: "战略管理风险", value: "0" }, { num: "2", name: "集团管控风险", remark: "集团管控风险", value: "1" }, { num: "3", name: "健康安全环保风险", remark: "健康安全环保风险", value: "2" }, { num: "4", name: "资源保障风险", remark: "资源保障风险", value: "3" }, { num: "5", name: "社会责任风险", remark: "社会责任风险", value: "4" }, { num: "6", name: "价格风险", remark: "价格风险", value: "5" }, { num: "7", name: "资产管理风险", remark: "资产管理风险", value: "6" }, { num: "8", name: "工程项目管理风险", remark: "工程项目管理风险", value: "7" }, { num: "9", name: "投资风险", remark: "投资风险", value: "8" }, { num: "10", name: "组织结构风险", remark: "组织结构风险", value: "9" }, { num: "11", name: "公司设立及运作风险", remark: "公司设立及运作风险", value: "10" }, { num: "12", name: "政策风险", remark: "政策风险", value: "11" }, { num: "13", name: "市场需求风险", remark: "市场需求风险", value: "12" }, { num: "14", name: "公共关系风险", remark: "公共关系风险", value: "13" }, { num: "15", name: "地缘政治经济风险", remark: "地缘政治经济风险", value: "14" }, { num: "16", name: "业务结构风险", remark: "业务结构风险", value: "15" }, { num: "17", name: "竞争风险", remark: "竞争风险", value: "16" }, { num: "18", name: "物资采购及仓储风险", remark: "物资采购及仓储风险", value: "17" }, { num: "19", name: "生产管理风险", remark: "生产管理风险", value: "18" }, { num: "20", name: "质量风险", remark: "质量风险", value: "19" }, { num: "21", name: "信用风险", remark: "信用风险", value: "20" }, { num: "22", name: "汇利率风险", remark: "汇利率风险", value: "21" }, { num: "23", name: "资金流动性风险", remark: "资金流动性风险", value: "22" }, { num: "24", name: "招投标及合同管理风险", remark: "招投标及合同管理风险", value: "23" }, { num: "25", name: "法律风险", remark: "法律风险", value: "24" }, { num: "26", name: "知识产权风险", remark: "知识产权风险", value: "25" }, { num: "27", name: "人力资源风险", remark: "人力资源风险", value: "26" }, { num: "28", name: "信息风险", remark: "信息风险", value: "27" }, { num: "29", name: "内部改革风险", remark: "内部改革风险", value: "28" }, { num: "30", name: "技术与工艺风险", remark: "技术与工艺风险", value: "29" }, { num: "31", name: "劳动关系风险", remark: "劳动关系风险", value: "30" }, { num: "32", name: "舞弊及诚信风险", remark: "舞弊及诚信风险", value: "31" }, { num: "33", name: "资本结构风险", remark: "资本结构风险", value: "32" }, { num: "34", name: "财税风险", remark: "财税风险", value: "33" }, { num: "35", name: "财务报告风险", remark: "财务报告风险", value: "34" }, { num: "36", name: "计量风险", remark: "计量风险", value: "35" }, { num: "37", name: "内部审计风险", remark: "内部审计风险", value: "36" }, { num: "38", name: "内控与风险管理风险", remark: "内控与风险管理风险", value: "37" }, { num: "39", name: "预算管理风险", remark: "预算管理风险", value: "38" }, { num: "40", name: "信息沟通与披露风险", remark: "信息沟通与披露风险", value: "39" }, { num: "41", name: "核准及行政许可取得风险", remark: "核准及行政许可取得风险", value: "40" }, { num: "42", name: "文件及档案管理风险", remark: "文件及档案管理风险", value: "41" } ]
以上数据赋值给 type_options[],在新增数据时 字段新添加如下使用
<el-select v-model="form_489.risk_type" filterable clearable> <el-option v-for="opt in type_options" :label="opt.name" :value="opt.value"> </el-option> </el-select>
但是现在问题就来了!如果新增完成后,根据value展示在el-table中,该怎么实现?
期望效果!!!
在表格中对应文章开篇的字典表将文字展示出来,例如0对应的战略管理风险
实现方式
// 计算属性中写如下代码 computed:{ riskMap() { return this.type_options.reduce((acc, cur) => { acc[cur.value] = cur.name; return acc; }, {}); } }, /** 这里的 `riskMap()` 是一个计算属性,它返回一个对象,这个对象的属性名是 `value`,属性值是 `name`。这个对象的作用是将 `riskData` 数组中的每个对象的 `value` 和 `name` 进行对应,方便后面在表格中显示相应的文字。 具体而言,`reduce()` 函数是一个数组方法,它将一个数组中的每个元素归纳为一个单独的值。在这里,我们将 `riskData` 数组中的每个对象都归纳为一个对象,这个对象的属性名是 `value`,属性值是 `name`。这个对象最初的值是一个空对象 `{}`,每遍历一个 `riskData` 数组中的元素,就将其中的 `value` 和 `name` 属性分别作为属性名和属性值添加到这个对象中。最后,返回这个对象。 */
// 在el-table-column如下实现 <el-table-column prop="risk_type" label="风险类别" align="left" header-align="center"> <template #default="scope"> </span> {{ riskMap[scope.row.risk_type] }}</span> </template> </el-table-column> /** `{{ riskMap[scope.row.value] }}` 是在表格中显示相应的文字。在这里,`scope.row.value` 表示当前行中的 `value` 属性的值,也就是一个数字,通过 `riskMap` 对象,我们可以将这个数字转换为对应的文字。这个表达式的作用是从 `riskMap` 对象中获取当前行中的 `value` 对应的 `name`。 */