UNPKG

vxe-table-select-area

Version:

一个基于 vxe-table 的可区域选中复制、粘贴的组件

126 lines (103 loc) 2.81 kB
# vxe-table-select-area ## 浏览器支持 ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) --- | --- | --- | --- | --- | --- | 11+ ✔ | 80+ ✔ | 80+ ✔ | 90+ ✔ | 75+ ✔ | 10+ ✔ | ## 功能点 * [x] 基础表格 * [x] 高级表格 * [x] 斑马线条纹 * [x] 多种边框 * [x] 单元格样式 * [x] 列宽拖动 * [x] 最大高度 * [x] 自适应宽高 * [x] 固定列 * [x] 多级表头 * [x] 表尾数据 * [x] 高亮行或列 * [x] 序号 * [x] 单选框 * [x] 复选框 * [x] 下拉选项 * [x] 开关 * [x] 排序 * [x] 多字段排序 * [x] 筛选 * [x] 合并单元格 * [x] 合并表尾 * [x] 导入/导出/打印 * [x] 显示/隐藏列 * [x] 加载中 * [x] 格式化内容 * [x] 自定义插槽 - 模板 * [x] 快捷菜单 * [x] 展开行 * [x] 分页 * [x] 表单 * [x] 工具栏 * [x] 下拉容器 * [x] 虚拟列表 * [x] 虚拟树 * [x] 增删改查 * [x] 数据校验 * [x] 数据代理 * [x] 键盘导航 * [x] 弹窗 * [x] 渲染器 * [x] 虚拟滚动 * [x] 虚拟合并 * [x] (pro) 单元格区域选取 * [x] (pro) 单元格复制/粘贴 * [x] (pro) 单元格查找和替换 ### npm ```javascript import Vue from 'vue' import VXETable from 'vxe-table-select-area' import 'vxe-table-select-area/lib/style.css' Vue.use(VXETable) ``` ## 示例 ```html <template> <div> <vxe-table :data="tableData"> <vxe-column type="seq" title="Seq" width="60"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-colgroup title="Group1"> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="address" title="Address"></vxe-column> </vxe-colgroup> </vxe-table> </div> </template> <script> export default { data () { return { tableData: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' } ] } } } </script> ``` ## 文档 ## 运行项目 安装依赖 ```shell npm run update ``` 启动本地调试 ```shell npm run serve ``` 编译打包,生成编译后的目录:lib ```shell npm run lib ``` ## License [MIT](LICENSE) © 2023-present, zt