vue elementUI表格 el-table-column

想要飞翔的pig

于 2021-08-29 15:23:22 发布

阅读量3.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： elementui

本文链接：https://blog.csdn.net/weixin_53587375/article/details/119980880

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何在使用Element-UI的表格组件时，通过`formatter`属性来实现后台字段与前端显示内容的映射转换。例如，当后台字段`testType`的值为'01'或'02'时，可以在表格中分别显示为'鉴定试验'和'型式试验'。通过`stateFormat`方法判断并返回对应的显示文本，实现了数据的定制化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element-ui的表格时，有时候后台给你的字段和你要显示在表格列里的内容不一致。

例如后台给的字段是testType，它的值为01或02，要求显示在表格里是‘鉴定试验’或‘型式试验’这时可以给el-table-column添加一个属性：formatter，代码如下：

<el-table ref="accountTable"
  :data="accountsListData"
  border>
 <el-table-column property="testType" label="检测性质" width="80" :formatter="stateFormat">
    </el-table-column>
</el-table>

js

methods:{
		  stateFormat(row, column) {
	    if (row.testType === "01") {
	      return '鉴定试验'
	    } else if (row.testType === "02"){
	      return '型式试验'
	    } else if (row.testType === "03"){
	      return '常规试验'
	    } else if (row.testType === "04"){
	      return '摸底试验'
	    } 
	  },
	}