vxe-table自定义表头搜索表格内容

文档官网：
vxe-table v3https://vxetable.cn/v3/#/table/api

产品要求将表格内容搜索放在表格表头上，效果图如下：

 

 自定义表头，根据文档可以使用插槽slot="header"进行实现

 项目用的是pug模板语法，为了更好的维护代码，我将搜索框封装成了组件popSearch

 父组件代码如下：

<template lang='pug'>
.boxCommon
  .boxTable
    vxe-toolbar(ref="xToolbar" custom )
    vxe-table(
      :data="tableData",
      ref="tableRef"
      resizable
      border,
      class="vxe_class"
      :header-cell-style="{ 'text-align': 'center' }"
      :custom-config="{storage: true}"
      :tree-config="{children: 'children'}"
      id="id"
    )
      vxe-column(type="checkbox",fixed="left", align="center" width="60")
      vxe-column(type="seq", title="序号", fixed="left" width="60" align="center")
      vxe-column(
        field="route_abbreviation"
        title="简称"
        minWidth="90" 
        align="center"
        show-overflow
      )
        template(slot="header")
          popSearch(
            :type="0" 
            prop="route_abbreviation"
            text="简称" 
            :keywords="searchObj.route_abbreviation"  
            :propsData="propsData" 
            :url = "popUrl" 
            @clickSearch="clickSearch" 
          )
      vxe-column(title="操作", align="center"  fixed="right" width="120")
        template(slot-scope="scope")
    xt-pagination(
      :total="total",
      @change="changePage",
      :page="pageForm.page",
      :page-size="pageForm.pageSize"
    )
</template>

<script>
import { mapGetters } from "vuex";
import popSearch from "./pop-search.vue";
export default {
  name: "",
  props:{
  },
  components: { popSearch },
  data() {
    let vm = this;
    return {
      popUrl:'',
      searchObj: {},
      propsData:{},
      total: 0, 
      pageForm: {
        page: 1,
        pageSize: 20,
      },
    };
  },
  computed: {
  },
  watch: {
  },
  methods: {
    //获取表格数据
    getTableData(){

    },
    //接收子组件传的值，改变搜索对象中的值，更新表格数据
    clickSearch(key,value) {
      this.searchObj[key] = value
      this.getTableData();
    },
    //翻页
    changePage(row) {
    },
  },
  created() {
  },
  mounted() {
  },
};
</script>
<style scoped lang="scss">
</style>

popSearch组件代码如下：

<template lang="pug">
//- 为el-select添加filterable属性即可启用搜索功能
.pop
  el-popover( 
    placement="bottom" 
    width="250px" 
    trigger="click"  
    @show="popShow"  
    ref='popRef' 
  )
    el-select(
      v-model="newKeywords",
      filterable,
      clearable
      reserve-keyword,
      ref="refSelect"
      placeholder="请输入关键词",
      :loading="loading",
      :width="width",
      v-if="type == 0",
      @change="handleSearch()"
    )
      el-option( v-for="item in options"  :label="item.label"  :value="item.value"  )
    el-date-picker( 
      v-model="newKeywords" 
      v-if="type == 1"  
      type="daterange" 
      range-separator="至" 
      start-placeholder="开始日期" 
      end-placeholder="结束日期" 
    ) 
    el-date-picker(
      v-model="newKeywords",
      v-if="type == 2",
      type="datetimerange",
      range-separator="至",
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始日期",
      end-placeholder="结束日期"
      @change="handleSearch()"
    ) 
    el-input( 
      v-model="newKeywords" 
      v-if="type == 3" 
      placeholder="请输入" 
      clearable  
      @change="handleSearch()" 
    )
    div(slot="reference")
      span {{ text }}
      i.el-icon-search 
</template>
<script >
export default {
  name: "Pops",
  props: {
    width: {
      type: String,
      default: "250px",
    },
    text: {
      type: String,
      default: "",
    },
    // type用于接受不同类型的弹框内容形式
    // 为了符合我的项目要求，定义了四种不同形式
    // type=:0：select选择器可搜索模式
    // type=1：DatePicker选择日期范围
    // type=2：DateTimePicker选择日期和时间范围
    // type=3：input基础输入框
    type: {
      type: Number,
      default: 0,
    },
    prop: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
    keywords: {
      type: String,
      default: "",
    },
    propsData: {
      type: Object,
      default:()=>{
        return {}
      }
    },
  },
  data() {
    return {
      newKeywords: "",
      options: [],
      loading: false,
    };
  },
  created() {},
  watch: {
    keywords: {
      handler(v) {
        this.newKeywords = this.keywords
      },
      deep: true
    },
  },
  methods: {
    //弹出框显示时触发
    popShow() {
      this.filterMethod()
    },
    //获取选项的值
    async filterMethod(query) {
      this.loading = true;
      let params = {
        field:this.prop,
        keyword:this.newKeywords,
        ...this.propsData
      }
      //await this.$api[this.url](params) 封装的获取接口的方法，根据自己方式调整写法
      let res = await this.$api[this.url](params)
      this.options = res.result.map(item =>{
        return { value: item, label: item}
      })
      this.loading = false;
    },
    handleSearch() {
      if(this.type == 2 && this.newKeywords) {
        this.newKeywords = this.newKeywords.join('至')
      }
      //将子组件输入的值传给父组件
      this.$emit("clickSearch", this.prop, this.newKeywords);
      this.$refs.popRef.showPopper = false
    },
  },
};
</script>
<style scoped>
::v-deep(.el-select-dropdown, .el-popper) {
  margin: 0px !important;
}
</style>

props接收父组件传给子组件的值，上面的用于我的项目，大家可以根据自己的需求调整，emit传值给父组件，父组件通过clickSearch事件接收父组件的值，更新表格数据。