这次给大家带来eltablecolumn扩展方法详解，eltablecolumn扩展的注意事项有哪些，下面就是实战案例，一起来看一下。
公司有一个新的需求，点击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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
$http方法传递json参数步骤详解
vue把html字符串转化为html步骤详解
以上就是eltablecolumn扩展方法详解的详细内容。