elementUI中table表格内容,将数字转换为文字tag
在Element UI的Table组件中,可以使用formatter
属性来自定义列的内容。以下是一个将数字转换为对应标签(tag)的示例代码:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="score" label="分数" width="180"
:formatter="scoreToTag"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '张三',
score: 60
}, {
date: '2016-05-04',
name: '李四',
score: 92
}, {
date: '2016-05-01',
name: '王五',
score: 70
}, {
date: '2016-05-03',
name: '赵六',
score: 80
}]
};
},
methods: {
scoreToTag(row, column, cellValue, index) {
const scoreTags = {
: '差',
: '合格',
: '优秀'
};
return scoreTags[cellValue] || '未评估';
}
}
};
</script>
在这个例子中,我们定义了一个scoreToTag
方法,它将score
列的值转换为对应的标签。formatter
属性接收一个方法,该方法的参数与formatter
属性本身的参数相同,即当前行的数据row
、当前列的列描述column
、当前单元格的值cellValue
和单元格的索引index
。根据这个值,我们可以返回对应的标签。
评论已关闭