标签：el 封装 sum value label dictValue dictLabel getLabel table
表格数据，后台返回的是数字，所以我们必须得把它转换成相对应的文字，而且要注意的是：我们传给后台的也是数字！！！
手写了个demo：
模拟一下，调用方法前的原图：
数字看着就很懵逼
代码：
// 不经过任何操作的el-table
<el-table :data="tableData" @selection-change="handleSelection" >
<el-table-column type="selection" min-width="100" align="center" />
<el-table-column prop="userName" label="姓名" width="180">
</el-table-column>
<el-table-column prop="type" label="类型" width="180">
</el-table-column>
<el-table-column prop="status" label="状态" width="180">
</el-table-column>
<el-table-column prop="custom" label="喜欢的歌星" width="180">
</el-table-column>
</el-table>修改后：
代码：
<template>
<div class="container">
<el-table :data="tableData" @selection-change="handleSelection" >
<el-table-column type="selection" min-width="100" align="center" />
<el-table-column prop="userName" label="姓名" width="180">
</el-table-column>
<el-table-column prop="type" label="类型" width="180">
<template slot-scope="scope">
{{getLabel(getType,scope.row.type,'dictValue','dictLabel') }}
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="180">
<template slot-scope="scope">
{{getLabel(getStatus,scope.row.status,'dictValue','dictLabel') }}
</template>
</el-table-column>
<el-table-column prop="custom" label="喜欢的歌星" width="180">
<template slot-scope="scope">
{{getLabel(getCustom,scope.row.custom,'value','label') }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
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)
}
}
}
</script>
<style scoped="scoped" lang="scss">
.container {
background-color: white;
width: 100%;
height: 100%;
padding: 20px;
overflow-y: auto;
}
</style>
上面是单组件方法的正常写法。
================================================================
下面的是全局写法：
开始封装一下方法：我把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回到最初的组件那里：
<template>
<div class="container">
<el-table :data="tableData" @selection-change="handleSelection" >
<el-table-column type="selection" min-width="100" align="center" />
<el-table-column prop="userName" label="姓名" width="180">
</el-table-column>
<el-table-column prop="type" label="类型" width="180">
<template slot-scope="scope">{{$getLabel(getType,scope.row.type,'dictValue','dictLabel') }}</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="180">
<template slot-scope="scope">{{$getLabel(getStatus,scope.row.status,'dictValue','dictLabel') }}</template>
</el-table-column>
<el-table-column prop="custom" label="喜欢的歌星" width="180">
<template slot-scope="scope">{{$getLabel(getCustom,scope.row.custom,'value','label') }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
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')
}
}
</script>
<style scoped="scoped" lang="scss">
.container {
background-color: white;
width: 100%;
height: 100%;
padding: 20px;
overflow-y: auto;
}
</style>
效果图：
说明我们挂载实例成功了，成功的把方法全局使用，也就是挂载在了实例之中
主要变动：
那我们全局都可以使用这个方法了，那就很方便了啊，我们的代码就能变得更加的整洁了，少了一大堆重复的代码。
今天又是充满希望的一天
标签：el,封装,sum,value,label,dictValue,dictLabel,getLabel,table 来源： https://blog.csdn.net/qq_41793354/article/details/121636702
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。