table增强库，单元格选择、复制、粘贴、列拖拽、行拖拽，直接针对原生table做增强，不受各UI组件库限制，不受vue、react和angular等框架限制

六哥开源前后端脚手架

• https://gitee.com/lgx1992/lg-soar

六哥npm工具库

• lg.contextmenu 右键菜单
• lg.table-plus 表格增强
• lg.validator 数据校验
• lg.data 数据处理
• lg.format 格式化
• lg.cache 缓存

定义选中单元格样式

.lg-selected-top {
    border-top: 1px solid var(--copy-table-color, #2E5CF6) !important;
}
.lg-selected-bottom {
    border-bottom: 1px solid var(--copy-table-color, #2E5CF6) !important;
}
.lg-selected-left {
    border-left: 1px solid var(--copy-table-color, #2E5CF6) !important;
}
.lg-selected-right {
    border-right: 1px solid var(--copy-table-color, #2E5CF6) !important;
}
.lg-table-row-drag {
    cursor: grabbing;
    background: #f1f3f4;
}
.lg-table-col-drag {
    cursor: grabbing;
    background: #f1f3f4;
}

单元格复制到excel

import { useTableCopy } from 'lg.table-plus'

// 全局使用
useTableCopy()

// 范围使用
useTableCopy({
    el: document.getElementById('你的html元素id')
})

单元格粘贴（支持从excel复制粘贴）

import { useTablePaste } from 'lg.table-plus'

const data = ref([]);

useTablePaste<any>({
    getColumnKeys(): string[] {
        return ['a', 'b', 'c', 'd']
    },
    getRowData(): any[] {
        return data.value
    },
    onChange(rows: any[]) {
        data.value = rows;
    },
    errorHandler({ msg }) {
        alert(msg)
    }
})

行拖动

import { useRowDrag } from 'lg.table-plus'

const data = ref([]);

useRowDrag({
    getRowData() {
        return data.value
    },
    onChange(rows: any[]) {
        data.value = rows;
    },
});

列拖动

import { useColDrag } from 'lg.table-plus'

const colList = ref([]);

useColDrag({
    getColData() {
        return colList
    },
    onChange(cols: any[]) {
        colList = cols;
    },
})

全表复制到excel

import { copyTableToClipboard } from 'lg.table-plus'

// 不指定table，默认选中页面第一个table
function copyTable() {
    copyTableToClipboard()
}

// 指定table
function copyTable() {
    copyTableToClipboard({
        el: document.getElementById('tableId')
    })
}

复制文本到剪切板

import { copyToClipboard } from 'lg.table-plus'

copyToClipboard('你的文本')

事件添加和移除

import { addEventListener, removeEventListener } from 'lg.table-plus'


const listener = (e) => {
    // 事件处理代码
};

// 添加事件
addEventListener(document.getElementById('元素id'), 'click', listener)

// 移除事件
removeEventListener(document.getElementById('元素id'), 'click', listener)