公司有一个新的需求，点击ElTableColumn的头部可以进行搜索，这个功能同事已经做出来了，但是使用有些不方便，自己就打算封装成一个组件，学习一下。

ElTableColumn本来是这个样子的：

要做成的是这个样子：

我直接就放代码了，挨着挨着说明太多了。

代码的结构：

组件

<!-- ElTableColumnPro.vue --><template> <el-table-column v-if="visible" :formatter="formatter" :align='align' :prop="prop" :header-align="headerAlign" :label="label" :width="width" :render-header="renderHeader" > <template slot-scope="scope"> <slot :row="scope.row" :$index="scope.$index" > <span>{{fomatMethod(scope.row[prop])}}</span> </slot> </template> </el-table-column></template><script>import moment from "moment";export default { name: "el-table-column-pro", props: { prop: { type: String }, label: { type: String }, width: { type: Number }, renderType: { type: String, validator: value => ["date", "input", "select"].includes(value) }, placeholder: { type: String }, rederWidth: { type: String, default: "230px" }, param: { type: String, default: "" }, startDate: { type: String }, endDate: { type: String }, selectList: { type: Array }, isClear: { type: Boolean, default:true }, visible: { type: Boolean, default: true }, filterIcon: { type: String, default: "el-icon-search" }, callback: { type: Function }, formatter: { type: Function, default:(row, column, cellValue)=>cellValue }, align:{ type:String }, headerAlign:{ type:String } }, data() { return { formatD:this.filterIcon }; }, methods: { fomatMethod(value){ return this.formatter('','',value) }, renderHeader(createElement, { column, $index }) { switch (this.renderType) { case "date": return this.renderDate(createElement, { column, $index }); case "input": return this.rederInput(createElement, { column, $index }); case "select": return this.rederSelect(createElement, { column, $index }); default: return column.label; } }, rederInput(createElement, { column, $index }) { return createElement( "div", { class: "filters", style: { color: column.color } }, [ createElement( "el-popover", { props: { placement: "bottom", width: "200", trigger: "click" } }, [ createElement("el-input", { props: { placeholder: this.placeholder, value: this.param }, nativeOn: { keyup: event => { if (event.keyCode === 13) { this.$emit("update:param", event.target.value); this.callback && this.callback(); } } }, on: { blur: event => { this.$emit("update:param", event.target.value); this.callback && this.callback(); } } }), createElement( "span", { slot: "reference" }, [ column.label, createElement("i", { class: this.filterIcon, style: { marginLeft: "4px" } }) ] ) ] ) ] ); }, rederSelect(createElement, { column, $index }) { return createElement( "div", { class: "filters", style: { color: column.color } }, [ createElement( "el-popover", { props: { placement: "bottom", width: "200", trigger: "click" } }, [ createElement( "el-select", { props: { placeholder: this.placeholder, value: this.param, clearable: this.isClear }, on: { input: value => { this.$emit("update:param", value); this.callback && this.callback(); } } }, [ this.selectList.map(item => { return createElement("el-option", { props: { value: item.value, label: item.label } }); }) ] ), createElement( "span", { slot: "reference" }, [ column.label, createElement("i", { class: this.filterIcon, style: { marginLeft: "4px" } }) ] ) ] ) ] ); }, renderDate(createElement, { column, $index }) { return createElement( "div", { class: "filters" }, [ createElement( "el-popover", { props: { placement: "bottom", width: this.rederWidth, trigger: "click" } }, [ createElement("el-date-picker", { props: { placeholder: this.placeholder, value: this.value, type: "daterange", rangeSeparator:"至", startPlaceholder:"开始日期", endPlaceholder:"结束日期", }, style: { width: this.rederWidth }, on: { input: value => { if (value) { const startDate = moment(value[0]).format("YYYY-MM-DD"); const endDate = moment(value[1]).format("YYYY-MM-DD"); this.$emit("update:startDate", startDate); this.$emit("update:endDate", endDate); this.callback && this.callback(); } } } }), createElement( "span", { slot: "reference" }, [ column.label, createElement("i", { class: this.filterIcon, style: { marginLeft: "4px" } }) ] ) ] ) ] ); } }};</script><!-- index.js -->import ElTableColumnPro from './ElTableColumnPro'ElTableColumnPro.install = function(Vue) { Vue.component(ElTableColumnPro.name, ElTableColumnPro);};export default ElTableColumnPro;

安装

import ElTableColumnPro from 'components/ElTableColumnPro/index' .........Vue.use(ElTableColumnPro)

使用

<el-table :data="bankFlow" style="width:100%" stripe> <el-table-column-pro :visible="showMore" prop="transactionId" label="流水号" :width="120"> </el-table-column-pro> <el-table-column-pro prop="clientCode" label="客户代码 " :width="120" placeholder="请输入客户代码" :callback="requestTransactionLogs" renderType="input" :param.sync="request_params.clientCode"> </el-table-column-pro> <el-table-column-pro prop="eventTypeName" label="事件 " placeholder="请选择事件" :selectList="listEventEnum" :callback="requestTransactionLogs" renderType="select" :param.sync="request_params.event" :width="100"> </el-table-column-pro> <el-table-column-pro prop="createTime" :callback="requestTransactionLogs" :startDate.sync="request_params.startDate" :endDate.sync="request_params.endDate" :formatter="$timeformat" label="时间" renderType="date" :width="180" ></el-table-column-pro> </el-table> <el-table :data="lists.content" v-loading="loading" @row-dblclick="detail" > <el-table-column-pro :width="120" prop="clientCode" label="客户代码 " align="center" header-align="center" placeholder="请输入客户代码" :callback="getLists" renderType="input" :param.sync="params.clientCode"></el-table-column-pro> <el-table-column-pro label="内容 " placeholder="请输入内容" :callback="getLists" renderType="input" :param.sync="params.content"> <template slot-scope="scope"> <pre>{{scope.row.content}}</pre> </template> </el-table-column-pro> <el-table-column-pro prop="userName" :width="100" label="记录人 " align="center" header-align="center" placeholder="请输入记录人" :callback="getLists" renderType="input" :param.sync="params.userName"></el-table-column-pro> <el-table-column prop="createTime" width="150" label="记录时间" align="center" header-align="center" :formatter="$dateTimeFormat"></el-table-column> </el-table>

注释就不挨着打了....

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。