基于elementui的table自定义表头组件

基础效果

Attributes

参数	说明	类型	默认值	可选值
width	弹出框宽度	Number	190
data	当前列的数据源 scope	Object	无
icon	图标className，对应elementui图标	String	el-icon-search
data	当前列的数据源 scope	Object	无
value	input默认值	String	无
trigger	触发方式	String	click	click/focus/hover/manual

注：value 参数支持 .sync 修饰符

Events

事件名称	说明	回调参数
confirm	查询按钮点击事件	Object（当前列的数据源 & input的值）
cancel	重置按钮点击事件	Object（当前列的数据源 & input的值）

代码使用示例

import TableFilter from "@components/tableExtend/index.vue"

[html]
<el-table stripe :data="tData" style="width:100%">
    <el-table-column prop="th1" label="路线编码"></el-table-column>
    <el-table-column prop="th2" label="所在市">
        <template slot="header" slot-scope="scope">
            <table-filter 
                :data="scope" 
                 //sync修饰符用法
                :value.sync="value_1" 
                icon="el-icon-search" 
                @confirm="getConfirm($event)" 
                @cancel="getCancel($event)"
            ></table-filter>
        </template>
    </el-table-column>
    <el-table-column prop="th3" label="所在县">
        <template slot="header" slot-scope="scope">
            <table-filter 
                   :data="scope" 
                    //一般用法
                   :value="value_2"  
                   icon="el-icon-search"></table-filter>
        </template>
    </el-table-column>
</el-table>

[js]
import TableFilter from "@components/tableExtend/index.vue"
	export default {
		data() {
			return {
				value_1:"南京",
                value_2:"上海",
				searchVal:'',
				value: true,
				name:'123',
				tData: [{
						th1: 'Y0011-aaaa',
						th2: '1',
						th3: 'Y0013',
						th4: 'Y0014'
					},
					{
						th1: 'Y0021-aaaa',
						th2: '宿迁市',
						th3: 'Y0023',
						th4: 'Y0024'
					}
				],
			}
		},
		components:{
			TableFilter
		},
		mounted() {

		},
		methods: {
			getConfirm(e){
				console.log(111,this.value_1,e);
			},
			getCancel(e){
				console.log(22222,this.value_1,e);
			},
		}
	}

源码

[html]
<template>
    <div class="custom__tableHeader--warp">
		<slot>
			<el-popover placement="bottom" :trigger="trigger" :width="width">
				<div class="table__hrader--content">
					<el-input size="mini" placeholder="输入关键字搜索" v-model="filterVal"/>
					<div class="table__hrader--btnWarp">
						<el-button size="mini" type="primary" :icon="icon" @click="handleConfirm()">查询</el-button>
						<el-button size="mini" @click="handleCancel()">重置</el-button>
					</div>
				</div>
				<div slot="reference" class="trigger__popover--btn">{{data.column.label}}<i :class="icon"></i></div>
			</el-popover>
		</slot>
	</div>
	
</template>

[js]
export default {
		name: "TableFilter",
		props: {
			trigger:{
				type:String,
				default:'click'
			},
			//宽度
			width:{
				type:Number,
				default:190
			},
			//当前列数据源
			data:{
				type:Object,
				default:() =>{}
			},
			//图标class elementui图标
			icon:{
				type:String,
				default:'el-icon-search'
			},
			//默认值
			value:{
				type:String,
				default:''
			}
		},
		data(){
			return {
				filterVal:''
			}
		},
		watch: {
			value:{
				handler:function(o,n){
					this.filterVal = o;
				},
      			immediate: true
			}
		},
		created() {
			
		},
		mounted() {
			
		},
		methods: {

			//查询
			handleConfirm(){
				this.$emit('update:value',this.filterVal);
				this.$emit('confirm',Object.assign({filterVal:this.filterVal},this.data));
			},

			//重置
			handleCancel(){
				this.$emit('update:value','');
				this.$emit('cancel',Object.assign({filterVal:''},this.data));
			}
		},
	};

[css]
.custom__tableHeader--warp {
	.el__popover--warp {
		width:200px;
		cursor: pointer;
	}
	.trigger__popover--btn {
		cursor: pointer;
		i{
			margin-left:15px;
		}
	}
}