vxe循环日期列表开始到结束

最新推荐文章于 2024-04-10 10:21:21 发布

weixin_51357103

最新推荐文章于 2024-04-10 10:21:21 发布

阅读量193

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_51357103/article/details/119843934

版权

本文介绍了一个使用Vxe-Table组件在前端展示数据的实例，通过获取后端返回的`qingqiu`数据，特别是`kgrq`（开始年份）和`allYear`（全年个数），并进行循环处理生成年份数组`jpYearTable`，展示了如何动态构建表格内容。在表格中，数据编辑配置为点击触发单元格编辑，模式为单元格模式，并设置了相应的样式和对齐方式。

摘要由CSDN通过智能技术生成

vxe循环日期列表

1.布局
vxe-table
border
show-footer
class=“mytable-scrollbar”
show-overflow
align=“right”
keep-source
header-align=“center”
ref=“gjjTable”
height=“250px”
:data=“sdsgj”
:edit-config="{
trigger: ‘click’,
mode: ‘cell’,
icon: ‘fa fa-pencil’,
showStatus: false,
}"
>

</vxe-table
2.定义一个data数据
kgrq:’’,//开始的年
allYear:’’,//全年个数
jpYearTable:[],//循环数组的年
3.接收后端数据
qingqiu() {
sunyiget(this.gcid)
.then((res) => {
console.log(res);
this.getValue = res.data;
this.btsr = res.data.btsr;
this.cpjg = res.data.cpjg;
this.flb = res.data.flb;
this.sdsgj = res.data.sdsgj;
this.jbcs = res.data.jbcs;
this.qsb = res.data.qsb;
this.allYear=res.data.jpYearTable.allYear;
this.kgrq = res.data.jpYearTable.kgrq;

      for(var i=0;i<this.allYear;i++){//循环开始的年
        this.jpYearTable[i] = this.kgrq + i; 
      }
      console.info(this.jpYearTable);

    })
    .catch((err) => {
      console.log("失败");
    });
},