Element 中的表格表头添加搜索图标和功能

主要实现 table的slot=‘header’

1. headerData是表头的循环数组

2. tableData是表格内容的数组

3. <template slot="header"></template> 自定义表头的内容

4. 注意：在使用<template slot="header"></template>的时候，只会显示表头的自定义内容，表格的内容还需要使用<template slot-scope="scope"> {{ scope.row }} </template> scope.row会显示出该列的所有内容

5. 如果<template slot='header'></template>不使用slot-scope='scope'会出现不能输入的问题

6. Vue 2.6+版本的插槽语法使用#header替换<template slot='header' slot-scope='scope'></template>Vue的作用域插槽

   <template>
       <el-table :data="tableData" style="width: 100%">
           <template v-for="(headerItem, headerIndex) in headerData">
               <!-- 下拉框选择器 -->
               <el-table-column
                   v-if="headerItem.select"
                   :label="headerItem.label"
                   :prop="headerItem.prop"
                   :key="headerIndex"
               >
               	<!-- 表头的 slot -->
                   <template #header>
                       <el-popover placement="bottom" title="请选择" width="200" trigger="click">
                           <div slot="reference" class="search-header">
                               <span class="search-title">{{ headerItem.label }}</span>
                               <i class="search-icon el-icon-search"></i>
                           </div>
                           <el-select v-model="headerItem.selectValue" placeholder="请选择">
                               <el-option
                                   v-for="item in headerItem.selectOptions"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value"
                               >
                               </el-option>
                           </el-select>
                       </el-popover>
                   </template>
                   <!-- 表格的 内容 slot -->
                   <template slot-scope="scope">
                       {{ scope.row[headerItem.prop] }}
                   </template>
               </el-table-column>
               <!-- 日期选择器 -->
               <el-table-column
                   v-else-if="headerItem.dateSelect"
                   :label="headerItem.label"
                   :prop="headerItem.prop"
                   :key="headerIndex"
               >
                   <template #header>
                       <el-popover placement="bottom" title="请选择" trigger="click">
                           <div class="search-box" slot="reference">
                               <span class="search-title">{{ headerItem.label }}</span>
                               <i class="el-icon-arrow-down search-icon"></i>
                           </div>
                           <el-date-picker
                               type="daterange"
                               range-separator="至"
                               start-placeholder="开始日期"
                               end-placeholder="结束日期"
                           >
                           </el-date-picker>
                       </el-popover>
                   </template>
                   <template slot-scope="scope">
                       {{ scope.row[headerItem.prop] }}
                   </template>
               </el-table-column>
               <!-- 输入框 -->
               <el-table-column
                   v-else-if="headerItem.inputSelect"
                   :label="headerItem.label"
                   :prop="headerItem.prop"
                   :key="headerIndex"
               >
                   <template #header>
                       <el-popover placement="bottom" title="请选择" trigger="click">
                           <div slot="reference" class="search-header">
                               <span class="search-title">{{ headerItem.label }}</span>
                               <i class="search-icon el-icon-search"></i>
                           </div>
                           <el-input />
                       </el-popover>
                   </template>
                   <template slot-scope="scope">
                       {{ scope.row[headerItem.prop] }}
                   </template>
               </el-table-column>
               <el-table-column v-else :label="headerItem.label" :prop="headerItem.prop" :key="headerIndex">
               </el-table-column>
           </template>
       </el-table>
   </template>
   

7. js代码

   export default {
       data() {
           return {
               headerData: [
                   {
                       label: '日期',
                       prop: 'date',
                       dateSelect: true,
                   },
                   {
                       label: '名称',
                       prop: 'name',
                       inputSelect: true,
                   },
                   {
                       label: '类型',
                       prop: 'type',
                       select: true,
                       selectValue: null,
                       selectOptions: [
                           {
                               value: 'Vue',
                               label: 'Vue',
                           },
                           {
                               value: 'React',
                               label: 'React',
                           },
                           {
                               value: 'Angular',
                               label: 'Angular',
                           },
                       ],
                   },
               ],
               tableData: [
                   {
                       date: '2016-05-02',
                       name: '王小虎',
                       type: 'Vue',
                   },
                   {
                       date: '2016-05-04',
                       name: '王小虎',
                       type: 'React',
                   },
                   {
                       date: '2016-05-01',
                       name: '王小虎',
                       type: 'Angular',
                   },
               ],
           }
       },
   }