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

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