基于Vue開源的高效復雜表格解決方案-「vxe-ta

基于Vue開源的高效復雜表格解決方案-「vxe-table」

景

在目前大多數情況下，越來越多擁有開發團隊的公司使用Vue作為他們的前端開發框架，我們不得不承認Vue這種模式在很多地方是優于傳統項目的，但是相信很多人會和筆者一樣，在使用過程中，事物總不是想象中那么美好，其中有一項就和今天的主角有關，在組件方面，以往jQuery的方式存在大量的第三方組件，能應對很多復雜的業務場景，就比如表格組件。雖然普通的表格能滿足普通的開發需求，但是遇到復雜的就會顯得捉襟見肘，今天就來說一說在Vue中相當好用的一個表格組件——vxe-table！

開源倉庫（MIT）

一個基于 vue 的 PC 端表格組件，支持增刪改查、虛擬滾動、懶加載、快捷菜單、數據校驗、樹形結構、打印導出、表單渲染、數據分頁、虛擬列表、模態窗口、自定義模板、渲染器、非常靈活的配置項、擴展接口等...

https://github.com/xuliangzhan/vxe-table（1.9k）
https://gitee.com/xuliangzhan_admin/vxe-table（800+k）

功能

目前vxe-table已經來到3.x版本，以下是文檔中所說明的功能，可以說是非常豐富了，基本上滿足大多數復雜業務場景（比如說大型ERP系統，對于表格要求非常高的場景）

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

組件模塊

以下是其核心組件模塊，且可以和國內主流組件框架適配

核心 (表格)
可選模塊（圖標）、（表頭）、（表尾）、（篩選）、（提示信息）、（快捷菜單）、（導出）、（按鍵導航）
可選組件（高級表格）、（靜態列）、（虛擬列表）、（表單）、（分頁）、（工具欄）（復選框）、（單選框）、（輸入框）、（下拉框）、（開關）、（模態窗口）、（按鈕）（下拉容器）
可選插件增強插件 (PDF 導出插件) 、(XLSX 導出插件) 、(快捷菜單插件)
適配插件 (element-ui 適配插件)、 (iview 適配插件)、 (ant-design-vue 適配插件)

安裝配置

vex-table依賴庫：vue 2.6+, xe-utils 2.4+，根據習慣使用npm或者yarn

npm install xe-utils vxe-table

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="排序" width="60"></vxe-table-column>
      <vxe-table-column field="name" title="姓名"></vxe-table-column>
      <vxe-table-column field="sex" title="性別"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

兼容性

在3.0版本及以后不再支持IE，2.0以及之前版本支持所有主流瀏覽器

總結

vxe-table確實是一個非常不錯的表格組件，而且一直在不斷的更新優化維護，感興趣的小伙伴們可以直達倉庫或者文檔，伴有詳細的使用指南和文檔說明，開源不易，小伙伴們可以多多支持開發者，enjoy it！

lt;table>元素是HTML中最復雜的結構之一。要想創建表格，一般都必須涉及表示表格行、單元格、表頭等方面的標簽。由于涉及的標簽多，因而使用核心DOM方法創建和修改表格往往都免不了要編寫大量的代碼。假設我們要使用DOM來創建下面的HTML表格。
<table border="1" width="100%">
<tbody>
<tr>
<td>Cell 1,1</td>
<td>Cell 2,1</td>
</tr>
<tr>
<td>Cell 1,2</td>
<td>Cell 2,2</td>
</tr>
</tbody>
</table>

要使用核心DOM方法創建這些元素，得需要像下面這么多的代碼：
//創建table
var table=document.createElement("table");
table.border=1;
table.width="100%";

//創建tbody
var tbody=document.createElement("tbody");
table.appendChild(tbody);

//創建第一行
var row1=document.createElement("tr");
tbody.appendChild(row1);
var cell1_1=document.createElement("td");
cell1_1.appendChild(document.createTextNode("Cell 1,1"));
row1.appendChild(cell1_1);
var cell2_1=document.createElement("td");
cell2_1.appendChild(document.createTextNode("Cell 2,1"));
row1.appendChild(cell2_1);

//創建第二行
var row2=document.createElement("tr");
tbody.appendChild(row2);
var cell1_2=document.createElement("td");
cell1_2.appendChild(document.createTextNode("Cell 1,2"));
row2.appendChild(cell1_2);
var cell2_2=document.createElement("td");
cell2_2.appendChild(document.createTextNode("Cell 2,2"));
row2.appendChild(cell2_2);

//將表格添加到文檔主體中
document.body.appendChild(table);

