elementUI 结合jsx实现表单列自定义筛选

elementUI 是一个非常强大的vue第三方组件库，但是el-table的表单头部筛选比较简单，这里我主要介绍一下elementUI结合jsx语法实现表单列的自定义筛选效果如图： 实现效果

在网上找了很多技术博客发现都是千篇一律而且是否可行也没人验证，本着实践是检验真理的唯一标准，我按照网上的方法部署了一下排除了一些坑，为后来者铺平一些道路。

1.安装@babel/preset-env；运行命令 如下

npm i @babel/preset-env -D

2.安装 babel-plugin-transform-vue-jsx ;运行命令 如下

npm install babel-plugin-transform-vue-jsx --save-dev

3.安装babel-plugin-jsx-v-model；运行命令 如下

npm i babel-plugin-jsx-v-model -D

4.配置vue项目中babel.config.js或者.babelrc文件

module.exports = {
  presets: [
    '@vue/app',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: ["@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-object-rest-spread",
    "transform-vue-jsx", "jsx-v-model"]
}

5.vue代码如下

这里用到一个table的属性render-header

render-header属性官方文档简介.png

<template>
   <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="examinerFieldName" label="字段名称">
      </el-table-column>
      <el-table-column
        :render-header="renderHeader"
        prop="examinerFieldChname"
        label="字段中文名称"
      >
      </el-table-column>
  </el-table>
</template>

 data () {
    return {
      tableData: [],
      search: '',
      visible: false,
    }
  },

methods: {
/**
     * 自定义搜索
     */
    renderHeader (h, { column, $index }, index) {
      let _this = this
      return (
        <span>
          {column.label}
          <el-popover placement='bottom' width='200' height='200' trigger="click" v-model={_this.visible}>
            <span slot="reference">
              <i class="el-icon-search" style={_this.search ? { 'color': 'red' } : { 'color': 'blue' }}></i>
            </span>
            <el-input size='small' v-model={_this.search} placeholder='请输入内容'></el-input>
            <div class='el-table-filter__bottom'>
              <button class={_this.search ? '' : 'is-disabled'} onClick={_this.searchColumn.bind(_this, `${column.label}`, `${column.property}`)}>筛选</button>
              <button onClick={_this.clearSearch}>重置</button>
            </div>
          </el-popover>
        </span>
      );
    },
    /**
     * 清空搜索
     */
    clearSearch () {
      this.search = '';
      _self.getExaminerFieldListData()
    },
    /**搜索 
     * @param {列名} label
     * @param {字段名} property
    */
    searchColumn (label, property) {
      console.log(label, property)
      _self.tableData = _self.tableData.filter(item =>
        item[property].toString().includes(_self.search.toString())
      )
    }
},

注意： 你需要了解一下jsx语法。