天給小伙伴們分享一款功能超強(qiáng)大的Vue表格組件VxeTable。

vxe-table 基于vue2.x構(gòu)建的高效table表格組件，star高達(dá)2.5K+。支持行/列拖拽、排序篩選、虛擬滾動(dòng)、懶加載、樹形結(jié)構(gòu)、xlsx導(dǎo)入導(dǎo)出、集成第三方庫(kù)等功能。

功能特性

• 模塊化表格、按需引入，減少項(xiàng)目大小；
• 虛擬滾動(dòng)、懶加載，渲染性能大幅提升；
• 多種主題，多圖標(biāo)；
• 多種表格類型（基礎(chǔ)表格、復(fù)雜表格、樹形表格、編輯表格、高級(jí)表格、大數(shù)據(jù)表格）；
• 擴(kuò)展插件庫(kù)；

安裝

$ npm i xe-utils vxe-table -S

引入組件

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

Vue.use(VxeTable);

// 給vue掛載全局窗口實(shí)例
Vue.prototype.$modal=VxeTable.modal;

快速使用

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-table-column type="seq" title="序號(hào)" width="100"></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: 20001, name: 'Field1', role: 'Develop', sex: 'Man', address: 'Beijing' },
        { id: 20002, name: 'Field2', role: 'Test', sex: 'Woman', address: 'Guangzhou' },
        { id: 20003, name: 'Field3', role: 'PM', sex: 'Man', address: 'Shanghai' }
      ]
    }
  }
}
</script>

官網(wǎng)文檔提供了詳細(xì)的演示及API操作。

so good，非常實(shí)用的一款多功能表格解決方案，如果想要了解更多功能，可以自行去查閱文檔。

最后附上文檔及項(xiàng)目地址。

# 文檔地址
https://xuliangzhan_admin.gitee.io/vxe-table/

# 倉(cāng)庫(kù)地址
https://github.com/x-extends/vxe-table

ok，就分享到這里。希望對(duì)大家有所幫助，歡迎一起交流分享技術(shù)知識(shí)！

天為大家?guī)?lái)了HTML中的表格與列表、塊及類與ID的基礎(chǔ)知識(shí)，首先為大家介紹的是HTML中的表格與列表。

一、HTML中的表格與列表：

相信大家都知道在office、Excel等辦公軟件中如何制作表格，那大家知道如何在網(wǎng)頁(yè)上制作表格呢？同時(shí)網(wǎng)頁(yè)上面的注冊(cè)和登陸表又是怎么制作出來(lái)的呢？今天將會(huì)為大家詳細(xì)講解。

1、表格：

①　了解<table>標(biāo)簽

在網(wǎng)頁(yè)上的表格制作是用<table>標(biāo)簽來(lái)定義的。

②　table中的<tr>和<td>標(biāo)簽

l 每個(gè)表格有若干行，即用<tr>標(biāo)簽來(lái)定義。

l 每行被分割為若干單元格，即用<td>標(biāo)簽來(lái)定義。

運(yùn)行結(jié)果：

③　在<table>元素中添加border屬性就可以顯示邊框，示例：

運(yùn)行結(jié)果：

④　表單的表格用<th>標(biāo)簽表示，示例：

運(yùn)行結(jié)果：

2、列表

列表分為無(wú)序列表、有序列表和定義列表

①　無(wú)序列表

l 無(wú)序列表是一個(gè)項(xiàng)目的列表，此列表項(xiàng)目使用粗體圓點(diǎn)進(jìn)行標(biāo)記。

l 無(wú)序列表始于<ul>標(biāo)簽，每個(gè)列表始于<li>，示例：

運(yùn)行結(jié)果：

l 在<ul>標(biāo)簽中使用type屬性可以改變列表前面的符號(hào)，示例：

運(yùn)行結(jié)果：

②　有序列表

l 與無(wú)序列表不同的是，有序列表使用的是<ol>標(biāo)簽，示例：

運(yùn)行結(jié)果：

在<ol>標(biāo)簽中添加type屬性，可以改變列表前面的符號(hào)，示例：

運(yùn)行結(jié)果：

③　定義列表

l 定義列表就是自定義列表，是項(xiàng)目及其注釋的組合。

l 自定義列表以<dl>標(biāo)簽開始，每個(gè)自定義列表項(xiàng)以<dt>開始，每個(gè)自定義列表項(xiàng)的定義以<dd>開始，示例：

運(yùn)行結(jié)果：

二、HTML中的塊：

1、大多數(shù)HTML元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素

①　塊級(jí)元素在瀏覽器顯示時(shí)，通常以新行來(lái)開始（和結(jié)束），例如：<h1>、<p>、<ul>、<table>等。

②　內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始，例如：<b>、<td>、<a>、<img>等。

2、HTML中的<div>元素

HTML<div>元素是塊級(jí)元素，是可以組合其他HTML元素的容器，簡(jiǎn)單來(lái)說<div>元素一般被用在HTML布局上面，示例：

運(yùn)行結(jié)果：

3、HTML中的<span>元素

HTML<span>元素是內(nèi)聯(lián)元素可用作文本的容器，當(dāng)與css一同使用時(shí)，<span>元素可用于為部分文本設(shè)置樣式屬性，示例：

運(yùn)行結(jié)果：

三、HTML中的CLASS和ID:

在上面的示例中我們有看到id標(biāo)簽，在學(xué)習(xí)過程中很多人搞不懂class類和id標(biāo)簽的區(qū)別，現(xiàn)在開始教大家如何區(qū)分class類和id標(biāo)簽。

CLASS:

1、Class就我們口中所說的類

2、在css中引用時(shí)以“.”開頭，并且可以被多個(gè)元素調(diào)用，例如：

3、在使用中，可以先設(shè)置出一個(gè)樣式，然后被多個(gè)元素引用。

ID:

1、id是一種標(biāo)簽

2、在css中引用時(shí)以“#”開頭，只能定義一個(gè)元素，例如：

3、在使用時(shí)，只能先確定一個(gè)元素，然后才能設(shè)置其樣式，無(wú)法被其它元素引用，是唯一的標(biāo)簽。

希望大家能夠從這篇文章學(xué)習(xí)到HTML的部分知識(shí)~