项目研发过程中遇到一个自动表头筛选的逻辑，其主要是利用el-table的 render-header属性进行实现的，话不多少，直接上代码：
render-header(ps):
列标题 Label 区域渲染使用的 Function
Function(h, { column, $index })
第一步：在el-table-column的增加该属性:render-header="renderHeader"
<el-table-column prop="sowStatus" label="状态" 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('该列的绑定数据', 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'
}
}
},
//传递过来的接口参数
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'
网友评论