vxe-table vue table 一个非常强大表格组件

一个功能更加强大的 Vue 表格组件
查看 vxe-table

功能点

• 基础
• 尺寸
• 斑马线条纹
• 带边框
• 单元格样式
• 列宽拖动
• 流体高度
• 固定表头
• 固定列
• 固定表头和列
• 表头分组
• 序号
• 单选
• 多选
• 排序
• 筛选
• 合并行或列
• 表尾合计
• 导出 CSV
• 显示/隐藏列
• 加载中
• 格式化内容
• 自定义模板
• 快捷菜单
• 滚动渲染
• 展开行
• 树形表格
• 可编辑表格
• 数据校验
• 全键盘操作
• Excel 表格

例子

<template>  <div>    <vxe-table ref="xTable" :data.sync="tableData">      <vxe-table-column type="index" width="60"></vxe-table-column>      <vxe-table-column prop="name" label="Name"></vxe-table-column>      <vxe-table-column prop="date" label="Date"></vxe-table-column>      <vxe-table-column prop="address" label="Address"></vxe-table-column>    </vxe-table>  </div></template><script>export default {  data () {    return {      tableData: [        {          id: 10001,          name: 'test1',          sex: 'Man',          date: '2019-05-01',          address: 'address abc123'        }      ]    }  }}</script>