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>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3224340.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

68.SAP FICO - 记账码学习

目录 定义 用途 配置步骤 定义记账码 - OB41 配置会计科目类型 在会计中&#xff0c;“借”和“贷”是记账符号&#xff0c;代表了记账的方向。而在SAP中却没有大家熟知的记账符号“借”和“贷”&#xff0c;那SAP中如何录入凭证呢&#xff1f;其实&#xff0c;SA…

Redis代替Session实现共享

集群的session共享问题 session共享问题&#xff1a;多台tomcat并不共享session存储空间&#xff0c;当请求切换到不同的tomcat服务时导致数据丢失的问题。 session的替代方案&#xff1a; 数据共享内存存储key、value结构 将redis替换session可以解决session共享问题

大数据基础:Hadoop之HDFS重点架构原理

文章目录 Hadoop之HDFS重点架构原理 一、什么是Hadoop 二、HDFS简介 三、HDFS架构 3.1、NameNode 3.2、SecondaryNameNode 3.3、DataNode 3.4、Client 四、fsimage和editslog合并 五、Block副本放置策略 六、读写流程 6.1、HDFS写文件流程 6.2、HDFS读文件流程 Ha…

tk 文本生成器

import random import tkinter as tk import ttkbootstrap as ttk from tkinter import messagebox import pyperclipdef wenben_run():def generate_text(original_text, length):# 去掉原始文本中的换行符和空格original_text original_text.replace(\n, )original_text or…

全面助力巴西slot游戏包推广本土网盟dsp流量广告优势

全面助力巴西slot游戏包推广本土网盟dsp流量广告优势 在巴西这片充满活力的土地上&#xff0c;电子游戏市场蓬勃发展&#xff0c;成为娱乐产业的重要组成部分。随着网络技术的不断进步和移动互联网的普及&#xff0c;巴西玩家对于电子游戏的热情愈发高涨&#xff0c;游戏市场呈…

java算法day9

232.用栈实现队列 用队列实现栈 有效的括号 删除字符串中的所有相邻重复项 逆波兰表达式求值 解决栈和队列的基本数据结构 Queue&#xff08;队列&#xff09; 在java中是一个接口。定义的方法&#xff1a; //boolean add(E e): 将指定的元素插入此队列&#xff08;如果…

研华工控机 UNO-2473G WIN7专业版系统下安装网卡驱动异常

基本配置&#xff1a;UNO-2473G、Windows 7 Pro 64bit 常规型嵌入式工控机&#xff0c;搭配Intel Atom™ E3845/Celeron J1900 处理器 第四代Intel Atom/Celeron J1900处理器&#xff0c;最高可达1.91/2.0 GHz&#xff0c;4GB DDR3L存储4/2 x GbE, 3 x USB 2.01 x USB 3.0或4…

OZON生活家居用品爆款新品

OZON生活家居用品爆款新品涵盖了多个方面&#xff0c;这些产品不仅满足了消费者对生活品质的追求&#xff0c;也反映了当前市场的热门趋势。以下是一些在OZON平台上备受关注的生活家居用品爆款新品&#xff1a; OZON生活家居用品爆款新品工具&#xff1a;D。DDqbt。COm/74rD T…

哪里有主机游戏店收费系统,佳易王电玩ps5ps4计时计费系统操作教程

哪里有主机游戏店收费系统&#xff0c;佳易王电玩ps5ps4计时计费系统操作教程 以下软件操作教程以&#xff0c;佳易王计时计费管理系统为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 一、软件程序图文讲解 1、主机游戏计时软件、电玩店计费软…

如何解决群晖Docker注册表查询失败/无法拉取镜像等问题

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 问题概述 📒📒 解决方案 📒🔖 方法一🔖 方法二🔖 方法三⚓️ 相关链接 🚓️📖 介绍 📖 在群晖(Synology)NAS设备上使用Docker时,我们可能会遇到查询Docker注册表失败,无法拉取Docker镜像的问题。这种情况…

Error:sql: expected 1 arguments, got 2

