vue element-ul el-table表格自定义表头(推荐Scoped slot，比较清晰)

需求：自定义表头，点击出现下拉菜单，如图所示

实现一：通过el-table自带的Scoped slot属性（推荐）

代码：

<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350">
	<template slot="header" slot-scope="scope">
		<el-popover placement="bottom" width="200" v-model="visible" popper-class="self-popover" ref="popover">
			<el-form ref="form" :model="form" label-width="100px" label-position="top" @submit.native.prevent>
				<el-form-item label="是否已安排专属技师" class="radio-checkbox-style">
					<el-radio-group v-model="form.rFollowUpFlag">
						<el-radio v-for="(item,index) in yesOrNot" :label="item.value">{{item.label}}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="专属技师" prop="staffBaseIdList" v-if="form.rFollowUpFlag">
					<el-select class="popover-select" v-model="form.staffBaseIdList" :multiple-limit="multipleLimit" multiple filterable placeholder="请选择" @change="getNormalStoreStaffList">
						<el-option v-for="item in staffList" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div v-show="form.rFollowUpFlag!=null">
				<el-button type="danger" size="mini" @click="searchClearEvent" round>清空条件</el-button>
				<el-button type="primary" size="mini" @click="searchSureEvent" round>确定<i class="el-icon-self el-icon-check el-icon--right"></i></el-button>
			</div>
		</el-popover>
		<div class="head-select-container" slot="reference" v-popover:popover>
			<span>专属技师</span>
			<el-select popper-class="head-select-popper" class="head-select" v-model="form.staffBaseIdList" :multiple-limit="multipleLimit" multiple filterable placeholder="" @change="getNormalStoreStaffList">
				<el-option v-for="item in staffList" :label="item.name" :value="item.id">
				</el-option>
			</el-select>
		</div>
		</template>
		<template slot-scope="scope">
			<template v-if="scope.row.rFollowUpEntityList&&scope.row.rFollowUpEntityList.length>0">
				<span class="text-common-blue pointer-style" v-for="(item,index) in scope.row.rFollowUpEntityList" @click="technicianClick(item)">{{index!=0?"、":""}}{{item.staffBaseName}}</span>
			</template>
			<template v-else>-</template>
		</template>
	</el-table-column>

实现效果：

代码说明：
1.slot="header"这个属性就可以实现，里面代码正常写就ok
2.有个坑：项目用的af-table-column(基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件)，用该组件有个问题是自定义表头和下面渲染数据冲突，所以把af-table-column换回el-table自带的el-table-column就可以了

实现二：通过render-header属性（网上比较多推荐这种，比较繁琐，个人不推荐。。。）

代码：

<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350" :render-header="renderHeader">
	<template slot-scope="scope">
		<template v-if="scope.row.rFollowUpEntityList&&scope.row.rFollowUpEntityList.length>0">
			<span class="text-common-blue pointer-style" v-for="(item,index) in scope.row.rFollowUpEntityList" @click="technicianClick(item)">{{index!=0?"、":""}}{{item.staffBaseName}}</span>
		</template>
		<template v-else>-</template>
	</template>
</el-table-column>

renderHeader(h, {column,$index}, index) {
	let optionList = [{text: '选项1','value': "1"}, {text: '选项2','value': "2"}, {text: '选项3','value': "3"}];
	return h('div', {}, [
		h('span', {}, '专属技师'),//h是creatElement定义的函数，三个参数，一是标签名，二是属性设置，三是值
		h('el-popover', {
			props: {
				placement: 'bottom',
				width: '200',
				trigger: 'click',
				content: '城市价格为该城市所有加盟商价格的最高价'
			}
		}, [
			h('i', {
				slot: 'reference',
				class: 'el-icon-arrow-down'
			}, ''),
			h('div', {
				class: '',
			}, [
				h('p', {}, '是否已安排专属技师'),
				h('el-checkbox', {}, '是'),
				h('el-checkbox', {}, '否'),
				h('el-select', {
					on: {
						input: (value) => { //随着下拉框的不同，文字框里的内容在边
							this.logLevel = value;
						},
					},
					props: {
						value: this.logLevel, //文字框的内容绑定value
					},
				}, [
					//下拉框里面填充选项
					optionList.map(item => {
						return h("el-option", {
							props: {
								value: item.value,
								label: item.text
							}
						})
					})

				]),
				h('el-button', {
					props: {
						type: 'danger',
						size: 'mini',
						round: true
					}
				}, '清空条件'),
				h('el-button', {
					props: {
						type: 'primary',
						size: 'mini',
						round: true
					}
				}, '确定'),
			])
		])
	])
}

实现效果：

代码说明：renderHeader函数return出来h是creatElement定义的函数，三个参数，一是标签名，二是属性设置，三是值（如果值还有嵌套html标签可以通过数组实现）

实现三：也是通过render-header属性，直接return出来一个dom，像写js一样

代码：

<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350" :render-header="renderHeader">
	<template slot-scope="scope">
		<template v-if="scope.row.rFollowUpEntityList&&scope.row.rFollowUpEntityList.length>0">
			<span class="text-common-blue pointer-style" v-for="(item,index) in scope.row.rFollowUpEntityList" @click="technicianClick(item)">{{index!=0?"、":""}}{{item.staffBaseName}}</span>
		</template>
		<template v-else>-</template>
	</template>
</el-table-column>

renderHeader() {
	return <div>
			<el-popover placement="bottom" width="200"  popper-class="self-popover" ref="popover">
					<el-form ref="form" model="form" label-width="100px" label-position="top" >
						<el-form-item label="是否已安排专属技师" class="radio-checkbox-style">
							<el-radio-group v-model="form.rFollowUpFlag">
								<el-radio v-for="(item,index) in yesOrNot" label="是"></el-radio>
								<el-radio v-for="(item,index) in yesOrNot" label="否"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="专属技师" prop="staffBaseIdList" v-if="form.rFollowUpFlag">
							<el-select class="popover-select" v-model="form.staffBaseIdList"  multiple filterable placeholder="请选择">
								<el-option v-for="item in staffList" label="item.name" value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<div v-show="form.rFollowUpFlag!=null">
						<el-button type="danger" size="mini"  round>清空条件</el-button>
						<el-button type="primary" size="mini"  round>确定<i class="el-icon-self el-icon-check el-icon--right"></i></el-button>
					</div>
					<span slot="reference">专属技师<i class="el-icon-arrow-down"></i></span>
				</el-popover>
	</div>
}

效果实现：

代码说明：在renderHeader方法直接return出dom,vue里面这种方法比原生js里面简单一点，省了不少字符串的拼接，element ul的组件也可以直接使用，比起第二种还是比较简单的

以上是我实现自定义表头的过程，三种方法可以直接复制代码运行，第一种方法最推荐，希望对和我遇到类似需求的你有一点点帮助，同时也期待大家的指点。