import { definecomponent } from 'vue'import type { proptype } from 'vue'interface column { title: string; dataindex: string; slotname?: string;}type tablerecord = record<string, unknown>;export const table = definecomponent({ props: { columns: { type: array as proptype<column[]>, required: true, }, datasource: { type: array as proptype<tablerecord[]>, 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 ( <table> <tr> {props.columns.map(column => { const { title, dataindex } = column return <th key={dataindex}>{title}</th> })} </tr> {props.datasource.map((record, index) => { return ( <tr key={getrowkey(record, index)}> {props.columns.map((column, i) => { const { dataindex, slotname } = column const text = record[dataindex] return ( <td key={dataindex}> {gettdcontent(text, record, i, slotname)} </td> ) })} </tr> ) })} </table> ) } }})
需要关注一下的是 column 中有一个 slotname 属性，这是为了能够自定义该列的所需要渲染的内容（在 antdesign 中是通过 tablecolumn 组件实现的，这里为了方便直接使用 slotname）。
实现复制功能首先我们可以手动选中表格复制尝试一下，发现表格是支持选中复制的，那么实现思路也就很简单了，通过代码选中表格再执行复制命令就可以了，代码如下：
export const table = definecomponent({ props: { // ... }, setup(props, { slots, expose }) { // 新增，存储table节点 const tableref = ref<htmltableelement | null>(null) // ... // 复制的核心方法 const copy = () => { if (!tableref.value) return const range = document.createrange() range.selectnode(tableref.value) const selection = window.getselection() if (!selection) return if (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<htmltableelement | null>(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) return const range = document.createrange() range.selectnode(tableref.value) const selection = window.getselection() if (!selection) return if (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测一下功能是否正常，代码如下：
<template> <button @click="handlecopy">点击按钮复制表格</button> <c-table :columns="columns" :data-source="datasource" border="1" ref="table" > <template #status> <img class="status-icon" :src="arrowupicon" /> </template> <template #statusoncopy> → </template> </c-table></template><script setup lang="ts">import { ref } from 'vue'import { table as ctable } from '../components'import arrowupicon from '../assets/arrow-up.svg'const columns = [ { title: '序号', dataindex: 'serial' }, { title: '班级', dataindex: 'class' }, { title: '姓名', dataindex: 'name' }, { title: '状态', dataindex: 'status', slotname: 'status', slotnameoncopy: 'statusoncopy' }]const datasource = [ { serial: 1, class: '三年级1班', name: '张三' }, { serial: 2, class: '三年级2班', name: '李四' }, { serial: 3, class: '三年级3班', name: '王五' }, { serial: 4, class: '三年级4班', name: '赵六' }, { serial: 5, class: '三年级5班', name: '宋江' }, { serial: 6, class: '三年级6班', name: '卢俊义' }, { serial: 7, class: '三年级7班', name: '吴用' }, { serial: 8, class: '三年级8班', name: '公孙胜' },]const table = ref<instancetype<typeof ctable> | null>(null)const handlecopy = () => { table.value?.copy()}</script><style scoped>.status-icon { width: 20px; height: 20px;}</style>
附上完整代码：
import { definecomponent, ref, nexttick } from 'vue'import type { proptype } from 'vue'interface column { title: string; dataindex: string; slotname?: string; slotnameoncopy?: string;}type tablerecord = record<string, unknown>;export const table = definecomponent({ props: { columns: { type: array as proptype<column[]>, required: true, }, datasource: { type: array as proptype<tablerecord[]>, default: () => [], }, rowkey: { type: function as proptype<(record: tablerecord) => string>, } }, setup(props, { slots, expose }) { const tableref = ref<htmltableelement | null>(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 = true nexttick(() => { if (!tableref.value) return const range = document.createrange() range.selectnode(tableref.value) const selection = window.getselection() if (!selection) return if (selection.rangecount > 0) { selection.removeallranges() } selection.addrange(range) document.execcommand('copy') copying.value = false }) } expose({ copy }) return (() => { return ( <table ref={tableref}> <tr> {props.columns.map(column => { const { title, dataindex } = column return <th key={dataindex}>{title}</th> })} </tr> {props.datasource.map((record, index) => { return ( <tr key={getrowkey(record, index)}> {props.columns.map((column, i) => { const { dataindex, slotname, slotnameoncopy } = column const text = record[dataindex] return ( <td key={dataindex}> {gettdcontent(text, record, i, slotname, slotnameoncopy)} </td> ) })} </tr> ) })} </table> ) }) as unknown as { copy: typeof copy } }})
以上就是如何用vue3实现可复制表格的详细内容。