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>