Vue 利用后端的数据字典和Map对象实现表格列字段动态转义的处理方案
Vue中，使用el-table组件，经常遇到列字段转义的问题。常规处理方法有以下两种：
方法1：在模板中使用v-if，直接转义。如：
N
Y
方法2：使用formatter，进行转义处理，如：
在模板中指明使用格式转换器：
在Javascript中，实现指定的格式转换器：
data() {
return {
// 证件类型列表
idTypeList: [
{idType:1,idTypeName:“身份证”},
{idType:2,idTypeName:“社保卡”},
{idType:3,idTypeName:“驾驶证”},
{idType:4,idTypeName:“护照”},
{idType:5,idTypeName:“临时身份证”},
{idType:6,idTypeName:“工作证”}
],
//其它属性
//...
}
},
methods: {
// 证件类型字段翻译
idFormatter(row, column) {
var value = “”;
for (var i = 0; i < this.idTypeList.length; i++){
var item = idTypeList[i];
if (row.idType == item.idType) {
value = item.idTypeName;
break;
}
}
return value;
},
}
这两种处理方法都有效，但感觉不是很好。
方法1的问题，是需要枚举各种可能性，如果枚举项很多，代码固化，书写是个体力活，且代码很不简洁。另外，灵活性不高，如果后端对该字段增加枚举项，前端也需要修改。
方法2的问题，如果需要字段转义的列较多时，需要定义较多的格式转换器方法。
因此，推荐使用下面的方案。
2、动态字段转义处理方案
2.1、后端使用系统参数表并提供查询接口
首先，后端对字段的枚举类型，均使用系统参数表来存储，这样，前后端统一使用同一份数据字典。参见之前的文章：《使用系统参数表，提升系统的灵活性 》。
然后，后端提供相应的接口，供前端获取指定类别的参数项（枚举项）列表。接口定义如下：
Path： /sysParam/getParameterClass
Method： POST
接口描述：
请求参数：
Headers
参数名称 参数值 是否必须 示例 备注
Content-Type application/json 是
Authorization token 是 token值
Body
名称 类型 是否必须 默认值 备注 其他信息
classKey string 必须 参数类别key
返回数据：
名称 类型 是否必须 默认值 备注 其他信息
data object [] 非必须 返回数据
item 类型: object
├─ SysParameter类型 各字段，略
code integer 必须 返回码
message string 必须 提示信息
additional object 非必须 附加信息,Additional类型，略
2.2、前端获取系统参数的常规方法
页面中获取系统参数的常规处理方法，如下：
data() {
return {
// 证件类型列表
idTypeList: [],
//其它属性
//...
}
},
created() {
this.getIdTypeList();
},
methods: {
// 证件类型字段翻译
idFormatter(row, column) {
var value = “”;
for (var i = 0; i < this.idTypeList.length; i++){
var item = idTypeList[i];
if (row.idType == item.idType) {
value = item.idTypeName;
break;
}
}
return value;
},
// 获取证件类型列表数据
getIdTypeList() {
let _this = this;
this.instance.getParameterClass(this.$baseUrl,{"classKey":"id_type"}).then((response) => {
_this.idTypeList = response.data.data;
});
},
}
api/index.js中定义instance的接口：
//获取类别信息列表
getParameterClass (baseurl, data) {
var url = baseurl + ‘/sysParam/getParameterClass’;
return instance.post(url, data);
},
现在的问题，如果获取每个参数类型，都要用一个方法来实现，显得太繁琐，代码不优雅。另外，列字段转义还是使用了格式转换器，因为列表数据只能使用遍历。
2.3、前端开发公共方法来获取系统参数
现在的方案，字段转义的数据字典由后端定义，这样一来，前端各个页面将会大量调用获取系统参数的接口。因此有必要开发公共方法来获取系统参数。
参数类别的数据，页面需要两种类型的数据：
列表类型，用于选择框，如查询条件，此时往往需要在列表中增加一项类似“全部类型”的选项，表示忽略此条件。
字典类型，用于表格列字段转义。
在/src/common/commonFuncs.js中，实现获取系统参数的方法，代码如下：
/**
- 获取参数类别信息列表及字典
- @param {容器对象} parent
- @param {参数类别key} classKey
- @param {列表的属性名} listObjPropName
- @param {字典的属性名} mapObjPropName
- @param {字段数据类型} fieldDatatype
*/
getParameterClass(parent, classKey, listObjPropName, mapObjPropName, fieldDatatype=“int”){
parent.instance.getParameterClass(
parent.$baseUrl, {“classKey” : classKey}
).then(res => {
//console.log(res.data);
if (res.data.code == parent.global.SucessRequstCode){
//如果查询成功
//console.log(res.data.data);
if (listObjPropName != undefined && listObjPropName != “”){
//需要输出列表数据
for(var i = 0; i < res.data.data.length; i++){
var item = res.data.data[i];
//往后添加数据，不破坏列表原有数据
parent[listObjPropName].push(item);
}
}
if(mapObjPropName != undefined && mapObjPropName != “”){
//需要输出字典数据
//字典的key要匹配字段类型，由于itemKey为类型为字符串，而字段数据类型一般为整型(枚举值)
//可能需要进行类型转换
//遍历列表数据
for(var i = 0; i < res.data.data.length; i++){
var item = res.data.data[i];
var mapKey;
if (fieldDatatype == “int”){
//字符串转int
mapKey = parseInt(item.itemKey);
}else{
mapKey =item.itemKey;
}
//加入字典
parent[mapObjPropName].set(mapKey,item);
}
}
}else{
alert(res.data.message);
}
}).catch(error => {
alert(‘查询系统参数失败！’);
console.log(error);
});
}
2.4、Vue文件中获取系统参数的用法
样例Vue文件，模板代码如下：
用户管理 / 用户管理
{{userTypeMap.get(scope.row.userType).itemValue}}
这个代码相当简洁。
下面是javascript中与系统参数获取与设置相关的代码：
data() {
return {
formData : {
//查询信息
queryInfo:{
userType : 0,
deleteFlag: 0,
pagenum : 1,
pagesize : 10
},
//用户类型选择框当前选择项的显示值
userTypeLabel : "所有类型"
},
//用户类型参照表，构造初始数据项
userTypeList : [
{
itemKey : "0",
itemValue : "所有类型"
}
],
//用户类型字典
userTypeMap : new Map(),
//查询到的用户信息列表
userInfoList:[],
//新增编辑对话框可见标记
editVisible:false,
show:false
}
},
created() {
// ==========================================
// 获取需要的系统参数，注意：getParameterClass方法是异步加载数据的。
// 如需要打印观察，需要通过watch来处理
// 获取用户类型的参数类别
this.commonFuncs.getParameterClass(this,"user_type","userTypeList","userTypeMap");
},
watch: {
userTypeList : {
handler(newValue, oldValue){
//获取数据后，设置选择框的初始值;
this.KaTeX parse error: Expected 'EOF', got '}' at position 74: …mValue); }̲, immedia…baseUrl,this.formData.queryInfo
).then(res => {
console.log(res.data);
if (res.data.code == this.global.SucessRequstCode){
//如果查询成功
_this.formData.pageInfo.total = res.data.data.length;
_this.userInfoList = res.data.data;
}else{
alert(res.data.message);
}
}).catch(error => {
alert(‘查询失败！’);
console.log(error);
});
},
//用户类型选择
selectUserType(item){
console.log(item);
this.$set(this.formData.queryInfo,'userType',parseInt(item.itemKey));
this.$set(this.formData,'userTypeLabel',item.itemValue);
},
}
注意事项：
由于数据是动态获取的，但vue 无法监听动态新增的属性的变化，需要用 $set 来为这些属性赋值。否则选择框的选择选项后，当前值的显示不会改变。
//用户类型选择
selectUserType(item){
console.log(item);
this.$set(this.formData.queryInfo,'userType',parseInt(item.itemKey));
this.$set(this.formData,'userTypeLabel',item.itemValue);
},
为了使得选择框的选择能够生效，
的model设置必须包含选择框的当前选择项的显示值，即：
el-select的v-model即userTypeLabel必须在form的model中，也就是说formData必须包含userTypeLabel。
在data部分，定义了用户类型的列表和字典对象。其中用户类型列表用于选择框，字典用于表格数据列字段转义。其中，用户类型列表设置了初始项，表示全部类型。（也可以约定由后端的系统参数表来统一定义，这样前端无需设置初始项）。
//用户类型参照表，构造初始数据项
userTypeList : [
{
itemKey : "0",
itemValue : "所有类型"
}
],
//用户类型字典
userTypeMap : new Map(),
系统参数的获取方法，一般在页面加载时获取：
created() {
// ==========================================
// 获取需要的系统参数，注意：getParameterClass方法是异步加载数据的。
// 如需要打印观察，需要通过watch来处理
// 获取用户类型的参数类别
this.commonFuncs.getParameterClass(this,"user_type","userTypeList","userTypeMap");
},
调用公共方法getParameterClass，可以一次性获取某个参数类别的列表和字典数据，允许获取某一种类型数据，只需将另一个参数设为空字符串即可。
列表和字典的参数值，必须在data中声明的属性名，并且类型要匹配。
从代码量看，获取系统参数的调用是相当简洁的。
在系统参数获取成功后的处理，一般在watch中实现。
watch: {
userTypeList : {
handler(newValue, oldValue){
//获取数据后，设置选择框的初始值;
this.$set(this.formData,‘userTypeLabel’,this.userTypeList[0].itemValue);
},
immediate: true
},
},
监视到userTypeList数据加载完毕后，设置用户类型选择框的初始选择项。
USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com