昨天还在写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动态表头有好的实现方法，欢迎大佬们的指点，前端二把刀非常感谢。
 
                    昨天还在写jsp，今天的项目功能要用avue-crud框架实现动态的展示column，包括column中的label与prop,prop还好说，框架的常规操作，但是这个label的动态改变真是头大的要命，翻边网上的资料，从官网到手册，从百度到必应，无一例外都是介绍crud参数的内容，最终还是边摸索边思考实现了，下面把探索过程全面奉上。1.其实我这里做的是个统计功能，label列就2列，比较简单，复杂表头的实现网上有很多，可以去借鉴，这里直说label的动态展示。2.废话不多说，直接先上js实现方法：
				
表头的餐数是动态设置的，主要用到了this.option.colum配置表头
this.option.column[2].children = childrenR;
this.option.column[3].children = childrenS;
问题：搜索后不回显
change方法设置搜索的默认值
   label: "所属机构",
   prop: "organizationId",
   type: "tree",
   search: false,
   hide: true
				
#### avue dynamic动态子表单启用插槽slot功能的正确方式
#### 关于avue dynamic动态子表单
> - 配置dynamic的children字段即可
> - 内部组件为crud组件，大部分属性参考Crud文档
> - 默认的type为curd，还可以配置成form
> - 内部组件为form组件，大部分属性参考Form文档
> - crud的行编辑功能为默认开启，可以设置cell为false关闭行编辑
### 官方示例
```html
<avue-crud ref="crud" :data="dataList" :option="option" :summary-method="getSummaries"
           :show-column.sync="showColumn" :table-loading="loading" :page.sync="page
				
在 Avue-Crud 中，设置表头高度可以通过设置表头的样式来实现。以下是一种设置表头高度的方法：
1. 找到你的 Avue-Crud 组件所在的文件，通常是一个.vue文件。
2. 在<template>标签中，找到表格的头部部分，通常是使用<el-table-column>标签来定义列的。在该标签中，添加一个属性名为 header-style 的属性，用来设置表头的样式。
3. 在 header-style 的属性值中，使用 CSS 的 height 属性来设置表头的高度。例如，你可以设置为 "height: 60px;" 来将表头的高度设置为60像素。
具体代码示例如下：
```html
<template>
  <avue-crud>
    <avue-table>
      <el-table>
        <el-table-column prop="name" label="姓名" :header-style="{ height: '60px' }"></el-table-column>
        <el-table-column prop="age" label="年龄" :header-style="{ height: '60px' }"></el-table-column>
        <!-- 其他表头列 -->
      </el-table>
    </avue-table>
  </avue-crud>
</template>
在上述代码中，我们在每个<el-table-column>标签的 header-style 属性中设置了表头的高度为60像素。
你可以根据实际需要调整表头的高度值。记得在使用CSS样式时，要注意选择器的权重，以确保样式生效。
希望能帮到你！如果还有其他问题，请继续提问。