整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給小伙伴們分享一款功能超強大的Vue表格組件VxeTable。
vxe-table 基于vue2.x構建的高效table表格組件，star高達2.5K+。支持行/列拖拽、排序篩選、虛擬滾動、懶加載、樹形結構、xlsx導入導出、集成第三方庫等功能。
$ npm i xe-utils vxe-table -Simport Vue from 'vue';
import 'xe-utils';
import VxeTable from 'vxe-table';
import 'vxe-table/lib/index.css';
Vue.use(VxeTable);
// 給vue掛載全局窗口實例
Vue.prototype.$modal=VxeTable.modal;<template>
<div>
<vxe-table :data="tableData">
<vxe-table-column type="seq" title="序號" 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>官網文檔提供了詳細的演示及API操作。
基礎表格
單元格工具提示+溢出省略號...
表格表頭分組
樹形表格
彈窗編輯表格
全屏表格（表格最大化/還原）
集成第三方庫（element-ui、iview、antd）
so good，非常實用的一款多功能表格解決方案，如果想要了解更多功能，可以自行去查閱文檔。
最后附上文檔及項目地址。
# 文檔地址
https://xuliangzhan_admin.gitee.io/vxe-table/
# 倉庫地址
https://github.com/x-extends/vxe-tableok，就分享到這里。希望對大家有所幫助，歡迎一起交流分享技術知識！
天為大家帶來了HTML中的表格與列表、塊及類與ID的基礎知識，首先為大家介紹的是HTML中的表格與列表。
一、HTML中的表格與列表：
相信大家都知道在office、Excel等辦公軟件中如何制作表格，那大家知道如何在網頁上制作表格呢？同時網頁上面的注冊和登陸表又是怎么制作出來的呢？今天將會為大家詳細講解。
1、表格：
① 了解<table>標簽
在網頁上的表格制作是用<table>標簽來定義的。
② table中的<tr>和<td>標簽
l 每個表格有若干行，即用<tr>標簽來定義。
l 每行被分割為若干單元格，即用<td>標簽來定義。
示例圖
運行結果：
③ 在<table>元素中添加border屬性就可以顯示邊框，示例：
運行結果：
④ 表單的表格用<th>標簽表示，示例：
運行結果：
2、列表
列表分為無序列表、有序列表和定義列表
① 無序列表
l 無序列表是一個項目的列表，此列表項目使用粗體圓點進行標記。
l 無序列表始于<ul>標簽，每個列表始于<li>，示例：
運行結果：
l 在<ul>標簽中使用type屬性可以改變列表前面的符號，示例：
運行結果：
② 有序列表
l 與無序列表不同的是，有序列表使用的是<ol>標簽，示例：
運行結果：
在<ol>標簽中添加type屬性，可以改變列表前面的符號，示例：
運行結果：
③ 定義列表
l 定義列表就是自定義列表，是項目及其注釋的組合。
l 自定義列表以<dl>標簽開始，每個自定義列表項以<dt>開始，每個自定義列表項的定義以<dd>開始，示例：
運行結果：
二、HTML中的塊：
1、大多數HTML元素被定義為塊級元素或內聯元素
① 塊級元素在瀏覽器顯示時，通常以新行來開始（和結束），例如：<h1>、<p>、<ul>、<table>等。
② 內聯元素在顯示時通常不會以新行開始，例如：<b>、<td>、<a>、<img>等。
2、HTML中的<div>元素
HTML<div>元素是塊級元素，是可以組合其他HTML元素的容器，簡單來說<div>元素一般被用在HTML布局上面，示例：
運行結果：
3、HTML中的<span>元素
HTML<span>元素是內聯元素可用作文本的容器，當與css一同使用時，<span>元素可用于為部分文本設置樣式屬性，示例：
運行結果：
三、HTML中的CLASS和ID:
在上面的示例中我們有看到id標簽，在學習過程中很多人搞不懂class類和id標簽的區別，現在開始教大家如何區分class類和id標簽。
CLASS:
1、Class就我們口中所說的類
2、在css中引用時以“.”開頭，并且可以被多個元素調用，例如：
3、在使用中，可以先設置出一個樣式，然后被多個元素引用。
ID:
1、id是一種標簽
2、在css中引用時以“#”開頭，只能定義一個元素，例如：
3、在使用時，只能先確定一個元素，然后才能設置其樣式，無法被其它元素引用，是唯一的標簽。
希望大家能夠從這篇文章學習到HTML的部分知識~
table{
table-layout:fixed;//布局方式要固定
width:65%;
border-collapse:collapse;
}
td{
white-space:nowrap;//不允許文本換行
overflow:hidden; //超部分自動隱藏
text-overflow:ellipsis; //超出部分以省略號顯示
border:black solid 1px;
}
li{
display:block;
float:left;
width:33.3%;
white-space:nowrap;
overflow:hidden;
/*如果要交超出內容以...顯示，則需要增加屬性定義：*/
text-overflow:ellipsis;
}
表格和列表的最終效果如下：
-End-
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
