數據少的話，可以前端實現，如果多的話，建議還是請求接口比較合理父組件：

<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>