element table表头搜索记录

使用的是element table提供的render-header方法

这些是需要支持表头筛选的列

<el-table-column show-overflow-tooltip prop="merchantName" label="商户" min-width="180" :render-header='customTableHeader'></el-table-column>
      
<el-table-column show-overflow-tooltip prop="accountName" label="账户名称" min-width="180" :render-header='customTableHeader'></el-table-column>

<el-table-column prop="accountRateName" label="计费费率" min-width="60" :render-header='customTableHeader'></el-table-column>

<el-table-column prop="accountStatus" label="账户状态" min-width="60" :render-header='customTableHeader'>
  <template slot-scope="scope">
    {{scope.row.accountStatus == 0 ? '启用' : scope.row.accountStatus == 1 ? '锁定' : ''}}
  </template>
</el-table-column>

<el-table-column sortable='custom' prop="accountOpeningTime" label="开户时间" min-width="100" :render-header='customTableHeader'>
  <template slot-scope="scope">
    {{$formart(scope.row.accountOpeningTime, 'yyyy-MM-dd hh:mm:ss')}}
  </template>
</el-table-column>

<el-table-column sortable='custom' prop="accountTermValidity" label="有效期" min-width="100" :render-header='customTableHeader'>
  <template slot-scope="scope">
    {{$formart(scope.row.accountTermValidity, 'yyyy-MM-dd hh:mm:ss')}}
  </template>
</el-table-column>

自定义表头筛选方法

/* 列名转换搜索类型 */ 
transColumnType (column) {
  let json = {
    merchantName: 'text',
    accountName: 'text',
    accountRateName: 'select',
    accountStatus: 'radio',
    accountOpeningTime: 'date',
    accountTermValidity: 'date'
  }
  return json[column]
},
/* 自定义表头筛选 */
customTableHeader (h, { column, $index }) {
  let searchColumn = {
    type: this.transColumnType(column.property),
    property: column.property,
    label: column.label,
    value: '',
    list: []
  }

  if (column.property == 'accountRateName') { /* 计费费率 select */
    searchColumn.list = this.rateList
  }
  else if (column.property == 'accountStatus') { /* 账户状态 radio */
    searchColumn.list = [
      {label: '启用', value: 0, checked: false},
      {label: '锁定', value: 1, checked: false}
    ]
  }

  return h(tableHeaderSearch, {
    props: {
      searchColumn: searchColumn
    },
    on: {
      searchResult: this.searchResult
    }
  })
}

引入表头筛选组件

import tableHeaderSearch from '@/pages/callCenter/components/tableHeaderSearch.vue'
components: {
  tableHeaderSearch
}

表头筛选组件

/* 表头搜索 */
<template>
  <div id='tableHeaderSearch'>

    <el-popover
      popper-class="tans-pop" 
      placement="bottom" 
      trigger="manual" 
      v-model="visible">

      <div class="tans-pop-content">
        
        <!-- 文本框 type='text -->
        <el-input v-show='column.type == "text"' v-model="column.value" :placeholder="`请输入${searchColumn.label}`" clearable></el-input>

        <!-- 下拉选项 -->
        <el-select v-show='column.type == "select"' v-model="column.value" :placeholder="`请选择${searchColumn.label}`"
          filterable
          clearable>
          <el-option
            v-for="item in column.list"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>

        <!-- 多选/单选 -->
        <el-checkbox 
          @change='checkboxChangeFN(item)'
          v-for='(item, index) in column.list' :key='index'
          v-show='["radio", "checkbox"].includes(column.type)'
          v-model="item.checked">
          {{item.label}}
        </el-checkbox>

        <!-- 单个时间 -->
        <el-date-picker
          v-show='column.type == "date"'
          value-format="yyyy-MM-dd"
          v-model="column.value"
          type="date"
          placeholder="选择日期">
        </el-date-picker>


        <div class="tans-footer">
          <el-button @click='cancel' plain>取消</el-button>
          <el-button @click='submit' type='primary'>确定</el-button>
        </div>
      </div>

      <div @click.stop="showSearchPop" slot="reference" class='ths-label-icon'>
        <span>{{searchColumn.label}}</span>
        <img src='/static/icon/filter.png'>
      </div>
    </el-popover>

  </div>
</template>

<script>
export default {
  name: 'tableHeaderSearch',

  props: {
    /* 列名、搜索类型、选项等数据对象 */
    searchColumn: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

  methods: {

    /* checkbox change */
    checkboxChangeFN (item) {
      if (this.column.type != 'radio') return
      this.column.list.forEach(el => {
        if (el.value != item.value) el.checked = false
      })
    },

    cancel () {
      /* 回显radio */
      if (this.column.type == 'radio') {
        this.column.list.forEach(item => {
          if (item.value == this.searchColumn.value) {
            item.checked = true
          } else {
            item.checked = false
          }
        })
      }

      this.column.value = this.searchColumn.value
      this.visible = false
    },

    submit () {
      /* 如果是单选按钮 则根据 checked 状态封装 单选选项的结果 */
      if (this.column.type == 'radio') {
        this.column.value = this.column.list.filter(item => item.checked)[0].value
      }
      this.searchColumn.value = this.column.value
      this.$emit('searchResult', this.column)
      this.visible = false
    },

    showSearchPop () {
      new Promise((resolve, reject) => {
        this.$store.dispatch('projectClick', Math.random())
        resolve(true)
      }).then(res => {
        this.visible = true
      })
    }
  },

  data () {
    return {
      column: {},
      visible: false
    }
  },

  computed: {
    projectClick: {
      get () {
        return this.$store.getters.projectClick
      },
      set (val) {
        this.$store.dispatch('projectClick', val)
      }
    }
  },

  watch: {
    searchColumn: {
      handler (obj) {
        console.log(obj)
        this.column = {...obj}
      },
      deep: true,
      immediate: true
    },
    /* 监听项目点击，实现点击任意处关闭popover，使用window的click方法也可以 */
    projectClick: {
      handler () {
        if (this.visible) this.cancel()
      }
    }
  }
  
}
</script>

<style lang="less" scoped>

.ths-label-icon {
  display: flex;
  align-items: center;
  width: max-content;
  > span {
    margin-right: 5px;
  }
}

.tans-pop {
  width: max-content !important;

  .tans-pop-content {
    display: flex;
    flex-direction: column;

    /deep/ .el-checkbox {
      margin-bottom: 15px;
    }

    /deep/ .el-input {
      .el-input__suffix {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .tans-footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      
      .el-button {
        width: 50px;
        height: 24px;
        display: flex;
        justify-content: center;
        line-height: 0 !important;
      }
    }
  }
}
</style>