推荐 vue 最好用非常强大表格组件 vxe-table，vue 哪个表格组件好用

摘要

vxe-table 是一个全功能 vue 表格库，非常强大的功能基本可以满足对表格对表格的一切需求。不管是普通列表，大数据列表。可编辑表格，数据校验、Excel 单元格选择、复制粘贴等。。。

vxe-table 是一个全功能 vue 表格库，非常强大的功能基本可以满足对表格对表格的一切需求。不管是普通列表，大数据列表。可编辑表格，数据校验、Excel 单元格选择、复制粘贴等。。。

官网：https://vxetable.cn
gitee

安装

npm install vxe-pc-ui@4.3.5 vxe-table@4.9.6 

 // ... import VxeUI from 'vxe-pc-ui' import 'vxe-pc-ui/lib/style.css' import VxeUITable from 'vxe-table' import 'vxe-table/lib/style.css' // ...  createApp(App).use(VxeUI).use(VxeUITable).mount('#app') // ... 

基础使用

<template>   <div>     <vxe-table       :data="tableData">       <vxe-column type="seq" width="70"></vxe-column>       <vxe-column field="name" title="Name"></vxe-column>       <vxe-column field="sex" title="Sex"></vxe-column>       <vxe-column field="age" title="Age"></vxe-column>     </vxe-table>   </div> </template>  <script> export default {   data () {     const tableData = [       { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },       { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },       { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },       { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }     ]     return {       tableData     }   } } </script> 

部分功能预览

普通列表

排序

筛选

冻结列

列标题提示

单选

多选

单元格合并

表尾合计

行拖拽

列拖拽

自定义列

右键菜单

树结构

数据分页

可编辑单元格

可编辑数据校验

复选框鼠标滑动选择

打印表格

复杂筛选

单元格选项

多重区域选择

Excel 复制粘贴

查找与替换

单元格图表

集成图表

github https://github.com/x-extends/vxe-table