element-ui 踩坑 table 表格动态添加筛选属性filters报错

最近在开发过程中，表格的数据列是不固定的，动态展示，一些排序，筛选也是部分表头才有；

所以只能动态渲染表头，以及相关的属性了。如下图

<el-table-column v-for="(head,index) in tableHeader" 
              :key="index" 
              :label="head.label" 
              :prop="head.key"
              :sortable="head.key == 'total_cost'"
              :filters="head.search ? objArr(head.search_data) : null"
              :filter-method="head.search ? filterTag : null"
            >
            <template slot-scope="scope">
                <span v-if="head.key.includes('cost')">{{head.currency+showMoney(scope.row[head.key])}}</span>
                <span v-else>{{scope.row[head.key]}}</span>
            </template>
          </el-table-column>

如果没有filters筛选值的列，属性给值是 flase 或者 ”“，undefined都有问题，值类型不对；和官方API有出入：[Vue warn]: Invalid prop: type check failed for prop "filters". Expected Array, got Boolean with value false.

 

 源码类型定义：

 这里就需要，把不需要筛选的值的列，属性改为 null; 亲测用

具体实例请看我的另一篇文章：https://blog.csdn.net/yufengaotian/article/details/121538032