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

子组件：

<template><div class="tableTool" ref="tableTool" @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></div>
</template>
<script>
export default {name: "tableCol",props: {ids: {type: Array},type: {type: String}},data() {return {keyword: "",checkAll: false,checkedList: [],options: [],isIndeterminate: true,allOptions: [],CheckboxArr: JSON.parse(localStorage.getItem('CheckboxArr')),c: [],elementObj: {},tableToolelSize: {},zishenkuandu: 0};},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, JSON.parse(this.$props.elementPosition), "传入的数据");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-checkbox:last-of-type {margin-right: none;
}
</style>

父组件：

<template><div class="home"><!-- <img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App" /> --><el-button @click="dialogVisible = true">求和</el-button><el-input v-model="searchValue"></el-input><el-steps :active="3" simple><el-step title="步骤 1" icon="el-icon-edit"></el-step><el-step title="步骤 2" icon="el-icon-upload"></el-step><el-step title="步骤 3" icon="el-icon-picture"></el-step></el-steps><el-table :data="tableData" height="250" border style="width: 100%;position: relative;" id="table1"><el-table-column prop="date" label="日期" width="180" align="center"><template v-slot:header><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'date')"></div><span class="table-heard-filter" style="color: red; font-weight: bold;">0</span></template></el-table-column><el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column> <el-table-column prop="name" label="姓名" width="120" align="center"><template v-slot:header><el-checkbox v-model="checked2" style="float: left;"></el-checkbox><div style="width: 20px;height: 20px;background: rebeccapurple;float: right;"@click.stop="filterData($event, 'name')"></div><span class="table-heard-filter">1</span></template></el-table-column></el-table><div v-if="showFilterTool" ref="popover" class="popover" :style="popoverStyle" style="position: absolute;"><TableTool ref="selectTool" @closeTool="closeTool" @saveSeach="saveSeach" :ids="ids" :type="type" /></div><i v-if="showFilterTool" class="el-icon-caret-top" :style="{ left: a + 'px', top: b + 20 + 'px' }"style="position: absolute;"></i><el-dialog title="提示" :visible.sync="dialogVisible" width="30%"><span slot="footer" class="dialog-footer"><span>{{ form.address }}</span><span>{{ form.name }}</span><span>{{ form.password }}</span><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button><el-button type="primary" @click="share(form)">复制</el-button><el-button type="primary"@click="printFnc('https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641', 'jpeg')">打印</el-button></span></el-dialog><div style="width: 200px;height: 20px;background: rebeccapurple;position: fixed;top: 20px;left:20px"ref="pageContainer" @click="filterData"></div></div>
</template><script>
import HelloWorld from '@/components/HelloWorld.vue'
import TableTool from '@/components/TableTool.vue'
import ColumnDialog from './ColumnDialog.vue'
import { Checkbox } from 'element-ui';
import watermark from '@/utils/watermark.js'
import printJS from 'print-js'
export default {name: 'HomeView',components: {HelloWorld,TableTool,ColumnDialog},computed: {popoverStyle() {return {left: this.popoverPosition.left + 'px',top: this.popoverPosition.top + 14 + 'px',};},},data() {return {a: "",b: "",popoverPosition: { left: 0, top: 0 },form: {address: "https://www.baidu.com/", // 地址信息name: "张三",password: "123",},isShow: false,dialogVisible: false,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.closeTableToolFnc()//添加水印// console.log(this.$refs.pageContainer);// watermark.set('1234567', '谁在花里胡哨', this.$refs.pageContainer)},beforeDestroy() {this.closeTableToolFnc()},methods: {// 判断是否是 IE 浏览器isIE() {if (window.ActiveXObject || "ActiveXObject" in window) {return true;} else {return false;}},share(url) {if (this.isIE()) {this.$copyText(this.form.password);// this.$refs.addressInput.select(); // 实现选中效果this.$message.success("复制成功!");} else {let obj = {'地址': this.form.address,'用户名': this.form.name,'密码': this.form.password}const objectString = JSON.stringify(obj);this.$copyText(objectString).then((res) => {// this.$refs.addressInput.select(); // 实现选中效果this.$message.success("复制成功!");}).catch((err) => {this.$message.error("该浏览器不支持自动复制, 请手动复制");})}},printFnc(url, filetype) {let path = urllet type = ''const acceptedFileTypes = ['png', 'jpeg', 'jpg', 'gif'];console.log(acceptedFileTypes.includes(filetype));if (acceptedFileTypes.includes(filetype)) {type = 'image'} else {type = filetype}printJS({printable: path,type: type,// showModal: true,//开启加载modalonErrorL: (err) => {return this.$message({type: "error",message: '打印失败，请检查打印机设置或尝试保存文件！'})}})},//子组件只用@click.stop防止事件冒泡，父组件单击任意位置关闭子组件closeTableToolFnc() {document.addEventListener("click", (e) => {this.closeTool()});},filterData(e, type) {this.type = typethis.showFilterTool = true;this.$nextTick(() => {const buttonRect = e.target.getBoundingClientRect();const popoverRect = this.$refs.popover.getBoundingClientRect();this.a = buttonRect.leftthis.b = buttonRect.topconsole.log(buttonRect.left);let leftPosition = buttonRect.left - (popoverRect.width - buttonRect.width) / 2;// 调整popover位置，防止超出可视范围if (leftPosition < 0) {leftPosition = 10;} else if (leftPosition + popoverRect.width > window.innerWidth) {leftPosition = window.innerWidth - popoverRect.width - 10;}this.popoverPosition = {left: leftPosition,top: buttonRect.bottom,};this.ids = []this.tableData.forEach(t => {this.ids.push(t.id)})this.showFilterTool = true;});},closeTool() {this.showFilterTool = false;},saveSeach(data) {this.tableData = []this.tableData = datathis.closeTool();},}}
</script>
<style>
.Tableone ::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {display: none
}.el-icon-caret-top {/* position: absolute; */color: #999;/* top: -13px; */font-size: 20px;}
</style>

效果：