顯然，DOM代碼很長，還有點不太好懂。為了方便構建表格，HTML DOM還為<table>、<tbody>和<tr>元素添加了一些屬性和方法。
為元素添加的屬性和方法如下。

caption：保存著對<caption>元素（如果有）的指針。
tBodies：是一個<tbody>元素的HTMLCollection。
tFoot：保存著對<tfoot>元素（如果有）的指針。
tHead：保存著對<thead>元素（如果有）的指針。
rows：是一個表格中所有行的HTMLCollection。

createTHead()：創建<thead>元素，將其放到表格中，返回引用。
createTFoot()：創建<tfoot>元素，將其放到表格中，返回引用。
createCaption()：創建<caption>元素，將其放到表格中，返回引用。
deleteTHead()：刪除<thead>元素。
deleteTFoot()：刪除<tfoot>元素。
deleteCaption()：刪除<caption>元素。
deleteRow(_pos_)：刪除指定位置的行。
insertRow(_pos_)：向rows集合中的指定位置插入一行。
為<tbody>元素添加的屬性和方法如下。
rows：保存著<tbody>元素中行的HTMLCollection。
deleteRow(pos)：刪除指定位置的行。

insertRow(pos)：向rows集合中的指定位置插入一行，返回對新插入行的引用。
為<tr>元素添加的屬性和方法如下。
cells：保存著<tr>元素中單元格的HTMLCollection。
deleteCell(pos)：刪除指定位置的單元格。
insertCell(pos)：向cells集合中的指定位置插入一個單元格，返回對新插入單元格的引用。
使用這些屬性和方法，可以極大地減少創建表格所需的代碼數量。例如，使用這些屬性和方法可以將前面的代碼重寫如下（加陰影的部分是重寫后的代碼）。
//創建table
var table=document.createElement("table");
table.border=1;
table.width="100%";

//創建tbody
var tbody=document.createElement("tbody");
table.appendChild(tbody);

//創建第一行tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));//創建第二行tbody.insertRow(1);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//將表格添加到文檔主體中
document.body.appendChild(table);

在這次的代碼中，創建<table>和<tbody>的代碼沒有變化。不同的是創建兩行的部分，其中使用了HTML DOM定義的表格屬性和方法。在創建第一行時，通過<tbody>元素調用了insertRow()方法，傳入了參數0——表示應該將插入的行放在什么位置上。執行這一行代碼后，就會自動創建一行并將其插入到<tbody>元素的位置0上，因此就可以馬上通過tbody.rows[0]來引用新插入的行。
創建單元格的方式也十分相似，即通過<tr>元素調用insertCell()方法并傳入放置單元格的位置。然后，就可以通過tbody.rows[0].cells[0]來引用新插入的單元格，因為新創建的單元格被插入到了這一行的位置0上。
總之，使用這些屬性和方法創建表格的邏輯性更強，也更容易看懂，盡管技術上這兩套代碼都是正確的。

想要了解更多Java基礎知識，可以點擊評論區鏈接和小編一起學習java吧，此視頻教程為初學者而著，零基礎入門篇！給同學們帶來全新的Java300集課程啦!java零基礎小白自學Java必備優質教程_手把手圖解學習Java，讓學習成為一種享受_嗶哩嗶哩_bilibili

序列表和有序列表

用于呈現邏輯上并列的具有相關性的數據內容.

<ul>
<li></li>
</ul>

ul元素可以用type屬性設置不同的列表標記:

disc: 實心圓點

circle: 空心圓圈

square: 實心正方形

<ol>
<li></li>
</ol>

ol元素也可以設置不同的標記:

1: 阿拉伯數字

i: 小寫羅馬數字

I: 大寫羅馬數字

A: 大寫字母

a: 小寫字母

定義列表

適用呈現包含主題及描述的數據內容.

<dl>
<dt>主題</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表頭

tbody: 表體

tfoot: 表腳

th: 專用于表頭中的單元格, 其具有自動加粗并且居中的效果.

表格的屬性控制:

border: 邊框

bordercolor: 邊框顏色

width: 寬度

height: 高度

cellspacing: 單元格間距(外)

cellpadding: 單元格填充(內)

align: 表格的位置控制

單元格的屬性控制:

align

valign

如何合并單元格/跨行或跨列?

注意: 合并后, 會引發單元格數量的減少!

列表練習案例源碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的電腦文件列表</h1>
<ul>
<li>我的電腦
<ul>
<li>本地磁盤(C:)
<ul>
<li>我的文檔</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盤(D:)
<ul>
<li>我的游戲</li>
<li>我的資料</li>
<li>我的電影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>