elementui 动态表头

最近，在用elementui做一个动态表头的功能，把自己开发的流程大概分享一下。

首先，我们得了解这个option的作用：

这个:option属性就是绑定我们列表表格的模板。通过引入我们写好的js文件来构成一个表格。

这个js文件我也贴一部分代码出来介绍一下

可以看出来，这个column就是我们的列数组。那么，做法上大体上就确定了，把动态的列对象加入到这个column数组即可。

那么，什么时候加入呢？当然是要在页面渲染之前加入啦，这个时候就要介绍一下vue的生命周期函数，也叫钩子函数。

先随便贴个图。。。这个是官方给的图

可以看到，是在create方法初始化data，计算数值，但是dom还没有构建，我们可以在这个时候把动态列对象加入到里边去，这样子，他到时候请求数据的时候会直接赋值。

下面我就放我一段获取自定义列的方法，写得很普通，大家看看就好。

//获取自定义字段
getCusList() {
  var that = this;
  that.tableOption = this.oldTableOption;
  if (that.tableOption.column.length == 9) {
    getMuList(0).then(response => {
      that.customerList = response.data.data;
      if (response.data.data) {
        for (const temp of response.data.data) {
          temp.value = temp.selectValue.split(",");
          that._data[temp.key] = '';
          that.customList.push(temp)
          var temp2 = {}
          if (temp.filedType == '0') {
            if (temp.isSearch == '0') {
              temp2 = {
                type: 'input',
                label: temp.filedName,
                prop: temp.key,
                search: true
              };
            } else {
              temp2 = {
                type: 'input',
                label: temp.filedName,
                prop: temp.key
              };
            }

          } else if (temp.filedType == '1') {
            var selectData = [];
            for (var i = 0; i < temp.value.length; i++) {
              selectData.push({
                label: temp.value[i],
                value: temp.value[i]
              })
            }
            if (temp.isSearch == '0') {
              temp2 = {
                type: 'select',
                label: temp.filedName,
                prop: temp.key,
                search: true,
                dicData: selectData
              };
            } else {
              temp2 = {
                type: 'select',
                label: temp.filedName,
                prop: temp.key,
                dicData: selectData
              };
            }

          } else if (temp.filedType == '2') {
            var selectData = [];
            for (var i = 0; i < temp.value.length; i++) {
              selectData.push({
                label: temp.value[i],
                value: temp.value[i]
              })
            }
            if (temp.isSearch == '0') {
              temp2 = {
                type: 'select',
                searchMultiple: true,
                label: temp.filedName,
                prop: temp.key,
                search: true,
                dicData: selectData
              };
            } else {
              temp2 = {
                type: 'select',
                searchMultiple: true,
                label: temp.filedName,
                prop: temp.key,
                dicData: selectData
              };
            }

          } else if (temp.filedType == '3') {
            if (temp.isSearch == '0') {
              temp2 = {
                type: 'date',
                label: temp.filedName,
                prop: temp.key,
                search: true
              };
            } else {
              temp2 = {
                type: 'date',
                label: temp.filedName,
                prop: temp.key
              };
            }
          } else {
            if (temp.isSearch == '0') {
              temp2 = {
                type: 'datetimerange',
                label: temp.filedName,
                prop: temp.key,
                search: true,
                searchRange: true,
              };
            } else {
              temp2 = {
                type: 'datetimerange',
                label: temp.filedName,
                prop: temp.key,
                searchRange: true
              };
            }
          }
          console.log(temp2)
          tableOption.column.push(
            temp2
          )
        }
      }
    })
  }
}

总的来说，自定义列感觉用elementui来做并不是很难，但是还有一个问题，就是自定义列的搜索功能。这个功能至今我还没有一个比较好的解决方法。。。如果有大神看到的话，可以指导一下吗？