elementUI:如何过滤table组件的中单元格的数据（formatter）

Posted 2021-09-04 NinoHuang

ElementUI: formatter

同学们因为在开发过程中会遇到后台返回的数据需要前端进行二次转译，比如：

// 数据源
[{sex: 1, name: "zhangsan"}, {sex: 0, name: "lisi"}]

而其中sex就是需要去翻译的情况，比如 1是男，0是女，具体的代码中我们就可以这样写:

// html
<el-table-column 
    prop="sex" label="性别" 
    :formatter="formatParam">
</el-table-column>

// methods中
formatParam(row, column, cellValue, index) {
    // row 是当前行的数据 {sex: 1, name: "zhangsan"}
    // colunm 当前表格单元的属性，常用的比如 label:性别， property:sex,
    // cellValue 当前的数据 1
    // index 当前所在第几条数据 0
    let result = cellValue == 1? "男": "女";
    return result;
}

这样的好处是不用去过滤数据源，直接对当前单元格的数据进行操作，方便了很多。