Vue table 一個簡單實用的 vue table 組件

gitee
githubhtml

雖然不知道有什麼用,但仍是很是感謝碼雲的承認git

圖片描述

功能點

  • 基礎
  • 尺寸
  • 斑馬線條紋
  • 帶邊框
  • 單元格樣式
  • 列寬拖動
  • 流體高度
  • 固定表頭
  • 固定列
  • 固定表頭和列
  • 表頭分組
  • 序號
  • 單選
  • 多選
  • 排序
  • 篩選
  • 合併行或列
  • 表尾合計
  • 導出 CSV
  • 顯示/隱藏列
  • 加載中
  • 格式化內容
  • 自定義模板
  • 快捷菜單
  • 虛擬滾動
  • 展開行
  • 樹形表格
  • 可編輯表格
  • 數據校驗
  • 數據代理
  • 全鍵盤操做

例子

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="index" 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-05-01',
          address: 'address abc123'
        }
      ]
    }
  }
}
</script>
相關文章
相關標籤/搜索