avue-crud下实现动态表头

mmm.c

已于 2022-05-15 16:32:17 修改

阅读量3.5k

点赞数 4

分类专栏：前端日常文章标签： vue.js 前端框架

于 2022-05-15 15:30:33 首次发布

本文链接：https://blog.csdn.net/httpmc2018/article/details/124782218

版权

前端日常专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细记录了解决Avue框架中如何动态展示CRUD表头label的问题，包括如何从后台获取并解析数据，使用eval和option.column.push实现列名的动态拼接，以及解决列名堆积问题的方法。

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

昨天还在写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 = [];后，我实现了每次查询都正取展示列名与内容的操作