element Table头部添加筛选框

代码如下

<template>
  <div style="height:100%;padding-left: 5px;padding-right: 5px"  id="mainmain">
    <el-tabs  v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane  name="all" >
        <span slot="label">
               全部（{{essayInfos.length}}）
        </span>
      </el-tab-pane>
      <el-tab-pane  name="hasPublish">
        <span slot="label">
               推荐（10）
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-form :inline="true"  class="demo-form-inline" size="mini" >
      <el-form-item label="年份">
        <el-select v-model="currentYear" placeholder="活动区域">
          <el-option label="不限" value="0"></el-option>
          <el-option label="2020" value="2020"></el-option>
          <el-option label="2019" value="2019"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月份">
        <el-select v-model="currentMonth" placeholder="活动区域">
          <el-option label="不限" value="0"></el-option>
          <el-option label="12" value="12"></el-option>
          <el-option label="11" value="11"></el-option>
          <el-option label="10" value="10"></el-option>
          <el-option label="9" value="9"></el-option>
          <el-option label="8" value="8"></el-option>
          <el-option label="7" value="7"></el-option>
          <el-option label="6" value="6"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="1" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="currentGroup" placeholder="活动区域" @change="this.getAllEssay">
          <el-option  key="0" label="全部" :value="0" ></el-option>
          <el-option  :key="item.id" :label="item.artitleGroupName" :value="item.id" v-for="item in essayGroup"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="搜所关键字">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addEssay">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      id="artitleTable"
      :height="tableHeight"
      :data="essayInfos"
      border
      size="mini"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="name"
        label="标题"
        width="300">
        <template slot="header" slot-scope="scope">
          <i class="el-icon-search" @click="searchq"></i>
          <el-popover
            placement="bottom"
            width="300"
            v-model="test1"
            trigger="manual">
            <el-checkbox-group v-model="checkList">
              <el-col :span="6"><el-button size="mini" type="primary" @click="test">清空</el-button>  </el-col>
              <el-col :span="12">  <el-input size="mini"
                placeholder="请输入内容"
                v-model="input4">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input> </el-col>
              <el-col :span="12" style="padding: 10px">  <el-checkbox label="复选框 A"></el-checkbox></el-col>
              <el-col :span="12" style="padding: 10px">  <el-checkbox label="复选框 A"></el-checkbox></el-col>
              <el-col :span="12" style="padding: 10px">  <el-checkbox label="复选框 A"></el-checkbox></el-col>
              <el-col :span="12" style="padding: 10px">  <el-checkbox label="复选框 A"></el-checkbox></el-col>

              <el-col :span="24" style="text-align: center">  <el-button size="mini" type="primary" @click="test">搜索</el-button></el-col>


            </el-checkbox-group>
            <span slot="reference">姓名</span>
          </el-popover>
        <!--  <el-dropdown placement="bottom" @command="handleCommand" trigger="click" :hide-on-click	=false ref="test">
  <span class="el-dropdown-link">
 sss
  </span>
            <template #dropdown>
              <el-dropdown-menu>

                <el-dropdown-item command="a">  <el-input
                       size="mini"
                  placeholder="请输入内容"
                  v-model="input4">
                  <template #prefix>
                  </template>
                </el-input></el-dropdown-item>

                <el-dropdown-item command="a">  <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="b"> <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="c"> <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="c"> <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="c"> <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="c"> <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="c"> <el-checkbox label="复选框 A"></el-checkbox></el-dropdown-item>
                <el-dropdown-item command="c" style="text-align: center">  <el-button size="mini" type="primary" @click="test">搜索</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>-->
        </template>
        <template slot-scope="scope">
          <div>
            {{scope.row.name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        align="center"
        label="作者"
        width="70">
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="创建时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        width="150"
        label="更新时间">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="ttb"
      size="100%"
      :with-header="false">
      <div style="height: 100%">
          <EssayEdit :currentEssay="currentEssay" :essayGroup="essayGroup"></EssayEdit>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import $ from 'jquery' //在需要使用的页面中
  import EssayEdit from "./EssayEdit";


  export default {
    data() {
      return {
        checkList: ['选中且禁用','复选框 A'],
        test1:false,
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value: '',
        selectSortId:'',
        drawer:false,
        currentEssay:null,
        tableHeight:null,
        essayInfos: [],
        essayGroup: [],
        currentGroup:null,
        currentYear:'0',
        currentMonth:'0',
        search: '',
      }
    },
    components:{
      'EssayEdit':EssayEdit,

    },
    created() {

    },
    mounted() {
      this.tableHeight=$('#mainmain').height()-$('#artitleTable').offset().top;
      this.getEssayGroup();
    },
    watch:{
      drawer: {
        handler(newName, oldName) {
           if(!newName){

             this.getAllEssay();
           }
        },

      }
    },
    methods: {
      searchq(){
        this.test1 = true;
      },
      test(){
        this.test1 = false;

      },
      getEssayGroup(){
        let  that=this;
        this.$axios({
          method: 'get',
          url: '/blog/getAllArtitleGroup',
        })
          .then(function(res) {
            that.essayGroup=res.data.data;
            that.currentGroup=res.data.data[0].id;
            that.getAllEssay();
          });

      },
      getAllEssay(){
        let  that=this;
        let url='';
        if(that.currentGroup==0){
           url='/blog/getArtitleInfoByGroupId';
        }else{
           url= '/blog/getArtitleInfoByGroupId?groupId='+that.currentGroup
        }
        this.$axios({
          method: 'get',
          url:url,
          /*data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
          }*/
        })
          .then(function(res) {
            that.essayInfos=res.data.data;

          });

      },
      addEssay(){
        this.currentEssay= {
              text:'',
            groupId:this.currentGroup

        };
        let  that=this;
        that.drawer = true
        console.log( row);
      },
      handleEdit(index, row) {
        let  that=this;
        this.$axios({
          method: 'get',
          url: '/blog/artitleContextById?id='+row.id,
          /*data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
          }*/
        })
          .then(function(res) {
            that.currentEssay=res.data.data;
            that.drawer = true
          });

        console.log( row);
      },
      handleDelete(index, row) {
        let  that=this;
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.$axios({
            method: 'delete',
            url: '/blog/deleteArtitleById?id='+row.id,

        })
          .then(function(res) {
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
            that.getAllEssay();
          });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
        /**/

      }
    },
  }
</script>

效果如下