el-table封装点击列筛选行数据功能，支持筛选，搜索，排序功能

数据少的话，可以前端实现，如果多的话，建议还是请求接口比较合理父组件：

<template>

  <div class="home">

    <!-- <img alt="Vue logo" src="../assets/logo.png">

      <HelloWorld msg="Welcome to Your Vue.js App" /> -->

    <el-button @click="calculateSum">求和</el-button>

    <el-input v-model="searchValue"></el-input>

    <el-table :data="tableData" height="250" border style="width: 100%;position: relative;" id="table1">

      <el-table-column prop="date" label="日期" width="180">

        <template v-slot:header>

          <i class="el-icon-search" style="margin-right: 15px;" @click.stop="filterData($event, 'date')"></i>

          <span class="table-heard-filter" style="color: red; font-weight: bold;">0</span>

        </template>

      </el-table-column>

      <el-table-column prop="name" label="姓名" width="180">

        <template v-slot:header>

          <el-checkbox v-model="checked2" @change="changeFnc('name')"></el-checkbox>

          <i class="el-icon-search" style="margin-right: 15px;" @click.stop="filterData($event, 'name')"></i>

          <span class="table-heard-filter">1</span>

        </template>

      </el-table-column>

    </el-table>

    <TableTool v-if="showFilterTool" ref="selectTool" :filterToolLeft="filterToolLeft" :filterToolTop="filterToolTop"

      @closeTool="closeTool" @saveSeach="saveSeach" :ids="ids" :type="type" />

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

import TableTool from '@/components/TableTool.vue'

import ColumnDialog from './ColumnDialog.vue'

import { Checkbox } from 'element-ui';

export default {

  name: 'HomeView',

  components: {

    HelloWorld,

    TableTool,

    ColumnDialog

  },

  data() {

    return {

      checked: false,

      checked2: false,

      summaryShow: false,

      summary: [],  // 用于存放总计数据的数组

      searchValue: "",

      CheckboxArr: [],

      ids: [], // 初始化ids为空数组

      type: "",

      currentSummaryColumn: null, // 当前点击的列名

      tableData: [{

        date: '2016-05-03',

        name: 56,

        address: 8,

        id: "0"

      }, {

        date: '2016-05-02',

        name: 78,

        address: 8,

        id: "1"

      }, {

        date: '2016-05-04',

        name: 0,

        address: 8,

        id: "2"

      }

      ],

      showFilterTool: false,

      CheckboxArr: [],

      ids: [],

      type: "",

      currentSummaryColumn: null // 当前点击的列名

    }

  },

  mounted() {

    localStorage.setItem('CheckboxArr', JSON.stringify(this.tableData))

    // this.scroll()

    this.closeTableToolFnc()

  },

  beforeDestroy() {

    // this.scroll()

    this.closeTableToolFnc()

  },

  methods: {

    //子组件只用@click.stop防止事件冒泡，父组件单击任意位置关闭子组件

    closeTableToolFnc() {

      document.addEventListener("click", (e) => {

        // if (!this.$refs.selectTool.contains(e.target)) {

        this.closeTool()

        // }

      });

    },

    filterData(e, type) {

      console.log(type);

      this.type = type

      this.showFilterTool = false;

      this.$nextTick(() => {

        this.filterToolTop = e.pageY;

        this.filterToolLeft = e.pageX;

        this.ids = []

        this.tableData.forEach(t => {

          this.ids.push(t.id)

        })

        this.showFilterTool = true;

      });

    },

    closeTool() {

      this.showFilterTool = false;

    },

    saveSeach(data) {

      this.tableData = []

      this.tableData = data

      this.closeTool();

    },

  }

}

</script>

<style>

.Tableone ::-webkit-scrollbar,

::-webkit-scrollbar-track,

::-webkit-scrollbar-thumb {

  display: none

}

</style>

子组件：

<template>

    <div class="tableTool" :style="{ top: filterToolTop + 30 + 'px', left: filterToolLeft - 20 + 'px' }" @click.stop>

        <el-button @click="shengFnc">升序</el-button>

        <el-button @click="jiangFnc">降序</el-button>

        <el-input v-model="keyword" prefix-icon="el-input__icon el-icon-search" type="text" placeholder="搜索"

            @blur="blurFnc"></el-input>

        <div class="select-box">

            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

            <el-checkbox-group v-model="checkedList">

                <el-checkbox v-for="(item, index) in CheckboxArr" :label="item.id" :key="index" :value="item.id">

                    <span>{{ item[type] }}</span>

                </el-checkbox>

            </el-checkbox-group>

        </div>

        <div class="bottom">

            <el-button size="mini" @click="$emit('closeTool')">取消</el-button>

            <el-button type="primary" size="mini" @click="save">确认</el-button>

        </div>

        <i class="el-icon-caret-top"></i>

    </div>

</template>

<script>

export default {

    name: "tableCol",

    props: {

        filterToolLeft: {

            required: true,

            type: Number

        },

        filterToolTop: {

            required: true,

            type: Number

        },

        ids: {

            type: Array

        },

        type: {

            type: String

        }

    },

    data() {

        return {

            keyword: "",

            checkAll: false,

            checkedList: [],

            options: [],

            isIndeterminate: true,

            allOptions: [],

            CheckboxArr: JSON.parse(localStorage.getItem('CheckboxArr')),

            c: []

        };

    },

    mounted() {

    },

    methods: {

        shengFnc() {

            this.CheckboxArr.sort((a, b) => a.id - b.id);

        },

        jiangFnc() {

            this.CheckboxArr.sort((a, b) => b.id - a.id);

        },

        blurFnc() {

            console.log(this.keyword);

            if (this.keyword) {

                this.CheckboxArr = this.CheckboxArr.filter(item => {

                    if (this.$props.type == 'date') {

                        return item.date == this.keyword;

                    } else {

                        return item.name == this.keyword;

                    }

                });

            } else {

                this.CheckboxArr = JSON.parse(localStorage.getItem('CheckboxArr'))

            }

        },

        handleCheckAllChange(val) {

            console.log(val, this.checkedList);

            this.checkedList = val ? this.CheckboxArr.map(item => item.id) : [];

        },

        save() {

            this.c = []

            this.CheckboxArr.forEach(r => {

                this.checkedList.forEach(i => {

                    if (r.id == i) {

                        this.c.push(r)

                    }

                })

            })

            this.$emit("saveSeach", this.c);

        },

 

    },

    mounted() {

        console.log(this.CheckboxArr, "传入的数据");

        this.checkedList = [...this.$props.ids]

        if (this.CheckboxArr.length == this.checkedList.length) {

            this.checkAll = true

        } else {

            this.checkAll = false

        }

    },

};

</script>

<style scoped>

.tableTool {

    position: fixed;

    background: #fff;

    box-shadow: 0 0 5px #ccc;

    padding: 10px;

    z-index: 999;

 

}

/deep/.el-input__inner {

    padding-left: 30px;

}

.select-box {

    border: #ccc solid 1px;

    padding: 10px;

    margin-top: 10px;

    max-height: 280px;

    overflow: auto;

    max-width: 400px;

}

/deep/ .el-checkbox {

    display: block;

    margin-top: 5px;

}

/deep/ .el-radio-group {

    display: flex;

    flex-direction: column;

}

.bottom {

    display: flex;

    justify-content: flex-end;

    margin-top: 10px;

}

.el-icon-caret-top {

    position: absolute;

    color: #fff;

    top: -13px;

    font-size: 20px;

}

.el-checkbox:last-of-type {

    margin-right: none;

}

</style>