elementUI 表格属性 匹配 数据字典数据

第一步

<el-table

:data="tableData"

style="width: 100%">

<el-table-column prop="date" label="日期" width="180">

</el-table-column>

<el-table-column prop="type" label="类型" width="180">

<template slot-scope="scope">

{{getChangeType(scope.row.type)}}

</template>

</el-table-column>

<el-table-column prop="address" label=""

:formatter="typeFormatter">

</el-table-column>

<el-table-column prop="address" label="地址">

</el-table-column>

</el-table>

第二步

data() {

return {

list: [{

value: '1',

label: '张三'

}, {

value: '2',

label: '李四'

}, {

value: '3',

label: '李二'

}],

}

},

methods: {

//1.使用插槽（个人推荐）

getChangeType(e) {

for (var i = 0; i < this.List.length; i++) {

if (this.List[i].value == e) {

return this.List[i].label;

}

}

},

//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;

}

}