表格是一個非常重要的模塊,在早期被用來做頁面布局,后隨著div流體布局的出現逐漸被替代,但在數據展示上還發揮著重要作用,本次教程主要講解able表格基本屬性及跨行跨列合并。
在目前大多數情況下,越來越多擁有開發團隊的公司使用Vue作為他們的前端開發框架,我們不得不承認Vue這種模式在很多地方是優于傳統項目的,但是相信很多人會和筆者一樣,在使用過程中,事物總不是想象中那么美好,其中有一項就和今天的主角有關,在組件方面,以往jQuery的方式存在大量的第三方組件,能應對很多復雜的業務場景,就比如表格組件。雖然普通的表格能滿足普通的開發需求,但是遇到復雜的就會顯得捉襟見肘,今天就來說一說在Vue中相當好用的一個表格組件——vxe-table!
一個基于 vue 的 PC 端表格組件,支持增刪改查、虛擬滾動、懶加載、快捷菜單、數據校驗、樹形結構、打印導出、表單渲染、數據分頁、虛擬列表、模態窗口、自定義模板、渲染器、非常靈活的配置項、擴展接口等...
https://github.com/xuliangzhan/vxe-table(1.9k)
https://gitee.com/xuliangzhan_admin/vxe-table(800+k)
目前vxe-table已經來到3.x版本,以下是文檔中所說明的功能,可以說是非常豐富了,基本上滿足大多數復雜業務場景(比如說大型ERP系統,對于表格要求非常高的場景)
基礎表格、高級表格、斑馬線條紋、多種邊框、單元格樣式、列寬拖動、最大高度、自適應寬高、固定列、多級表頭、表尾數據、高亮行、列、序號、單選框、復選框、下拉選項、開關、排序、篩選、合并行或列、導入、導出、打印、顯示/隱藏列、加載中、格式化內容、自定義插槽/模板、快捷菜單、展開行、分頁、表單、工具欄、下拉容器、虛擬列表、增刪改查、樹表格、數據校驗、數據代理、鍵盤導航、模態窗口、渲染器、虛擬滾動
以下是其核心組件模塊,且可以和國內主流組件框架適配
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!
、遇問題:
產品說:“這張表我想在手機端顯示。”
我:“顯示不了,手機屏幕太窄了,好多數據無法顯示。”
一個小時后......
產品說:“要不你弄個滑動吧,我左右滑動查看”
我:“好的”(竟然被你想到了!!!)
N個小時后.....
產品說:“我向下滑動看不到標題了”
我:“那我在把標題固定住。。。。”
一張列表中需要展示多行多列數據,頁面太小,又要支持手機端。
二、解決思路:
1.CSS中有overflow屬性可以對溢出元素進行隱藏
2.構建4個table,圖中1.“公司/日期”2.時間 3.公司 4.數據內容
3.通過監聽右邊滾動條滑動距離控制第3個table
3.通過監聽下邊滾動條滑動距離控制第2個tablesasasasa
三、偽代碼
<div style=""> <div id="div1"> <table > </table> </div> <div id="div2"> <table style="width:12900px;"> </table> </div> <div id="div3"> <table> </table> </div> <div id="div4"> <table id="table1" style="width:12900px;"> </table> </div> </div> <script> $('#table1').parent("div").each(function () { $(this).data({sl: this.scrollLeft, st: this.scrollTop}); }).scroll(function () { var sl = this.scrollLeft, st = this.scrollTop; $("#div2").scrollLeft(sl); $("#div3").scrollTop(st); }); </script>
四、解析
這種適用于簡單表格固定表頭首列,滾動條高度是17px,當我們設置表格寬度和高度時候要注意這個高度,不然會錯位。
演示地址:
[演示地址](http://47.105.36.188:3030/toutiao/CSS實現的Table表頭固定/index.html)
[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/CSS實現的Table表頭固定)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。