找回密码
 立即注册
首页 业界区 业界 推荐 vue 最好用非常强大表格组件 vxe-table,vue 哪个 ...

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

计海龄 5 天前
vxe-table 是一个全功能 vue 表格库,非常强大的功能基本可以满足对表格对表格的一切需求。不管是普通列表,大数据列表。可编辑表格,数据校验、Excel 单元格选择、复制粘贴等。。。
官网:https://vxetable.cn
gitee
安装
  1. npm install vxe-pc-ui@4.3.5 vxe-table@4.9.6
复制代码
  1. // ...
  2. import VxeUI from 'vxe-pc-ui'
  3. import 'vxe-pc-ui/lib/style.css'
  4. import VxeUITable from 'vxe-table'
  5. import 'vxe-table/lib/style.css'
  6. // ...
  7. createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
  8. // ...
复制代码
基础使用
  1. <template>
  2.   
  3.     <vxe-table
  4.       :data="tableData">
  5.       <vxe-column type="seq" width="70"></vxe-column>
  6.       <vxe-column field="name" title="Name"></vxe-column>
  7.       <vxe-column field="sex" title="Sex"></vxe-column>
  8.       <vxe-column field="age" title="Age"></vxe-column>
  9.     </vxe-table>
  10.   
  11. </template>
复制代码
部分功能预览

普通列表

1.png

排序

2.png

筛选

3.png

冻结列

4.png

列标题提示

5.png

6.png

单选

7.png

多选

8.png

单元格合并

9.png

表尾合计

10.png

行拖拽

11.gif

列拖拽

12.gif

自定义列

13.gif

右键菜单

14.png

树结构

15.png

数据分页

16.png

可编辑单元格

17.png

18.png

可编辑数据校验

19.png

复选框鼠标滑动选择

20.gif

打印表格

21.gif

复杂筛选

22.gif

23.gif

单元格选项

24.gif

多重区域选择

25.gif

Excel 复制粘贴

26.gif

查找与替换

27.gif

单元格图表

28.png

29.png

集成图表

30.gif

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

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
您需要登录后才可以回帖 登录 | 立即注册