vxetable 表头字段在查询后变换

最新推荐文章于 2023-10-11 19:00:00 发布

菜鸟Gaga

最新推荐文章于 2023-10-11 19:00:00 发布

阅读量653

点赞数

分类专栏： vxetable 表头变换 vue 文章标签： vue.js react.js 前端框架

本文链接：https://blog.csdn.net/weixin_42090539/article/details/127084518

版权

vue 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

vxetable

5 篇文章 0 订阅

订阅专栏

表头变换

1 篇文章 0 订阅

订阅专栏

根据不同的查询条件变换表头，且要求点击查询按钮后表头才进行变换。

例如：时间粒度引发的表头变换和省份查询引发的表头变换。

时间粒度在15分钟、1小时、天之间切换：

查询 15分钟的时间格式为YYYY-MM-DD HH:mm
查询1小时的时间格式为YYYY-MM-DD HH:00
查询天的时间格式为YYYY-MM-DD

代码实现：

//html容器用v-if根据各自状态决定显示与否 
<vxe-column
          v-if="formatMC"
          field="min"
          title="时间"
          min-width="50"
          :formatter="formatMinString"
        ></vxe-column>
        <vxe-column
          v-if="!formatHC"
          field="hour"
          title="时间"
          min-width="50"
          :formatter="formatHourString"
        ></vxe-column>
        <vxe-column
          v-if="!formatDC"
          field="day"
          title="时间"
          min-width="50"
          :formatter="formatDayString"
></vxe-column>

//初始化3个状态
formatMC: true,
formatHC: true,
formatDC: true,

queryData(){
    if (this.form.type == '15M') {
        this.formatMC = true
      } else {
        this.formatMC = false
      }
      if (this.form.type == 'H') {
        this.formatHC = false
      } else {
        this.formatHC = true
      }
      if (this.form.type == 'D') {
        this.formatDC = false
      } else {
        this.formatDC = true
      }
param={}
queryDataApi(param).then(res=>{})
}

查询全国和查询省份，

查询全国则只显示省份不显示地市、区县

查询省份则只显示地市不显示区县

 <vxe-column field="province" title="省份"></vxe-column>  
 <vxe-column
          v-if="visibleCity"
          field="city"
          title="地市"
        ></vxe-column>
        <vxe-column
          v-if="visibleCounty"
          field="county"
          title="区县"
></vxe-column>

visibleCity: false,
visibleCounty: false,

queryData(){
  if (this.form.province == '全国') {
        this.visibleCity = false
        this.visibleCounty = false
      } else {
        this.visibleCity = true
        if (this.form.city) {
          this.visibleCounty = true
        } else {
          this.visibleCounty = false
        }
      }
param = {}
queryDataApi(param).then(res=>{})
}