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一起使用

缺点：数据量大的时候，不太好复用，即使类似或者相同的格式化数据处理，