「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」
参考链接：
资料1：点击查看 → 【vue el-table 表头搜索（筛选）功能 实现分析（零）】
效果： 表头搜索
因为这个不能直接调用表头搜索子组件的方法，只能直接写了： 如果直接全写成edc-search，而表格的内容结构与edc-search的表格内容结构不符，不可直接全部使用edc-search，而又由于单独只写连个搜索的edc-search的话，由于页面动态渲染的时间，导致搜索的两个字段均展示在表格末尾列，导致表格字段展示顺序不正确，故需要直接在表格对应的表头搜索字段处进行搜索配置，并进行后续的模糊查询。
上篇文章是关于表格的普通列和自定义列，二者或许可以结合有个更好的组件，此文是拿普通列来写的（当时没思考太多），想要自定义列需要对本文的代码进行修改，如果不想修改，本文的自定义列只能通过formatter来格式化内容了。
1el-table中增加对某一列进行表头搜索
2.1表头搜索组件的写法：
单独一列的搜索
部分代码
这里命名为edc_search组件
<el-table ref="tableData" :data="tableData" :height="tableheight" default-expand-all row-key="sysResourcesId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width:100%;margin:0 auto 5px;font-size:0.8rem" v-loading="loading" highlight-current-row>
<el-table-column show-overflow-tooltip min-width="100" prop="sortNum" label="排序号" align="left"></el-table-column>
<el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
<!-- -->
<template #header v-if="headerItem.seach">
<el-popover v-if="headerItem.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem)" style="width: 200px" size="small" v-model="headerItem.seachSetting.value" :placeholder="'请输入'+headerItem.label" @keyup.enter.native="todoSearchItself(headerItem)" />
<el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem)">重 置</el-button>
<el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem)">搜 索</el-button>
<div style="display: flex;align-items: center" slot="reference">
<span class="search-title">{{ headerItem.label }}</span>
<img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem.seachSetting.value&&headerItem.seachSetting.value!==''?img2:img1" />
</div>
</el-popover>
</template>
<!-- -->
<template slot-scope="scope">
<span>{{scope.row.resourcesCode}}</span>
</template>
</el-table-column>
<!-- <el-table-column show-overflow-tooltip prop="resourcesCode" label="编码" align="left" min-width="100">
<template slot-scope="scope">
<span>{{scope.row.resourcesCode}}</span>
</template>
</el-table-column> -->
<el-table-column show-overflow-tooltip prop="icon" min-width="100" label="图标" align="left">
<template slot-scope="scope">
<el-tooltip :content="scope.row.icon" placement="top">
<i class="textItem iconfont">{{ scope.row.icon }}</i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150">
<!-- -->
<template #header v-if="headerItem2.seach">
<el-popover v-if="headerItem2.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem2.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem2)" style="width: 200px" size="small" v-model="headerItem2.seachSetting.value" :placeholder="'请输入'+headerItem2.label" @keyup.enter.native="todoSearchItself(headerItem2)" />
<el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem2)">重 置</el-button>
<el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem2)">搜 索</el-button>
<div style="display: flex;align-items: center" slot="reference">
<span class="search-title">{{ headerItem2.label }}</span>
<img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem2.seachSetting.value&&headerItem2.seachSetting.value!==''?img2:img1" />
</div>
</el-popover>
</template>
<!-- -->
<template slot-scope="scope">
<el-tooltip :content="scope.row.resourcesName" placement="top">
<span class="textItem">{{ scope.row.resourcesName }}</span>
</el-tooltip>
</template>
</el-table-column>
<!-- <el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150">
<template slot-scope="scope">
<el-tooltip :content="scope.row.resourcesName" placement="top">
<span class="textItem">{{ scope.row.resourcesName }}</span>
</el-tooltip>
</template>
</el-table-column> -->
<el-table-column show-overflow-tooltip prop="resourcesName" label="菜单名称" align="left" min-width="150">
<!-- -->
<template #header v-if="headerItem2.seach">
<el-popover v-if="headerItem2.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem2.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem2)" style="width: 200px" size="small" v-model="headerItem2.seachSetting.value" :placeholder="'请输入'+headerItem2.label" @keyup.enter.native="todoSearchItself(headerItem2)" />
<el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearchItself(headerItem2)">重 置</el-button>
<el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearchItself(headerItem2)">搜 索</el-button>
<div style="display: flex;align-items: center" slot="reference">
<span class="search-title">{{ headerItem2.label }}</span>
<img style="width: 13px;margin-left: 10px;cursor: pointer" :src="headerItem2.seachSetting.value&&headerItem2.seachSetting.value!==''?img2:img1" />
</div>
</el-popover>
</template>
<!-- -->
<template slot-scope="scope">
<el-tooltip :content="scope.row.resourcesName" placement="top">
<span class="textItem">{{ scope.row.resourcesName }}</span>
</el-tooltip>
</template>
</el-table-column>
<script>
export default {
data () {
seachForm: {},
headerItem: { // 这个格式写法 的原有，可看下一篇文章
label: '编码',
prop: 'resourcesCode',
width: '140',
seach: true,
seachSetting: {
type: 'Input',
value: ''
}
},
headerItem2: {
label: '菜单名称',
prop: 'resourcesName',
width: '140',
seach: true,
seachSetting: {
type: 'Input',
value: ''
}
},
seachFormItself: {}
},
methods:{
// 自身的按钮搜索点击、重置清除操作
todoSearchItself (headerItem) {
headerItem.visible = false
if (headerItem.seachSetting.type === 'Input') {
this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
}
this.todoSearch(this.seachFormItself)
},
clearSearchItself (headerItem) {
if (headerItem.seachSetting && headerItem.seachSetting.type) {
headerItem.visible = false
if (headerItem.seachSetting.type === 'Input') {
headerItem.seachSetting.value = ''
this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
}
this.clearSearch(this.seachFormItself)
}
},
// 触发的方法-操作
clearSearch (val) {
console.log('清空--clearSearch', val)
this.pageNum = 1
this.pageSize = 10
this.seachForm = val
this.computedTableData()
},
todoSearch (val) {
console.log('val---todoSearch', val)
this.pageNum = 1
this.pageSize = 10
this.seachForm = val
this.computedTableData()
},}
}
2.2 表头搜索组件调用
edc-table也是个组件，从下面代码可以看出，是可以在表格内部放东西的一个表格组件，在此不具体介绍，主要介绍的是edc_search的用法
<el-row class="contant"
style="width: 100%;">
<edc-table v-loading="editLoading"
:data="users"
:currentPage="page.pageNum"
:total="totalCou"
:height="tableheight"
show-overflow-tooltip
:pagesize="page.pageSize"
@current-change="currentChange"
@size-change="sizeChange">
<el-table-column show-overflow-tooltip
label="操作"
width="180">
<div slot-scope="scope"
class="el_Handel">
<span size="mini"
type="primary"
@click.stop="entryQuestions(scope.row)"
class="el_enterIn">录入</span>
<span class="shuxian"
v-if="$route.path!=='/memberList'">|</span>
<span size="mini"
type="primary"
@click.stop="handleEditIcon(scope.row,scope.$index)"
v-if="$route.path!=='/memberList'"
class="el_Edit">编辑</span>
<span class="shuxian"
v-if="$route.path!=='/memberList'">|</span>
<span size="mini"
type="primary"
@click.stop="handleDelete(scope.row,scope.$index)"
:disabled="disabaled"
v-if="$route.path!=='/memberList'"
class="el_Del"> 删除</span>
</div>
</el-table-column>
<edc_Seach :tableData="headerData"
@search="todoSearch"
@clearSearch="clearSearch"></edc_Seach>
</edc-table>
</el-row>
根据表头所需进行单独的类型配置 ↓
headerData: [
// {
// type: 'index', // index为序号;selection为多选框
// width: 50
// },
{
label: '入组日期',
prop: 'nrrq',
width: 120,
seach: true, // 带搜索就为true,写上下方seachSetting对象(有搜索必写),不要表头搜索可以直接不写此行和seachSetting配置
seachSetting: { // 表头搜索的配置项
type: 'DatePicker', // Input为输入框;Range为区间输入;Cascader为级联选择器;DatePicker年月日区间;TimePicker时分秒区间;DateTimePicker年月日时分秒区间
value: '', // 搜索框的值,必填!一般都用value;只有Range区间使用下面的最大值和最小值,不用value
// value: [], // 只在Cascader级联搜索时使用
// minVal: '', // 只在Range区间时使用
// maxVal: '', // 只在Range区间时使用
rename: 'createDate' // 修改搜索条件传给后台的名称
}
},
{
label: '年龄',
prop: 'age',
width: 80,
seach: true,
seachSetting: {
type: 'Range',
minVal: '',
maxVal: ''
}
},
{
label: '出生日期',
prop: 'mbirthday',
width: 120,
seach: true,
seachSetting: {
type: 'DatePicker',
value: '',
rename: 'birthDay'
}
},
{
label: '手机号',
prop: 'mPhone',
// width: 150,
seach: true,
seachSetting: {
type: 'Input',
value: ''
}
},
{
label: '随访状态',
prop: 'flowUpStatus',
width: 120,
seach: true,
seachSetting: {
type: 'Selects',
value: '',
options: [],
rename: 'flowUpStatusList'
}
}
/* {
label: '所属地区',
prop: 'treeStr',
width: '160',
seach: true,
seachSetting: { // 配置
type: 'Cascader',
value: [], // 注意级联的value用的是数组,返回给后台的搜索值已经被组件格式成数组最后一个值,是个string格式传给了后台!
options: [ // 级联选择器的选项
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}]
}]
}
],
props: { // props中的配置
value: 'value', // 后台返回的名称不是value时进行的配置,下面两个同
label: 'label',
children: 'children',
checkStrictly: true, // 可各级选择,不用一直选到最后的配置
expandTrigger: 'hover' // 子选项的打开方式 hover/click
}
}
},
{
label: '详细地址',
prop: 'address',
width: 150
},
{
label: '备注',
prop: 'bz',
width: 150
} */
],
但是存在一些问题，并不完美
目前这个只适用于做固定的表格，不适合表格套表格（内部表格不适合使用，会出现表头定位刷新等问题），且无法设置表头回显等等
