在vue2中,el-table里展示后台返回的数据,其中两项是数字,需要使用过滤器把数字转成文字.
如果需要使用data里定义好的数据进行比对,需要把定义好的数据传入过滤器方法里,并且在过滤器方法里不能使用this.
<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>