您所在的位置：网站首页 › 字段代码AB对应的是哪个中文字段 › el

el

2024-06-28 20:18| 来源: 网络整理| 查看: 265

表格数据，后台返回的是数字，所以我们必须得把它转换成相对应的文字，而且要注意的是：我们传给后台的也是数字！！！

手写了个demo：

模拟一下，调用方法前的原图：

数字看着就很懵逼

代码：

// 不经过任何操作的el-table

修改后：

代码：

{{getLabel(getType,scope.row.type,'dictValue','dictLabel') }} {{getLabel(getStatus,scope.row.status,'dictValue','dictLabel') }} {{getLabel(getCustom,scope.row.custom,'value','label') }} export default { data() { return { tableData: [ {type: '0',userName: '张三',status: '1',custom: '0'}, {type: '1',userName: '李四',status: '1',custom: '2'}, {type: '0',userName: '王五',status: '0',custom: '1'}, {type: '2',userName: '王六',status: '1',custom: '0'}, ], // 模拟数据字典数据，类型数据 getType: [ {dictValue: 0,dictLabel:'前端工程师'}, {dictValue: 1,dictLabel:'Java工程师'}, {dictValue: 2,dictLabel:'全栈工程师'} ], // 模拟数据字典数据，状态数据 getStatus: [ {dictValue: 0,dictLabel:'上班中'}, {dictValue: 1,dictLabel:'休假中'} ], // 模拟自定义接口数据，自定义 getCustom: [ {value: 0,label:'周杰伦'}, {value: 1,label:'李克勤'}, {value: 2,label:'邓紫棋'} ] } }, methods: { /** * 根据传入的值,返回对应的中文name，常用的地方是表格那里 * list: 传入的源数组 * id: 传入的值 * value: 源数组中为了匹配id值的字段名称 * label: 源数组中需要返回显示中文的字段名称 * 示例：arr:[{dictValue: 0,dictLabel:'前端工程师'},{dictValue: 1,dictLabel:'Java工程师'}] * 调用getLabel(arr, 1, "dictValue", "dictLabel")返回了 Java工程师 * */ getLabel(list, id, value, label) { if (id != '' && Array.isArray(list) && list.length != 0){ return !list.find(item => item[value] == id) ? id : list.find(item => item[value] == id)[label] } else { return id } }, // 获取勾选的行对象 handleSelection(selection) { console.log(selection) } } } .container { background-color: white; width: 100%; height: 100%; padding: 20px; overflow-y: auto; }

上面是单组件方法的正常写法。

================================================================

下面的是全局写法：

开始封装一下方法：我把js文件放在了src下面的utils目录中的common.js

导出全局其实很简单，原理就是在vue的实例上挂载方法

就是在方法前面加上export function,然后去到main.js文件中添加以下代码（我增加了一个sum方法是为了更好的让读者理解实例挂载），下面那里看不懂的可以先去看一下：添加实例 property — Vue.js

import { getLabel, sum } from '@/utils/common' Vue.prototype.$getLabel = getLabel Vue.prototype.$sum = sum

回到最初的组件那里：

{{$getLabel(getType,scope.row.type,'dictValue','dictLabel') }} {{$getLabel(getStatus,scope.row.status,'dictValue','dictLabel') }} {{$getLabel(getCustom,scope.row.custom,'value','label') }} export default { data() { return { tableData: [ {type: '0',userName: '张三',status: '1',custom: '0'}, {type: '1',userName: '李四',status: '1',custom: '2'}, {type: '0',userName: '王五',status: '0',custom: '1'}, {type: '2',userName: '王六',status: '1',custom: '0'}, ], // 模拟数据字典数据，类型数据 getType: [ {dictValue: 0,dictLabel:'前端工程师'}, {dictValue: 1,dictLabel:'Java工程师'}, {dictValue: 2,dictLabel:'全栈工程师'} ], // 模拟数据字典数据，状态数据 getStatus: [ {dictValue: 0,dictLabel:'上班中'}, {dictValue: 1,dictLabel:'休假中'} ], // 模拟自定义接口数据，自定义 getCustom: [ {value: 0,label:'周杰伦'}, {value: 1,label:'李克勤'}, {value: 2,label:'邓紫棋'} ] } }, methods: { // 本组件的sum是乘法 sum(a,b){ return a * b }, // 获取勾选的行对象 handleSelection(selection) { console.log(selection) } }, created() { console.log(this.$sum(5,10),'调用了公共方法sum') console.log(this.sum(5,10),'调用了本组件方法sum') } } .container { background-color: white; width: 100%; height: 100%; padding: 20px; overflow-y: auto; }

效果图：

说明我们挂载实例成功了，成功的把方法全局使用，也就是挂载在了实例之中

主要变动：

那我们全局都可以使用这个方法了，那就很方便了啊，我们的代码就能变得更加的整洁了，少了一大堆重复的代码。

今天又是充满希望的一天

【本文地址】

公司简介

联系我们