博客

效果

代码

ps:部分实现，并未添加逻辑等处理

<template>
  <div class="container">
    <div v-if="search1!=''|search2!=''|search3!=''" class="display" style="margin-top: 15px;">
      <i class="el-icon-search"/>
      <el-input
        v-if="search1!=''"
        v-model="search1"
        class="input"
        placeholder=""
        clearable/>
      <el-input
        v-if="search2!=''"
        v-model="search2"
        class="input"
        placeholder=""
        clearable/>
      <el-input
        v-if="search3!=''"
        v-model="search3"
        class="input"
        placeholder=""
        clearable/>
    </div>
    <!-- 添加自定义方法 renderHeaderOne、renderHeaderTwo、renderHeaderThree -->
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column
        :render-header="renderHeaderOne"
        prop="name"
        label="姓名"
        align="center"/>
      <el-table-column
        :render-header="renderHeaderTwo"
        prop="date"
        label="日期"
        align="center"/>
      <el-table-column
        :render-header="renderHeaderThree"
        prop="address"
        label="地址"
        align="center"/>
      <!-- element ui 自带筛选方法 -->
      <el-table-column
        :filters="tag"
        :filter-method="filterTag"
        filter-placement="bottom-end"
        prop="tag"
        label="标签"
        align="center"/>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search1: '王小虎',
      search2: '',
      search3: '',
      tableData: [{
        name: '王小虎',
        date: '2016-05-02',
        address: '上海市普陀区金沙江路 1518 弄',
        tag: '家'
      }, {
        name: '王老五',
        date: '2016-05-04',
        address: '上海市普陀区金沙江路 1517 弄',
        tag: '公司'
      }, {
        name: '王大锤',
        date: '2016-05-01',
        address: '上海市普陀区金沙江路 1519 弄',
        tag: '家'
      }, {
        name: '王小龙',
        date: '2016-05-03',
        address: '上海市普陀区金沙江路 1516 弄',
        tag: '公司'
      }],
      tag: [{ text: '家', value: '家' }, { text: '公司', value: '公司' }]
    }
  },
  methods: {
    // 在渲染表头的时候,会调用此方法, h为createElement的缩写版
    renderHeaderOne(h, { column, $index }) {
      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.search1 ? {'color': 'red'} : {'color': 'blue'}}></i>
            </span>
            <el-input size='small' v-model={this.search1} placeholder=''></el-input>
          </el-popover>
        </span>
      )
    },
    renderHeaderTwo(h, { column, $index }) {
      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.search2 ? {'color': 'red'} : {'color': 'blue'}}></i>
            </span>
            <el-date-picker v-model={this.search2} type='date' style='width:170px;' placeholder=''></el-date-picker>
          </el-popover>
        </span>
      )
    },
    renderHeaderThree(h, { column, $index }) {
      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.search3 ? {'color': 'red'} : {'color': 'blue'}}></i>
            </span>
            <el-input size='small' v-model={this.search3} placeholder=''></el-input>
          </el-popover>
        </span>
      )
    },
    filterTag(value, row) {
      return row.tag === value
    }
  }
}
</script>
<style scoped>
.display {
    background: #eef1f6;
    padding: 8px 24px;
    margin-bottom: 20px;
    border-radius: 2px;
    color: #2c3e50;
}
.input {
  width: 100px;
  margin-left: 5px;
}
</style>