Web前端-el-table-column表格匹配字典数据
最近初步学习Vue开发web前端的table表格时,想通过字典中数据进行匹配展示,如下<el-table v-loading="loading" :data="processList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="cent
·
最近初步学习Vue开发web前端的table表格时,想通过字典中数据进行匹配展示,如下
<el-table v-loading="loading" :data="processList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<!--类型匹配转换-->
<el-table-column label="类型" align="center" prop="type">
<template slot-scope="scope">
{{getChangeType(scope.row.type)}}<!--调用getChangeType方法-->
</template>
</el-table-column>
</el-table>
数据字典如下:
data() {
return {
typeList: [{
dictValue: '1',
dictLabel: '小明'
}, {
dictValue: '2',
dictLabel: '小红'
}, {
dictValue: '3',
dictLabel: '小绿'
}],
}
},
下面就说自己解决的方法
data() {
return {
typeList: [{
dictValue: '1',
dictLabel: '小明'
}, {
dictValue: '2',
dictLabel: '小红'
}, {
dictValue: '3',
dictLabel: '小绿'
}],
}
},
methods: {
//1、使用插槽(推荐)
getChangeType(e) {
for (var i = 0; i < this.typeList.length; i++) {
if (this.typeList[i].dictValue == e) { //dictValue,dictLabel保持和上面定义一致
return this.typeList[i].dictLabel;
}
}
},
//2、使用:formatter
typeFormatter: function(row, column) {
return row.type == 1
? "小明"
: row.type == 2
? "小红"
: row.type == 3
? "小绿" : "无名?";
}
}
//也可以用switch
typeFormatter: function(row, column) {
switch (row.type) {
case "1":
return "小明";
break;
case "2":
return "小红";
break;
case "3":
return "小绿";
break;
}
}
更多推荐
已为社区贡献7条内容
所有评论(0)