需求:将后台传过来是 job_role 字段(英文),通过 vue的 filters过滤器 转换成需要展示的对应中文数据
传过来的数据如下:
转换对应内容如下:
没转换前页面展示如下:
解决办法:使用 filters过滤器
花括号插值:{{ 要使用的值 | 过滤器名称 }},还可以使用在 v-bind表达式 中
重点:过滤器函数内必须有个返回值
<el-table-column label="职位"> <template slot-scope="scope">{{scope.row.job_role | jobRole}}</template> </el-table-column> export default { name: "AdminList", // 过滤器 filters: { jobRole(val) { let jobRoleTxt = '' if (val === 'super_admin') { jobRoleTxt = '超级管理' } if (val === 'dept_leader') { jobRoleTxt = '主管' } if (val === 'group_leader') { jobRoleTxt = '组长' } if (val === 'employee') { jobRoleTxt = '操作员' } return jobRoleTxt } } }