关于vue表格格式化显示的方法
应用场景
当用户需要将表格某一列数据格式化后展示,又不想改变原数据时。如0表示男、1表示女。因为原数据是0和1,为了更直观的展示给用户,在表格显示时,0显示为男,1显示为女。
本文以ElementUI框架为例:
方法一
当引用框架有格式化属性时,直接使用该属性来格式化内容
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="sex" label="性别(未格式化)" width="180" />
<el-table-column prop="sex" label="性别(格式化后)" width="180" :formatter="formatterSex" />
<el-table-column prop="address" label="地址" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "张三",
sex: 0,
address: "上海市普陀区XX路 1518 弄",
},
{
name: "小丽",
sex: 1,
address: "上海市普陀区XX路 1519 弄",
},
{
name: "小红",
sex: 1,
address: "上海市普陀区XXX路 1520 弄",
},
{
name: "李四",
sex: 0,
address: "上海市普陀区XXX路 1521 弄",
}
]
}
},
methods: {
// 表格格式化Function(row, column, cellValue, index)
formatterSex(row) {
if (row.sex === 0) {
return '男'
}
if (row.sex === 1) {
return '女'
}
return row.sex
}
}
}
</script>
效果展示:
方法二
当框架没有格式化属性时,可以在列标签内加一个包装元素template ,自己做格式化:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="sex" label="性别(未格式化)" width="180" />
<el-table-column prop="sex" label="性别(格式化后)" width="180">
<template slot-scope="scope">{{ formatterSex(scope.row) }}</template>
</el-table-column>
<el-table-column prop="address" label="地址" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: "张三",
sex: 0,
address: "上海市普陀区XX路 1518 弄",
},
{
name: "小丽",
sex: 1,
address: "上海市普陀区XX路 1519 弄",
},
{
name: "小红",
sex: 1,
address: "上海市普陀区XXX路 1520 弄",
},
{
name: "李四",
sex: 0,
address: "上海市普陀区XXX路 1521 弄",
}
]
}
},
methods: {
// 表格格式化Function(row, column, cellValue, index)
formatterSex(row) {
if (row.sex === 0) {
return '男'
}
if (row.sex === 1) {
return '女'
}
return row.sex
}
}
}
</script>
效果展示:
该方法算是万能的,不管有没有格式化属性,都可以使用这个方法格式化内容。