vxe-table vue 一個 PC 端表格解決方案，大數據表格

vxe-table vue 一個 PC 端表格解決方案，大數據表格

vxe-table 一個基於vue的表格組件，支持增刪改查、虛擬滾動、懶加載、快捷菜單、數據校驗、樹形結構、打印導出、表單渲染、數據分頁、模態窗口、自定義模板、賊靈活的配置項、豐富的擴展插件等...

查看 gitee

功能點

• 基礎表格
• 高級表格
• 斑馬線條紋
• 多種邊框
• 單元格樣式
• 列寬拖動
• 最大高度
• 自適應寬高
• 固定列
• 多級表頭
• 表尾數據
• 高亮行或列
• 序號
• 單選框
• 複選框
• 下拉選項
• 開關
• 排序
• 篩選
• 合併單元格
• 合併表尾
• 導入/導出/打印
• 顯示/隱藏列
• 加載中
• 格式化內容
• 自定義插槽 - 模板
• 快捷菜單
• 展開行
• 分頁
• 表單
• 工具欄
• 下拉容器
• 虛擬列表
• 增刪改查
• 樹表格
• 數據校驗
• 數據代理
• 鍵盤導航
• 模態窗口
• 渲染器
• 虛擬滾動
• 虛擬合併
• 單元格區域選取
• 單元格複製/粘貼

例子

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="Name"></vxe-table-column>
      <vxe-table-column field="date" title="Date"></vxe-table-column>
      <vxe-table-column field="address" title="Address"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'test1', sex: 'Man', date: '2019-01-01', address: 'address1' },
        { id: 10002, name: 'test2', sex: 'Man', date: '2019-05-10', address: 'address2' },
        { id: 10003, name: 'test3', sex: 'Man', date: '2019-10-20', address: 'address3' },
        { id: 10004, name: 'test4', sex: 'Man', date: '2019-07-12', address: 'address4' }
      ]
    }
  }
}
</script>