目录el-table-column的fORMatter的使用el-table的formatter属性用法formatter是什么？详细使用el-table-column的format
当后端返回来的数据格式需要再去处理；可以使用formatter属性
<el-table-column label="性别" align="center" :formatter="gendarFomat"></el-table-column>eg：
gendarFomat(row, column) {
if (row.gender == 0) {
return "女";
} else if (row.gender == 1) {
return "男";
} else {
return "-";
}
},element-ui官网说明
formatter是el-table-column的一个属性，用来格式化内容。（比如后台给你返0或1，你需要展示成“否”和“是”）
1.知道formatter之前：
代码如下（示例）：
<el-table :data="tabledata">
<el-table-column label="类型" prop="type">
<template slot-scope="scope">
<span>
<span v-if="scope.row.type === '1'">菜单</span>
<span v-else-if="scope.row.type === '2'">按钮</span>
<span v-else>其他</span>
</span>
</template>
</el-table-column>
</el-table>2.知道formatter之后，以上代码就可以改写为：
html中：
<el-table :data="tabledata">
<el-table-column label="类型" :formatter="typeFormatter" prop="type"></el-table-column>
</el-table>methods中：
//规范化类型 默认有四个参数（row, column, cellValue, index）详情可以查看elmentUI官网
typeFormatter(row){
switch(row.type){
case '1':
return '菜单'
case '2':
return '按钮'
default:
return '其他'
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
--结束END--
本文标题: 关于el-table-column的formatter的使用及说明
本文链接: https://lsjlt.com/news/168906.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0