Vue(ElementUI)监听表格el-table-column格式化数据两种方式

Vue监听表格el-table-column格式化数据两种方式

在vue中，我们在使用表格展示数据列表的时候，常常需要监听某个单元格的数据，如：状态值或者时间的数据，这时候，我们可以使用自定义模板或者使用**:formatter**来监听数据格式化数据。

自定义样式模板

<el-table-column prop="auditStatus" label="审核状态">
        <template slot-scope="scope">  
        	<el-tag type="success" v-if="scope.row.available">审核通过</el-tag>
        	<el-tag type="danger" v-if="!scope.row.available">审核不通过</el-tag>          
        </template>
</el-table-column>

自定义样式模板中的scope表示整个表格的数据对象，其中scope.row表示那行数据对象，其中自定义模板内scope.row可以作为哦函数参数

优点：使用scope可以更加灵活的指定vue的样式，可以结合v-if和v-for一起使用

缺点：数据量大的时候，不太好复用，即使类似或者相同的格式化数据处理，也需要单独写一个模板

:formatter

<el-table-column prop="registerCapital" label="注册资本" :formatter="capitalFormatter" sortable/>

<el-table-column prop="auditTime" label="入统时间" :formatter="createTimeFilter" sortable/>

:formatter内的相当于函数，在vue的methods内声明

createTimeFilter: function (row, column, cellValue) {
  if (cellValue != null) {
    return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
  }
},
    
capitalFormatter(row, column, cellValue) {
  let result = Math.floor(cellValue / 1e6)
  return result > 0 ? result + "万元" : "<1万元";
},

:formatter于列参数，表示对于当前列的数据进行格式化操作，方法一共有四个参数：row, column, cellValue, index

row： 很容易知道，则是这一行的所有数据

column： 则是关于这个列的数据

cellValue： 则是这个单元格里的值

index： 则是这个数据的下标值

可以使用return返回想要的数据显示在单元格中

优点： 面对类型差不多的数据处理可以使用一个方法来格式化

缺点：没有scope灵活