Usage of private filters filters in vue2

In vue2, the data returned by the background is displayed in el-table, two of which are numbers, and a filter needs to be used to convert the numbers into text.

If you need to use the data defined in data for comparison, you need to pass the defined data into the filter method, and this cannot be used in the filter method.

 

<template>
  <div class="main">
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="数据生成配置" name="first">
        <el-button type="primary" size="mini" @click="open = true">
          <i class="el-icon-plus"></i>
          <span>新增</span>
        </el-button>
        <el-table
          :data="generateData"
          style="width: 100%"
          ref="tableRef"
          :scroll-x="scrollX"
          :scroll-y="scrollY"
          :max-height="maxHeight"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="80"
          />
          <el-table-column
            prop="stationCode"
            label="站点名称"
            align="center"
            width="180"
          >
            <!-- 在插槽中使用过滤器 convertCodeToLabel 进行转换 -->
            <template slot-scope="scope">{
   
   {
              scope.row.stationCode | convertCodeToLabel(stationOptions)
            }}</template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="数据类型"
            align="center"
            width="180"
          >
            <template slot-scope="scope">{
   
   {
              scope.row.type | convertTypeToLable(dataList)
            }}</template>
          </el-table-column>
          <el-table-column prop="startTime" label="开始时间" align="center">
          </el-table-column>
       </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getGenData,
  getSubData,
  getConfData,
  insertGenDataConfig
} from "@/api/water/config/config.js";
import { getStation } from "@/api/data/report.js";

export default {
  filters: {
    // 定义局部过滤器 convertCodeToLabel, stationCode转换站点名称
    convertCodeToLabel(value, stationOptions) {
      const station = stationOptions.find(item => item.value === value);
      return station ? station.label : value;
    },

    // 转换数据类型type
    convertTypeToLable(value, dataList) {
      let result = "";
      dataList.forEach(item => {
        if (item.value === value) {
          result = item.label;
        }
      });
      return result;
    }
  },
  data() {
    // 校验时间,需要把时间对象转成时间戳再对比
    var checkTime = (rule, value, callback) => {
      if (
         new Date(value).getTime() < new Date(this.form1.startTime).getTime()
      ) {
        callback(new Error("结束时间应该大于等于开始时间"));
      } else {
        callback();
      }
    };
    return {
      activeName: "first",
      form1: {
        stationCode: "",
        type: "", // 数据类型
        startTime: "",
        endTime: "",
      },

      stationOptions: [], // 站点列表
      // 数据类型
      dataList: [
        {
          label: "分钟数据",
          value: "1"
        },
        {
          label: "小时数据",
          value: "2"
        },
        {
          label: "日数据",
          value: "3"
        }
        {
          label: "周数据",
          value: "4"
        },
        {
          label: "月数据",
          value: "5"
        }
      ],
    }
  },
methods: {
//获取生成列表
    getGenDatas() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      getGenData(query).then(res => {
        this.generateData = res.rows;
        this.totalNum = res.total;
        // console.log(this.generateData, "--this.generateData--");
      });
    },
created() {
    let that = this;
   
    //获取站点
    getStation().then(response => {
      response.data.forEach(d => {
        that.stationOptions.push({
          value: d.stationCode,
          label: d.stationName
        });
      });
    });

    //获取生成列表
    this.getGenDatas();
  }
}
</script>