Uso de filtros de filtros privados en vue2.

En vue2, los datos devueltos por el fondo se muestran en el-table, dos de los cuales son números, y se debe usar un filtro para convertir los números en texto.

Si necesita utilizar los datos definidos en datos para comparar, debe pasar los datos definidos al método de filtro, y esto no se puede utilizar en el método de filtro.

 

<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>