vue表格中常见状态的判断方法

方法1：
<el-table :data="list" style="width: 100%">
    <el-table-column prop="sn" label="订单号"></el-table-column>
    <el-table-column prop="amount" label="数量"></el-table-column>
    <el-table-column label="状态">
        <template slot-scope="scope">
            <span>{{formatStatus(scope.row.status)}}</span>
        </template>
    </el-table-column>
</el-table>

// 状态过滤
formatStatus(val) {
    return val==1 ? '未结算' : val == 2 ? '已结算' : ''
},

方法2：

<el-table :data="list" style="width: 100%">
    <el-table-column prop="sn" label="订单号"></el-table-column>
    <el-table-column prop="amount" label="数量"></el-table-column>
    <el-table-column
        label="状态">
        <template slot-scope="scope">
            <span>{{scope.row.status | formatStatus}}</span>
        </template>
    </el-table-column>
</el-table>

filters: {
    // 状态过滤 
    formatStatus(val) { 
      console.log('this',this)  // undefind
      return val==1 ? '未结算' : val == 2 ? '已结算' : '' 
    },
}

注：filters中没有this，故不能修改或使用data中的值