項目研發(fā)過程中遇到一個自動表頭篩選的邏輯，其主要是利用el-table的 render-header屬性進行實現(xiàn)的，話不多少，直接上代碼：
render-header(ps):
列標題 Label 區(qū)域渲染使用的 Function
Function(h, { column, $index })
第一步：在el-table-column的增加該屬性:render-header="renderHeader"
? ? ? <el-table-column?prop="sowStatus"?label="狀態(tài)"?align="center"?:render-header="renderHeader"?min-width="90">
??????????<template?slot-scope="scope">
????????????<div?v-if="scope.row.sowStatus?==?null">-</div>
????????????<div?v-else>
??????????????<span?v-if="scope.row.sowBackFlag">已退回</span>
??????????????<span?v-else>{{emnuList.get(scope.row.sowStatus)}}</span>
????????????</div>
??????????</template>
????????</el-table-column>
第二步：在methods里增加如下代碼
renderHeader(createElement,?{?column,?$index?})?{
??????let?proty?=?column.property
??????//?console.log('該列的綁定數(shù)據(jù)',?column)
??????//?console.log(proty)
??????return?createElement(
????????'div',
????????{
??????????style:?'display:flex;justify-content:?center;'
????????},
????????[
??????????createElement(TableHeader,?{
????????????style:?'cursor:?pointer;',
????????????props:?{
??????????????column:?column,
??????????????options:?proty,
??????????????tableQuery:?this.tableParams,
????????????}
??????????})
????????]
??????)
????}
第三步：新建 TableHeader.vue組件
<template>
??<div?class="table-header">
????<span?@click="clickIcon(column)">{{?column.label?}}<span?class="el-icon-sort"></span></span>
??</div>
</template>
<script>
export?default?{
??name:?'TableHeader',
??data()?{
????return?{}
??},
??props:?{
????type:?{
??????type:?String,
??????default:?''
????},
????defaultValue:?{
??????type:?String,
??????default:?''
????},
????options:?{
??????type:?[Array,?String],
??????default:?function()?{
????????return?[]
??????}
????},
????defaultProps:?{
??????type:?Object,
??????default:?function()?{
????????return?{
??????????label:?'label',
??????????value:?'value'
????????}
??????}
????},
????//傳遞過來的接口參數(shù)
????tableQuery:?{
??????type:?Object,
??????default:?function()?{
????????return?{}
??????}
????},
????cancelCb:?{
??????type:?Function
????},
????//?父組件傳遞過來的自定義表列名字
????column:?{
??????type:?Object,
??????default:?function()?{
????????return?{
??????????label:?'label',
??????????value:?'value'
????????}
??????}
????}
??},
??mounted()?{},
??methods:?{
????clickIcon(column)?{
??????//?在這里處理排序的邏輯
????}
??}
}
</script>
<style?scoped></style>
第四步：在script代碼段引入自定義的表頭組件
import?TableHeader?from?'./TableHeader'
