封装表头筛选组件并且不影响table的原有功能

1,组件代码

<template>

<div ref="vtable" class="relative">

<slot name="content"> </slot>

<a-popover

v-model:visible="popoverVisible"

trigger="click"

placement="bottomRight"

class="popover"

:overlay-inner-style="{

maxHeight: `${elementBottomHeight}vw`,

overflowY: 'auto',

}"

>

<template #content>

<div

v-for="(col, index) in allColumns"

:key="index"

class="checkbox-wrapper table-format"

>

<span v-show="col.show"> {{ col.title }}</span>

<a-switch

v-show="col.show"

v-model:checked="col.open"

size="small"

@change="toggleColumnVisibility"

/>

</div>

</template>

<template #title>

<h1>表头设置</h1>

<hr />

<br />

<a-input placeholder="搜索添加更多字段" @input="search">

<template #prefix>

<SearchOutlined />

</template>

</a-input>

</template>

<FunnelPlotOutlined ref="funnelIconRef" class="icon" />

</a-popover>

</div>

<div ref="stickyElementRef" class="sticky"></div>

</template>

<script lang="ts" setup>

import { FunnelPlotOutlined, SearchOutlined } from '@ant-design/icons-vue'

import { inject } from 'vue'

const elementBottomHeight = ref(0)

const popoverVisible = ref(false)

const vtable = ref(null)

const stickyElementRef = ref(null)

let columns = inject('columns') as any[]

let code = columns[0].code

let allColumns: any

// 开关控制表头显示隐藏,为open为true的返回给columns

const toggleColumnVisibility = () => {

const filteredColumns = Object.values(allColumns).filter(col => col.open)

columns.splice(0, columns.length, ...filteredColumns)

localStorage.setItem(code, JSON.stringify(allColumns))

}

const searchShow = () => {

allColumns.forEach((ele: any) => {

ele.show = true

})

}

// 查询表头方法

const search = (event: Event) => {

const inputValue = (event.target as HTMLInputElement).value

const keyword = inputValue.trim().toLowerCase()

if (keyword) {

allColumns.forEach((ele: any) => {

ele.show = ele.title.toLowerCase().includes(keyword) ? true : false

})

} else {

allColumns.forEach((ele: any) => {

ele.show = ele.title.toLowerCase().includes(keyword) ? true : false

})

}

}

onMounted(() => {

// 优先加载本地数据要不然会影响列表的显示

loadInitialVisibleColumns()

// 加载了本地的数据之后,调用一次开关控制隐藏的方法,对表头为true的返回给表头

toggleColumnVisibility()

// 进来的时候对查询的数据进行赋值,让开关的v-show属性全部设为true

searchShow()

// a-popover的动态高度

nextTick(() => {

calculateStickyPosition()

})

})

// 计算并设置 sticky 元素的顶部位置的函数

const calculateStickyPosition = () => {

const funnelIconRect = vtable.value.getBoundingClientRect()

const stickyRect = stickyElementRef.value.getBoundingClientRect()

// 计算 FunnelPlotOutlined 图标和 sticky 元素之间的距离

const distance = Math.abs(funnelIconRect.top - stickyRect.top)

console.log(distance)

elementBottomHeight.value = (distance / 1920) * 100

console.log(elementBottomHeight.value)

}

window.addEventListener('resize', calculateStickyPosition)

// 本地获取表头

const loadInitialVisibleColumns = () => {

let storedColumns = localStorage.getItem(code)

if (storedColumns) {

let parsedColumns = JSON.parse(storedColumns)

if (Array.isArray(parsedColumns)) {

allColumns = reactive(parsedColumns)

} else {

allColumns = reactive(Object.values(parsedColumns))

}

} else {

allColumns = reactive([...unref(inject('columns') as any[])])

}

}

</script>

<style lang="scss">

.table-format {

display: flex;

justify-content: space-between;

margin-bottom: 10px;

}

.sticky {

position: fixed;

bottom: 0px;

border: 1px solid #000;

width: 100%;

opacity: 0;

}

.icon {

position: absolute;

right: 15px;

top: 3px;

}

</style>

2,使用方式

在需要的地方

只需要套起来

在表头的地方多添加两个字段

和子组件数据共享

相关推荐
木木黄木木15 分钟前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
美食制作家18 分钟前
【无标题】Threejs第一个3D场景
javascript·three
JavaEdge.20 分钟前
ssl.SSLCertVerificationError报错解决方案
网络·网络协议·ssl
kfepiza27 分钟前
`accept_ra` 和 `autoconf` 和 `forwarding` 的关系 笔记250404
linux·网络·笔记·tcp/ip·智能路由器·ip·tcp
郁大锤39 分钟前
Flask与 FastAPI 对比:哪个更适合你的 Web 开发?
前端·flask·fastapi
HelloRevit1 小时前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
小宁爱Python2 小时前
Python从入门到精通4:计算机网络及TCP网络应用程序开发入门指南
网络·python·tcp/ip·计算机网络
ohMyGod_1232 小时前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day2 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
发财哥fdy2 小时前
4.2-3 fiddler抓取手机接口
网络