el-table将后端数据进行枚举映射、过滤

1.el-table数据枚举映射

后端发给前端的数据，经常为0、1、2等数字，而前端需要转换为枚举值

data(){
    return {
        myForm: {
            myTable: [],
            myMap: {
                txType: {
                    1: '类型1',
                    2: '类型2'
                }，
                txStatus: {
                    1: '未激活',
                    2: '激活',
                    3: '停用',
                    4: '注销'
                }
            }
        }
    }
}
methods: {
    query(){
        // 前端请求获得数据
        axios.......
        // 赋值
        this.myForm.myTable = res.data;
        // 再映射枚举
        for (let item of this.myForm.myTable){
         let itemKeys = Object.keys(item);
         itemKeys.forEach((key)=> {
             if(this.myForm.myMap.hasOwnProperty(key)){
                 item[key] = this.myForm.myMap[key][item[key]];
             }
         })
        }
    }
}

2.el-table多列数据过滤

el-table中要写 filters进行过滤（在computed中定义），过滤方法为filter-method（在methods中定义）, ref挂载清除的方法

<el-form :model="myForm">
              <el-table
                :data="myForm.myTable"
                ref="filterTable"
                border
                stripe
                lazy fit default-expand-all
              >
                <el-table-column
                  prop="txType"
                  label="类型"
                  :filters="txTypeFilters"
                  :filter-method="filterMethod"
                  filter-placement="bottom-end"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.txType" :type="txTypeTagChange(scope.row.txType)" disable-transitions>
                      {{ scope.row.txType}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="txStatus"
                  label="状态"
                  :filters="txStatusFilters"
                  :filter-method="filterMethod"
                  filter-placement="bottom-end"
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.txStatus" :type="txStatusTagChange(scope.row.txStatus)" disable-transitions>
                      {{ scope.row.txStatus}}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>

computed: {
    txTypeFilters(){
        return this.textFilters('txType'); // 在method的中定义的公共方法
    },
    txStatusFilters(){
        return this.textFilters('txStatus'); // 在method的中定义的公共方法
    }
}

methods: {
    textFilters(objStr) {
        const filters = [];
        for(const key in this.myForm.myMap[objStr]){
            filters.push({
                text: this.myForm.myMap[objStr][key],
                value: this.myForm.myMap[objStr][key]
            })
        }
        return filters
    },
    filterMethod(value, row, column){
        const property = column['property']
        return row[property] === value
    },
    // 清除所有过滤器
    clearApiFilter(){
        this.$refs.filterTable.clearFilter();
    }
}

11