博客

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: '简答'
  }
]