vue3+uniapp多端自定義table組件|uniapp加強版綜合表格組件 uv3-table：一款基於uniapp+vue3跨端自定義手機端增強版表格組件。支持固定表頭/列、邊框、斑馬紋、單選/多選，自定義表頭/表體插槽、左右固定列陰影高亮顯示。支持編譯相容H5+小程式端+App端。 如下圖： ...
vue3+uniapp多端自定義table組件|uniapp加強版綜合表格組件
uv3-table：一款基於uniapp+vue3跨端自定義手機端增強版表格組件。支持固定表頭/列、邊框、斑馬紋、單選/多選，自定義表頭/表體插槽、左右固定列陰影高亮顯示。支持編譯相容H5+小程式端+App端。
如下圖：H5+小程式+App端，多端運行一致。
uv3-table表格插件是最新原創項目uniapp-os後臺管理系統的一個獨立版組件。
由於在開發uni-os手機後臺系統需要用到table表格組件。無奈uniapp官方及插件市場table表格組件無論功能及UI上都不滿足要求，於是自己爆肝一個多日夜開發了一款全新uniapp+vue3綜合表格組件。
目前該項目已經出階段性成果接近尾聲了，相信很快就能和大家見面，到時也會做一些技術分享，敬請期待！
uv3-table使用示例
將uv3-table組件放到uniapp項目components目錄下，無需在頁面再次引入，即可使用。
- 基礎用法
<uv3-table :columns="columns" :dataSource="data.list" />
- 自定義條紋樣式
<uv3-table :columns="columns" :dataSource="data.list" stripe stripeColor="#eee" padding="5px" height="450rpx" />
- 綜合用法(固定表頭/列、自定義插槽內容)
<script setup> import { ref } from 'vue' import Mock from 'mockjs' const columns = ref([ {type: 'selection', align: 'center', width: 80, fixed: true}, // 多選 {type: 'index', label: 'ID', align: 'center', width: 80, fixed: true}, // 索引序號 {prop: 'author', label: '作者', align: 'center', width: 120}, {prop: 'title', label: '標題', align: 'left', width: 350}, {prop: 'image', label: '圖片', align: 'center', width: 120}, {prop: 'switch', label: '推薦', align: 'center', width: 100}, {prop: 'tags', label: '標簽', align: 'center', width: 100}, {prop: 'rate', label: '評分', align: 'center', width: 200}, {prop: 'date', label: '發佈時間', align: 'left', width: 250}, // 時間 {prop: 'action', label: '操作', align: 'center', width: 150, fixed: 'right'}, // 操作 ]) const data = ref(Mock.mock({ total: 100, page: 1, pagesize: 10, 'list|20': [ { id: '@id()', author: '@cname()', title: '@ctitle(10, 20)', image: `https://api.yimian.xyz/img?id=@integer(100, 300)`, switch: '@boolean()', 'tags|1': ['admin', 'test', 'dev'], rate: '@integer(1, 5)', date: '@datetime()', color: '@color()', } ] })) </script>
<uv3-table :dataSource="data.list" :columns="columns" :headerBold="true" headerBackground="#ecf5ff" stripe border padding="5px" maxHeight="650rpx" @rowClick="handleRowClick" @select="handleSelect" > <!-- 自定義header插槽內容 --> <template #headerCell="{ key, col, index }"> <template v-if="key == 'title'"> <view class="flex-c">{{col.label}} <input placeholder="搜索" size="small" /></view> </template> <template v-else-if="key == 'date'"> <uni-icons type="calendar"></uni-icons> {{col.label}} </template> <template v-else>{{col.label}}</template> </template> <!-- 自定義body插槽內容(由於小程式不支持動態:name插槽，通過key標識來自定義表格內容) --> <template #default="{ key, value, row, col, index }"> <template v-if="key == 'image'"> <uv-image :src="value" lazyLoad observeLazyLoad @click="previewImage(value)" /> </template> <template v-else-if="key == 'switch'"> <switch :checked="value" style="transform:scale(0.6);" /> </template> <template v-else-if="key == 'tags'"> <uv-tags :text="value" :color="row.color" :borderColor="row.color" plain size="mini" /> </template> <template v-else-if="key == 'rate'"> <uni-rate :value="value" size="14" readonly /> </template> <template v-else-if="key == 'action'"> <uni-icons type="compose" color="#00aa7f" @click="handleEdit(row)" /> <uni-icons type="trash" color="#ff007f" style="margin-left: 5px;" @click="handleDel(row)" /> </template> <template v-else>{{value}}</template> </template> </uv3-table>
rowClick點擊表格行，會返回該行數據。
select單選/多選，會返回表格選中數據。
uv3Table編碼實現
- uv3-table表格參數配置
const props = defineProps({ // 表格數據 dataSource: { type: Array, default() { return [] } }, /** * @params {string} background 對應列背景色 * @params {string} type 對應列類型(多選selection 索引index) * @params {string} label 顯示的列標題 * @params {string} prop 對應的列欄位名 * @params {string} align 列水平對齊方式(left center right) * @params {number|string} width 對應列寬度 * @params {boolean|string} fixed 該列固定到左側(fixed:true|'left')或右側(fixed:'right') * @params {string} columnStyle 對應列自定義樣式 * @params {string} className/class 表格列的類名className */ columns: { type: Array, default() { return [] } }, // 表格寬度 width: { type: [Number, String] }, // 表格高度 height: { type: [Number, String] }, // 表格最大高度 maxHeight: { type: [Number, String] }, // 是否為斑馬紋 stripe: { type: [Boolean, String] }, // 斑馬紋背景 stripeColor: { type: String, default: '#fafafa' }, // 是否帶有邊框 border: { type: [Boolean, String] }, // 列寬度(推薦預設rpx) columnWidth: { type: [Number, String], default: 200 }, // 單元格間距 padding: { type: String, default: '5rpx 10rpx' }, // 是否顯示表頭 showHeader: { type: [Boolean, String], default: true }, // 表頭背景色 headerBackground: { type: String, default: '#ebeef5' }, // 表頭顏色 headerColor: { type: String, default: '#333' }, // 表頭字體加粗 headerBold: { type: [Boolean, String], default: true }, // 表格背景色 background: { type: String, default: '#fff' }, // 表格顏色 color: { type: String, default: '#606266' }, // 空數據時顯示的文本內容，也可以通過 #empty 設置 emptyText: { type: String, default: '暫無數據' } })
- 模板結構如下
<template> <view class="uv3__table" ... > <!-- 表頭 --> <view v-if="showHeader" class="uv3__table-thead" :style="{'background': headerBackground}"> <view v-for="(col, cindex) in columns" :key="cindex" class="uv3__thead-th" :class="[ { 'fixedLeft': col.fixed == true || col.fixed == 'left', 'fixedRight': col.fixed == 'right', 'fixedLeftShadow': cindex == fixedLeftIndex, 'fixedRightShadow': cindex == fixedRightIndex, }, col.className || col.class ]" ... @click="handleHeaderClick(col)" > ... </view> </view> <!-- 表體 --> <view class="uv3__table-tbody"> ... </view> </view> </template>
目前uv3-table表格組件作為獨立版本，已經發佈到我的作品集，歡迎去下載使用。
Props參數
columns參數
- background 對應列背景色
- type 對應列類型(多選selection 索引index)
- label 顯示的列標題
- prop 對應的列欄位名
- align 列水平對齊方式(left center right)
- width 對應列寬度
- fixed 該列固定到左側(fixed:true|‘left’) 或 右側(fixed:‘right’)
- columnStyle 對應列自定義樣式
- className/class 表格列的類名className
事件
- @headerClick 點擊表頭
- @rowClick 點擊行觸發
- @select 多選/單選
自定義插槽
- headerCell 自定義表頭內容
- default 預設表體內容
- empty 無數據插槽
希望以上分享對大家有些幫助，開發不易，一起fighting~~
