avue-crud下实现动态表头

  • Post author:
  • Post category:vue


昨天还在写jsp,今天的项目功能要用avue-crud框架实现动态的展示column,包括column中的label与prop,prop还好说,框架的常规操作,但是这个label的动态改变真是头大的要命,翻遍网上的资料,从官网到手册,从百度到必应,无一例外都是介绍crud参数的内容,最终还是边摸索边思考实现了,下面把探索过程全面奉上。


1.其实我这里做的是个统计功能,label列就2列,比较简单,复杂表头的实现网上有很多,可以去借鉴,这里直说label的动态展示。


2.废话不多说,直接先上js实现方法:

handleQuery(form, done) {
            const page = this.page;
            const params = {};
            this.loading = true;
            getHeader(Object.assign(params, form)).then(res => {
              this.option.column = [];
              const result = crypto.decryptAES(res.data, crypto.aesKey);
              const data = JSON.parse(result).data.cols;
              // 得到后台拼接的信息
              let objs =  eval("("+data+")");
              this.option.column.push(objs);
              this.option.column.push({label: "人数", prop: "value", align: 'left'});
            });
            getList(page.currentPage, page.pageSize, Object.assign(params, form)).then(res => {
              const result = crypto.decryptAES(res.data, crypto.aesKey);
              const data = JSON.parse(result).data.records;
              this.page.total = JSON.parse(result).data.total;
              this.data = data;
              this.loading = false;
              this.selectionClear();
              done();
            });
          },


3.方法代码分析:

handleQuery这个方法是avue-form中的自带的属性,这里我的页面结构是avue-form下面接一个avue-crud,其实本来是接个饼图,统计项太多不好实现,所以就加个crud。



动态表头,首先需要从后台获取表头,也就是column中的label,然后拼接到前端的column中。

后台方法如下:

传统的的页面上option中的column写法是这样:

column: [
          {label: "动态表头", prop: "测试"}
          
        ],

在后台返回一串类似于页面的写法的返回值。

然后重点来了,拿到返回值后,


使用前端框架的eval()函数处理一下


。eval函数释义:


eval()



eval()



的参数是一个

字符串

。如果字符串表示的是表达式,



eval()



会对

表达式

进行求值。如果参数表示一个或多个 JavaScript 语句,那么



eval()



就会执行这些语句。



使用this.option.column.push方法,将返回值或自定义的column列拼装到我们的目标option中。

到这里,label的动态拼装已经完成,页面上点击查询执行handleQuery方法此时已经可以看到列名的动态变化。后面只需跟上常规crud获取内容的方法:

这里我写的getlist方法和onLoad方法中一致 ,毕竟上面只是多一个获取列名字段的方法。

当我做到这里,我认为动态展示列名,内容的方法已经被我攻克后,自信满满的去调试,结果很意外,的确每次都可以展示我想要的列名,但是每次push进去的column列会一直堆积在option,造成了页面上列名堆列名,内容展示混乱,大概是下面的效果:

这让我很苦恼, 虽然我直接就看出来这是this.option.column.push所导致的,我应该每次push之前都清空下column,再push新的内容,就像Java中循环list时若想每次只拿到想要的结果,就要new一个对象来当盘子,那么在这avue中,什么方式能实现呢,离谱的是this.option.column有push,但是没发现有关于delete或者remove的方法,也可能是我前端菜鸡不知道,反正因为研究删除函数浪费了很久,最后我抱着试试看的想法,既然column是定义在option中的一个数组,那么直接每次获取表头前,我将this.option.column整个赋空,然后操作不就行了。

果然,加入this.option.column = [];后,我实现了每次查询都正取展示列名与内容的操作


4.总结一下流程就是


发送获取动态列名数据的请求,后端拼装成column列表的写法

前端给调用this.option.column.push之前,先给整个column赋空,然后push获取的值

发送获取prop内容的请求,像以往一样给prop赋值即可

总结后发现很简单,很普通,但是为此花费的时间真不少,而且百度和必应上面能搜到的关于此类的文章我真的没见过,可能这是个基础操作没什么好写的,工作中解决的问题记录一下,对我来说还是很重要的。

对于avue-crud动态表头有好的实现方法,欢迎大佬们的指点,前端二把刀非常感谢。



版权声明:本文为httpmc2018原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。