背景：elementui 中table组件，表头加入搜索条件

目录

一、table组件加入插槽头

二、缺陷

三、建议

提示：以下是本篇文章正文内容，下面案例可供参考

一、table组件加入插槽头

1：如果显示的内容，不需要处理显示，不需要后面的scope插槽

2：<template slot="header">为插槽头部，必须在后面写入头部名称

3：table必须改变样式:header-cell-style，否则无法输入

 <el-table-column label="目录类型" align="center">
                <template slot="header">
                    <div>目录选择</div>
                    <el-select v-model="queryParams.defaultV" placeholder="请选择目录类型" filterable clearable>
                        <el-option
                            v-for="dict in dict.type.check_sop_directory_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="matchBool(dict.value)"
                        />
                    </el-select>
                </template>
                <template v-slot="scope">
                    <dict-tag :options="dict.type.check_sop_directory_type" :value="matchBool(scope.row.type)"/>
                </template>
            </el-table-column>

<el-table v-loading="loading" :max-height="tableHeight" fit
                  :header-cell-style="{'color': '#909399'}"
                  :data="list" @selection-change="handleSelectionChange"/>

二、缺陷

1：每一个搜索条件必须要看到此列

2：table中没有展示的列，无法作为搜索条件

三、建议

1：其他基本的搜索条件，建议放在外面

2：每一列建议宽度150px