formatter是什么？

ElementUI表格Formatter用法

最新推荐文章于 2025-06-09 10:38:57 发布

C-fan

最新推荐文章于 2025-06-09 10:38:57 发布

阅读量5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： elementui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/fan023211/article/details/125611223

elementui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍ElementUI中el-table-column的formatter属性使用方法，通过示例代码详细展示了如何将后台返回的数值转换为易于理解的文字描述，如将数字1、2、3分别转换为“单选”、“多选”和“简答”。

1，formatter是什么？

简单点：就是首先拿到这个单元格的值，通过函数return返回一个新值再来给这个单元格

2，formatter是elmentUI中的el-table-column的一个属性，用来格式化内容。（比如后台给你返1或2或者3，你需要展示成“单选”和“多选” “简答”）

函数写法：formatter (row, column, cellValue, index) {

“给判断或者筛选数组的然后 retrurn返回”

}

默认有四个参数（row, column, cellValue, index）

value 和 cellValue一样：表示当前单元格中的值，或者说是内容
row：表示当前行

column：表示当前列
index：表示当前行的下标
可以使用return返回想要的数据显示在单元格中

代码如下（示例）：

 <el-table :data="tableData" >
       <el-table-column
         prop="questionType"    // 它是传入的是 显示 1 或者 2 或者 3
         label="题型"  
         align="center" 
         :formatter="formatter"  //element中的格式化内容，可以在函数中使用return返回想要的数据显示在单元格中
         min-width="40">
       </el-table-column>
//...此处省略

import { questionType } from '@/constants.js'  //把下面黑框的代码， 默认导入
methods: {
    // 格式化数据(题型) 
    formatter (row, column, cellValue, index) {
      // console.log(cellValue)  它是显示1 或者 2 或者 3
      // 对象.find() 表示筛选条件找到了满足要求的，就立马返回，后面不管了有没有满足添加条件，就不筛选判断了
      const res = questionType.find(item => item.value === +cellValue)
      return res ? res.label : '未知'
    }
// ...此处省略
}

// 题型   这个文件constants.js  放了下面的代码  默认导出

export const questionType = [
  {
    value: 1,
    label: '单选'
  },
  {
    value: 2,
    label: '多选'
  },
  {
    value: 3,
    label: '简答'
  }
]