使用Vue3实现一个可复制的表格
创始人
2024-05-26 08:53:54
0

前言

表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的。同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了。

最基础的表格封装

最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesigncolumns dataSource 这两个属性是必不可少的,代码如下:

import { defineComponent } from 'vue'
import type { PropType } from 'vue'interface Column {title: string;dataIndex: string;slotName?: string;
}
type TableRecord = Record;export const Table = defineComponent({props: {columns: {type: Array as PropType,required: true,},dataSource: {type: Array as PropType,default: () => [],},rowKey: {type: Function as PropType<(record: TableRecord) => string>,}},setup(props, { slots }) {const getRowKey = (record: TableRecord, index: number) => {if (props.rowKey) {return props.rowKey(record)}return record.id ? String(record.id) : String(index)}const getTdContent = ( text: any,record: TableRecord,index: number,slotName?: string ) => {if (slotName) {return slots[slotName]?.(text, record, index)}return text}return () => {return ({props.columns.map(column => {const { title, dataIndex } = columnreturn })}{props.dataSource.map((record, index) => {return ({props.columns.map((column, i) => {const { dataIndex, slotName } = columnconst text = record[dataIndex]return ()})})})}
{title}
{getTdContent(text, record, i, slotName)}
)}} })

需要关注一下的是 Column 中有一个 slotName 属性,这是为了能够自定义该列的所需要渲染的内容(在 AntDesign 中是通过 TableColumn 组件实现的,这里为了方便直接使用 slotName)。

实现复制功能

首先我们可以手动选中表格复制尝试一下,发现表格是支持选中复制的,那么实现思路也就很简单了,通过代码选中表格再执行复制命令就可以了,代码如下:

export const Table = defineComponent({props: {// ...},setup(props, { slots, expose }) {// 新增,存储table节点const tableRef = ref(null)// ...// 复制的核心方法const copy = () => {if (!tableRef.value) returnconst range = document.createRange()range.selectNode(tableRef.value)const selection = window.getSelection()if (!selection) returnif (selection.rangeCount > 0) {selection.removeAllRanges()}selection.addRange(range)document.execCommand('copy')}// 将复制方法暴露出去以供父组件可以直接调用expose({ copy })return (() => {return (// ...)}) as unknown as { copy: typeof copy } // 这里是为了让ts能够通过类型校验,否则调用`copy`方法ts会报错}
}) 

这样复制功能就完成了,外部是完全不需要关注如何复制的,只需要调用组件暴露出去的 copy 方法即可。

处理表格中的不可复制元素

虽然复制功能很简单,但是这也仅仅是复制文字,如果表格中有一些不可复制元素(如图片),而复制时需要将这些替换成对应的文字符号,这种该如何实现呢?

解决思路就是在组件内部定义一个复制状态,调用复制方法时把状态设置为正在复制,根据这个状态渲染不同的内容(非复制状态时渲染图片,复制状态是渲染对应的文字符号),代码如下:

export const Table = defineComponent({props: {// ...},setup(props, { slots, expose }) {const tableRef = ref(null)// 新增,定义复制状态const copying = ref(false)// ...const getTdContent = ( text: any,record: TableRecord,index: number,slotName?: string,slotNameOnCopy?: string ) => {// 如果处于复制状态,则渲染复制状态下的内容if (copying.value && slotNameOnCopy) {return slots[slotNameOnCopy]?.(text, record, index)}if (slotName) {return slots[slotName]?.(text, record, index)}return text}const copy = () => {copying.value = true// 将复制行为放到 nextTick 保证复制到正确的内容nextTick(() => {if (!tableRef.value) returnconst range = document.createRange()range.selectNode(tableRef.value)const selection = window.getSelection()if (!selection) returnif (selection.rangeCount > 0) {selection.removeAllRanges()}selection.addRange(range)document.execCommand('copy')// 别忘了把状态重置回来copying.value = false})}expose({ copy })return (() => {return (// ...)}) as unknown as { copy: typeof copy }}
}) 

测试

最后我们可以写一个demo测一下功能是否正常,代码如下:

 

附上完整代码:

import { defineComponent, ref, nextTick } from 'vue'
import type { PropType } from 'vue'interface Column {title: string;dataIndex: string;slotName?: string;slotNameOnCopy?: string;
}
type TableRecord = Record;export const Table = defineComponent({props: {columns: {type: Array as PropType,required: true,},dataSource: {type: Array as PropType,default: () => [],},rowKey: {type: Function as PropType<(record: TableRecord) => string>,}},setup(props, { slots, expose }) {const tableRef = ref(null)const copying = ref(false)const getRowKey = (record: TableRecord, index: number) => {if (props.rowKey) {return props.rowKey(record)}return record.id ? String(record.id) : String(index)}const getTdContent = ( text: any,record: TableRecord,index: number,slotName?: string,slotNameOnCopy?: string ) => {if (copying.value && slotNameOnCopy) {return slots[slotNameOnCopy]?.(text, record, index)}if (slotName) {return slots[slotName]?.(text, record, index)}return text}const copy = () => {copying.value = truenextTick(() => {if (!tableRef.value) returnconst range = document.createRange()range.selectNode(tableRef.value)const selection = window.getSelection()if (!selection) returnif (selection.rangeCount > 0) {selection.removeAllRanges()}selection.addRange(range)document.execCommand('copy')copying.value = false})}expose({ copy })return (() => {return ({props.columns.map(column => {const { title, dataIndex } = columnreturn })}{props.dataSource.map((record, index) => {return ({props.columns.map((column, i) => {const { dataIndex, slotName, slotNameOnCopy } = columnconst text = record[dataIndex]return ()})})})}
{title}
{getTdContent(text, record, i, slotName, slotNameOnCopy)}
)}) as unknown as { copy: typeof copy }} })

最后

最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

相关内容

热门资讯

摸摸你的腰mp3 摸摸你的腰mp3摸摸你的腰mp3... 摸摸你的腰mp3 展开 好多水我摸摸你的头好温柔,我...
最近书荒啊,谁有没有好看的言情... 最近书荒啊,谁有没有好看的言情小说介绍一些啊!不配【有三部】,赶夫上轿【轻松】,南风过境【宠文】,花...
金饰克价再次涨至1000元!黄... 本文来自微信公众号“大象新闻”6月30日,现货黄金盘中一度跌至一个月内新低,随后开始大幅反弹,收报3...
西安警方回应“中华田园犬禁养”... 6月30日,网传陕西省西安市公安局限制养犬管理办公室发布的“重点限养区禁止饲养烈性犬和大型犬”图片引...
小学生常常以教师的行为为榜样,... 小学生常常以教师的行为为榜样,教师也处处表现出对表现好的学生的喜爱和认可,学生从中获得派生地位。这种...
香港维持对日本水产进口管制 作者 | 《财经》特派香港记者 焦建 编辑 | 苏琦  日本水产及日式料理多年来受港人追捧,日本水产...
成都先导终止收购海纳医药65%... 6月30日,成都先导药物开发股份有限公司(以下简称“成都先导”)宣布,因未能就交易事项的核心条款达成...
11岁女孩身高137cm,警惕...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会! 转自:医学界*仅供医...
《勇气》阅读题理解 《勇气》阅读题理解 19世纪,在英国的名门公立学校—哈罗学校常常会出现以强凌弱、以大欺小的事情。...
建设银行再创历史新高!牵手“山...   炒股就看金麒麟分析师研报,权威,专业,及时,全面,助您挖掘潜力主题机会!   中国基金报记者 ...