一 背景 在测试一个API接口时&#xff0c;看到日志里面突然抛出一个错误&#xff1a;Error:sql: expected 1 arguments, got 2 看了下&#xff0c;对应的表里面是有相关数据的&#xff0c;sql语句放在mysql里面执行也是没问题&#xff01;那奇了怪了&#xff0c;为啥会产生这样…

商业地产规划vr实景还原系统更直观生动

在今日的建筑行业论坛中&#xff0c;众多业界专家深入探讨了建筑设计与展示的未来趋势。我们作为VR建筑展示领域的领军企业&#xff0c;始终秉持着对城市规划与发展的深度思考。多年来&#xff0c;我们积极参与并助力了无数城市片区的规划与建设。 回首2015年&#xff0c;我们与…

工业一体机为数字化工厂带来高效作业指导

随着工业4.0的浪潮席卷全球&#xff0c;数字化工厂的概念深入人心。在这一背景下&#xff0c;工业一体机作为数字化转型的重要一环&#xff0c;凭借其强大的功能和灵活的应用&#xff0c;为工厂实现高效作业指导提供了强大的助力。 一、工业一体机的优势&#xff1a;赋能数字化…

记录在Windows上安装Docker

在Windows上安装Docker时&#xff0c;可以选择使用不同的后端。 其中两个常见的选择是&#xff1a;WSL 2&#xff08;Windows Subsystem for Linux 2&#xff09;和 Hyper-V 后端。此外&#xff0c;还可以选择使用Windows容器。 三者的区别了解即可&#xff0c;推荐用WSL 2&…

汇川CodeSysPLC教程03-2-14 与HMI通信

硬件连接 PLC与HMI连接采用何种连接方式&#xff0c;通常是参考双方支持哪些接口。PLC&#xff08;可编程逻辑控制器&#xff09;与HMI&#xff08;人机界面&#xff09;之间的通讯方式主要有以下几种&#xff1a; 串行通讯&#xff08;Serial Communication&#xff09;&…

NVIDIA RTX 4090解析:卓越的性能表现带来全新的AI探索高度

前言 NVIDIA GeForce RTX 4090 在性能、效率和 AI 驱动的图形领域实现了质的飞跃。这款 GPU 采用 NVIDIA Ada Lovelace 架构&#xff0c;配备 24 GB 的 GDDR6X 显存。此外&#xff0c;RTX 4090还引入了多项创新技术。例如&#xff0c;它支持 DirectX12Ultimate&#xff0c;能够…

Linux基本命令的使用示例

目录 1实现效果&#xff1a;在downloads目录下创建1个空文件夹empty&#xff0c;创建1个空文件lake.txt&#xff0c;输入任意数据保存后退出 2实现效果&#xff1a;搜索包含关键字"泉眼"的行 3实现效果&#xff1a;重命名文件夹empty为full&#xff0c;复制文件cc…

利用 Python 解析pcap文件

1、问题背景 当面对处理网络数据包分析时&#xff0c;pcap文件作为一个常见的文件格式存储了网络数据包的详细记录&#xff0c;它常常被用来进行网络故障排查或安全分析。为了充分利用这些数据&#xff0c;我们需要对其进行解析并提取出有价值的信息&#xff0c;例如数据包类型…

AI自动生成PPT怎么用?5种提升演示效果的方法

随着#7月份我的同事一个个消失了#的话题热议&#xff0c;职场中的效率与变革再次成为焦点。 在忙碌的工作节奏中&#xff0c;AI自动生成PPT的软件悄然兴起&#xff0c;成为不少职场人的新宠。它们不仅简化了繁琐的PPT制作流程&#xff0c;更以高效、专业的姿态&#xff0c;助力…

Word文件打开密码设置:掌握这两种方法,保护你的文档安全

在日常工作和学习中&#xff0c;我们经常会使用Microsoft Word来创建和编辑文档。有时候&#xff0c;为了保护文档内容不被未经授权的人员查看或修改&#xff0c;我们通常会采用加密的方式来增加其安全性。那么Word文档怎么加密&#xff1f; 方法一&#xff1a;使用Word软件内置…