公司有一个新的需求，点击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( p, { 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( p, { 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( p, { 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>
注释就不挨着打了....
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue2实现购物车地址选配
angular服务端渲染方法总结
以上就是eltablecolumn如何自定义内容的详细内容。