├── .gitignore
├── static
    ├── zTable.jpg
    └── z-table
    │   └── z-table.png
├── main.js
├── App.vue
├── pages.json
├── README.md
├── uni.scss
├── manifest.json
├── components
    └── z-table
    │   └── z-table.vue
└── pages
    └── index
        └── index.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | /unpackage
2 | zTable.zip
3 | components.zip
4 | 


--------------------------------------------------------------------------------
/static/zTable.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/z-table/master/static/zTable.jpg


--------------------------------------------------------------------------------
/static/z-table/z-table.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/calamus0427/z-table/master/static/z-table/z-table.png


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | 
 4 | Vue.config.productionTip = false
 5 | 
 6 | App.mpType = 'app'
 7 | 
 8 | const app = new Vue({
 9 |     ...App
10 | })
11 | app.$mount()
12 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 	export default {
 3 | 		onLaunch: function() {
 4 | 			console.log('App Launch')
 5 | 		},
 6 | 		onShow: function() {
 7 | 			console.log('App Show')
 8 | 		},
 9 | 		onHide: function() {
10 | 			console.log('App Hide')
11 | 		}
12 | 	}
13 | </script>
14 | 
15 | <style>
16 | 	/*每个页面公共css */
17 | </style>
18 | 


--------------------------------------------------------------------------------
/pages.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 3 | 		{
 4 | 			"path": "pages/index/index",
 5 | 			"style": {
 6 | 				"navigationBarTitleText": "z-table使用示例"
 7 | 			}
 8 | 		}
 9 | 	],
10 | 	"globalStyle": {
11 | 		"navigationBarTextStyle": "black",
12 | 		"navigationBarTitleText": "uni-app",
13 | 		"navigationBarBackgroundColor": "#F8F8F8",
14 | 		"backgroundColor": "#F8F8F8"
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # z-table
 2 | uni-app的表格插件
 3 | 目前兼容H5和微信小程序
 4 | 
 5 | ### 表格使用
 6 | #### props: 
 7 | ##### tableData Array | 表格数据
 8 | ##### columns Array | 数据映射表 每列params => title(表头文字), width(每列宽度) [, key(对应tableData的字段名) || format(自定义内容), sort(是否要排序), isLink(是否显示为超链接Object)]
 9 | ##### format格式: {template: 字符串模版用#key#表示需要被替换的数据,names: 对应template属性内要被替换的内容的key}
10 | ##### isLink格式: {url: 链接地址, params: 地址带的参数Array[key|value, key|value, ...]每一项都是key和value以'|'链接,如果不带'|'默认键值同名}
11 | ##### stickSide Boolean | 是否固定右侧首栏 默认不显示
12 | ##### showBottomSum Boolean | 是否显示底部统计 默认不显示
13 | ##### showLoading Boolean | 是否首次加载首次加载不显示暂无数据内容
14 | ##### emptyText String | 空数据显示的文字内容
15 | ##### tableHeight Number | 设置表格高度会滚动
16 | ##### sort Boolean | 开启排序
17 | ---
18 | #### event: 
19 | ##### onSort | 排序事件 返回{key: 被排序列的字段名, type: 正序'asc'/倒序'desc'}
20 | ---
21 | #### function: 
22 | ##### resetSort | 调用后重置排序 *注意:不会触发sort事件
23 | 
24 | ### 效果预览
25 | ![小程序二维码](https://github.com/zc897575/z-table/blob/master/static/zTable.jpg)
26 | 


--------------------------------------------------------------------------------
/uni.scss:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 这里是uni-app内置的常用样式变量
 3 |  *
 4 |  * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 5 |  * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 6 |  *
 7 |  */
 8 | 
 9 | /**
10 |  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
11 |  *
12 |  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
13 |  */
14 | 
15 | /* 颜色变量 */
16 | 
17 | /* 行为相关颜色 */
18 | $uni-color-primary: #007aff;
19 | $uni-color-success: #4cd964;
20 | $uni-color-warning: #f0ad4e;
21 | $uni-color-error: #dd524d;
22 | 
23 | /* 文字基本颜色 */
24 | $uni-text-color:#333;//基本色
25 | $uni-text-color-inverse:#fff;//反色
26 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
27 | $uni-text-color-placeholder: #808080;
28 | $uni-text-color-disable:#c0c0c0;
29 | 
30 | /* 背景颜色 */
31 | $uni-bg-color:#ffffff;
32 | $uni-bg-color-grey:#f8f8f8;
33 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色
34 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
35 | 
36 | /* 边框颜色 */
37 | $uni-border-color:#c8c7cc;
38 | 
39 | /* 尺寸变量 */
40 | 
41 | /* 文字尺寸 */
42 | $uni-font-size-sm:24upx;
43 | $uni-font-size-base:28upx;
44 | $uni-font-size-lg:32upx;
45 | 
46 | /* 图片尺寸 */
47 | $uni-img-size-sm:40upx;
48 | $uni-img-size-base:52upx;
49 | $uni-img-size-lg:80upx;
50 | 
51 | /* Border Radius */
52 | $uni-border-radius-sm: 4upx;
53 | $uni-border-radius-base: 6upx;
54 | $uni-border-radius-lg: 12upx;
55 | $uni-border-radius-circle: 50%;
56 | 
57 | /* 水平间距 */
58 | $uni-spacing-row-sm: 10px;
59 | $uni-spacing-row-base: 20upx;
60 | $uni-spacing-row-lg: 30upx;
61 | 
62 | /* 垂直间距 */
63 | $uni-spacing-col-sm: 8upx;
64 | $uni-spacing-col-base: 16upx;
65 | $uni-spacing-col-lg: 24upx;
66 | 
67 | /* 透明度 */
68 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
69 | 
70 | /* 文章场景相关 */
71 | $uni-color-title: #2C405A; // 文章标题颜色
72 | $uni-font-size-title:40upx;
73 | $uni-color-subtitle: #555555; // 二级标题颜色
74 | $uni-font-size-subtitle:36upx;
75 | $uni-color-paragraph: #3F536E; // 文章段落颜色
76 | $uni-font-size-paragraph:30upx;


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name" : "zTable",
 3 |     "appid" : "__UNI__DA6EA08",
 4 |     "description" : "",
 5 |     "versionName" : "1.0.0",
 6 |     "versionCode" : "100",
 7 |     "transformPx" : false,
 8 |     "app-plus" : {
 9 |         /* 5+App特有相关 */
10 |         "usingComponents" : true,
11 |         "splashscreen" : {
12 |             "alwaysShowBeforeRender" : true,
13 |             "waiting" : true,
14 |             "autoclose" : true,
15 |             "delay" : 0
16 |         },
17 |         "modules" : {},
18 |         /* 模块配置 */
19 |         "distribute" : {
20 |             /* 应用发布信息 */
21 |             "android" : {
22 |                 /* android打包配置 */
23 |                 "permissions" : [
24 |                     "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
25 |                     "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
26 |                     "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
27 |                     "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
28 |                     "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
29 |                     "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
30 |                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
31 |                     "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
32 |                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
33 |                     "<uses-permission android:name=\"android.permission.CAMERA\"/>",
34 |                     "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
35 |                     "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
36 |                     "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
37 |                     "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
38 |                     "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
39 |                     "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
40 |                     "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
41 |                     "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
42 |                     "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
43 |                     "<uses-feature android:name=\"android.hardware.camera\"/>",
44 |                     "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
45 |                     "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
46 |                 ]
47 |             },
48 |             "ios" : {},
49 |             /* ios打包配置 */
50 |             "sdkConfigs" : {}
51 |         }
52 |     },
53 |     /* SDK配置 */
54 |     "quickapp" : {},
55 |     /* 快应用特有相关 */
56 |     "mp-weixin" : {
57 |         /* 小程序特有相关 */
58 |         "appid" : "wx2601089995dbaa81",
59 |         "setting" : {
60 |             "urlCheck" : false,
61 |             "minified" : true,
62 |             "postcss" : false
63 |         },
64 |         "usingComponents" : true
65 |     }
66 | }
67 | 


--------------------------------------------------------------------------------
/components/z-table/z-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <view class="z-table">
  3 |         <view
  4 |             class="z-table-main"
  5 |             :style="compluteHeight"
  6 |         >
  7 |             <view
  8 |                 v-if="!tableLoaded && !tableData"
  9 |                 :class="['z-loading', {ztableLoading: tableShow}]"
 10 |             >
 11 |                 <view class="z-loading-animate"></view>
 12 |             </view>
 13 |             <view class="z-table-container">
 14 |                 <view class="z-table-pack">
 15 |                     <view class="z-table-title">
 16 |                         <view
 17 |                             class="z-table-title-item"
 18 |                             :class="{ 'z-table-stick-side': stickSide && index == 0 }"
 19 |                             :style="{ width: item.width ? item.width + 'rpx' : '200rpx' }"
 20 |                             v-for="(item, index) in columns"
 21 |                             :key="index"
 22 |                             @click="sort(item.key, index)"
 23 |                         >
 24 |                             {{ item.title }}
 25 |                             <view
 26 |                                 v-if="item.hasOwnProperty('key') && item.hasOwnProperty('sort') && tableData.length"
 27 |                                 class="sort"
 28 |                             >
 29 |                                 <view
 30 |                                     class="up-arrow"
 31 |                                     :class="{ action: nowSortKey == item.key && sortType == 'asc' }"
 32 |                                 ></view>
 33 |                                 <view
 34 |                                     class="down-arrow"
 35 |                                     :class="{ action: nowSortKey == item.key && sortType == 'desc' }"
 36 |                                 ></view>
 37 |                             </view>
 38 |                         </view>
 39 |                     </view>
 40 |                     <view
 41 |                         v-if="tableData.length"
 42 |                         :class="['table-container-box', {'short-table': !longTable && showBottomSum}]"
 43 |                     >
 44 |                         <view
 45 |                             class="z-table-container-row"
 46 |                             :class="{ 'z-table-has-bottom': showBottomSum }"
 47 |                             v-for="(row, iIndex) in tableData"
 48 |                             :key="iIndex"
 49 |                         >
 50 |                             <view
 51 |                                 class="z-table-container-col"
 52 |                                 :class="{ 'z-table-stick-side': stickSide && jIndex == 0 }"
 53 |                                 :style="{ width: col.width ? col.width + 'rpx' : '200rpx' }"
 54 |                                 v-for="(col, jIndex) in columns"
 55 |                                 :key="jIndex"
 56 |                             >
 57 |                                 <view
 58 |                                     v-if="!col.isLink"
 59 |                                     v-html="getRowContent(row, col)"
 60 |                                 ></view>
 61 |                                 <!-- #ifdef H5 -->
 62 |                                 <router-link
 63 |                                     v-else-if="setUrl(row, col).indexOf('http') != 0"
 64 |                                     :to="setUrl(row, col)"
 65 |                                     v-html="getRowContent(row, col)"
 66 |                                 ></router-link>
 67 |                                 <a
 68 |                                     v-else-if="col.isLink"
 69 |                                     :href="setUrl(row, col)"
 70 |                                     v-html="getRowContent(row, col)"
 71 |                                 ></a>
 72 |                                 <!-- #endif -->
 73 |                                 <!-- #ifndef H5 -->
 74 |                                 <navigator
 75 |                                     v-else-if="col.isLink"
 76 |                                     :url="setUrl(row, col)"
 77 |                                     v-html="getRowContent(row, col)"
 78 |                                 ></navigator>
 79 |                                 <!-- #endif -->
 80 |                             </view>
 81 |                         </view>
 82 |                     </view>
 83 |                     <view
 84 |                         :class="['z-table-bottom', {'long-table': longTable}]"
 85 |                         v-if="showBottomSum && tableData.length"
 86 |                     >
 87 |                         <view
 88 |                             class="z-table-bottom-col"
 89 |                             :class="{ 'z-table-stick-side': stickSide && sumIndex == 0 }"
 90 |                             :style="{ width: sumCol.width ? sumCol.width + 'rpx' : '200rpx' }"
 91 |                             v-for="(sumCol, sumIndex) in columns"
 92 |                             :key="sumIndex"
 93 |                         >
 94 |                             <view class="z-table-bottom-text">
 95 |                                 <!-- <view v-if="sumIndex != 0" class="z-table-bottom-text-title">{{ sumCol.title }}</view> -->
 96 |                                 <text :class="{ sum: sumIndex == 0 }">{{ sumIndex == 0 ? '总计' : dosum(sumCol.key) }}</text>
 97 |                             </view>
 98 |                         </view>
 99 |                     </view>
100 |                 </view>
101 |             </view>
102 |             <view
103 |                 v-if="tableData.length == 0"
104 |                 class="table-empty"
105 |             >
106 |                 <!-- image v-if="!showLoading" class="empty-img" src="../static/empty.png"></image -->
107 |                 <view v-html="showLoading ? '' : emptyText"></view>
108 |             </view>
109 |         </view>
110 |     </view>
111 | </template>
112 | 
113 | <script>
114 | /*
115 |  * 表格使用
116 |  * 注意如果需要异步加载，需要把tableData初始值设为false，当没有数据的时候值为空数组
117 |  * props: tableData Array | 表格数据
118 |  * 		 columns Array | 数据映射表 每列params => title(表头文字), width(每列宽度) [, key(对应tableData的字段名) || format(自定义内容), sort(是否要排序), isLink(是否显示为超链接Object)]
119 |  * 										   format格式: {template: 字符串模版用#key#表示需要被替换的数据,names: 对应template属性内要被替换的内容的key}
120 |  * 										   isLink格式: {url: 链接地址, params: 地址带的参数Array[key|value, key|value, ...]每一项都是key和value以'|'链接,如果不带'|'默认键值同名}
121 |  * 		 stickSide Boolean | 是否固定右侧首栏 默认不显示
122 |  * 		 showBottomSum Boolean | 是否显示底部统计 默认不显示
123 |  * 		 showLoading Boolean | 是否首次加载首次加载不显示暂无数据内容
124 |  * 		 emptyText String | 空数据显示的文字内容
125 |  *		 tableHeight Number | 设置表格高度会滚动
126 |  *		 sort Boolean | 开启排序
127 |  *
128 |  * event: onSort | 排序事件 返回{key: 被排序列的字段名, type: 正序'asc'/倒序'desc'}
129 |  *
130 |  * function: resetSort | 调用后重置排序 *注意:不会触发sort事件
131 |  *
132 |  * */
133 | import Vue from 'vue'
134 | 
135 | export default {
136 |     data() {
137 |         return {
138 |             version: '1.0.7',
139 |             nowSortKey: '',
140 |             sortType: 'desc', // asc/desc 升序/降序
141 |             longTable: true,
142 |             lineHeight: uni.upx2px(64),
143 |             tableLoaded: false,
144 |             tableShow: true
145 |         }
146 |     },
147 |     computed: {
148 |         compluteHeight() {
149 |             return this.tableHeight
150 |                 ? 'height: ' + uni.upx2px(this.tableHeight) + 'px'
151 |                 : ''
152 |         }
153 |     },
154 |     props: {
155 |         tableData: {
156 |             type: [Array, Boolean],
157 |             default() {
158 |                 return false
159 |             }
160 |         },
161 |         columns: {
162 |             /*
163 |              *
164 |              * [{title: xxx, key: 当前列展示对象名, width: 列宽, render: function}]
165 |              *
166 |              * */
167 |             type: Array,
168 |             require: true
169 |         },
170 |         stickSide: {
171 |             type: Boolean,
172 |             default: false
173 |         },
174 |         showBottomSum: {
175 |             type: Boolean,
176 |             default: false
177 |         },
178 |         showLoading: {
179 |             type: Boolean,
180 |             default: true
181 |         },
182 |         emptyText: {
183 |             type: String,
184 |             default: '暂无数据'
185 |         },
186 |         tableHeight: {
187 |             type: Number,
188 |             default: 0
189 |         }
190 |     },
191 |     mounted() {
192 |         this.init()
193 |     },
194 |     watch: {
195 |         columns() {
196 |             this.init()
197 |         },
198 |         tableData() {
199 |             this.init()
200 |         }
201 |     },
202 |     methods: {
203 |         async init() {
204 |             let _this = this
205 |             let container = await _this.getPageSize('.z-table-container'),
206 |                 pack = await _this.getPageSize('.z-table-pack')
207 |             _this.timer && clearTimeout(_this.timer)
208 |             if (container && pack) {
209 |                 _this.$nextTick(function() {
210 |                     if (_this.tableData && _this.tableData.length) {
211 |                         _this.tableShow = false
212 |                         _this.timer = setTimeout(function() {
213 |                             _this.tableLoaded = true
214 |                         }, 300)
215 |                     }
216 |                 })
217 |                 if (container.height != pack.height) {
218 |                     _this.longTable = true
219 |                 } else {
220 |                     _this.longTable = false
221 |                 }
222 |             } else {
223 |                 _this.tableLoaded = false
224 |                 _this.$nextTick(function() {
225 |                     _this.tableShow = true
226 |                 })
227 |             }
228 |         },
229 |         getPageSize(selecter) {
230 |             // 获取元素信息
231 |             let query = uni.createSelectorQuery().in(this),
232 |                 _this = this
233 |             return new Promise((resolve, reject) => {
234 |                 query
235 |                     .select(selecter)
236 |                     .boundingClientRect(res => {
237 |                         resolve(res)
238 |                     })
239 |                     .exec()
240 |             })
241 |         },
242 |         dosum(key) {
243 |             let sum = '-'
244 |             if (this.tableData) {
245 |                 if (
246 |                     this.tableData.every(item => {
247 |                         return !Number.isNaN(item[key] - 0)
248 |                     })
249 |                 ) {
250 |                     sum = 0
251 |                     this.tableData.map((item, index) => {
252 |                         if (!key && index != 0) {
253 |                             sum = '-'
254 |                         } else {
255 |                             let val = item[key] - 0
256 |                             if (Number.isNaN(val)) {
257 |                                 sum += 0
258 |                             } else {
259 |                                 sum += val
260 |                             }
261 |                         }
262 |                     })
263 |                 }
264 |             }
265 |             // sum = sum == 0 ? "-" : sum
266 |             return this.numTransform(sum)
267 |         },
268 |         getRowContent(row, col) {
269 |             // 表格值处理函数
270 |             // 如果columns带了key则显示对应的key
271 |             // 如果columns带的format则按规定返回format后的html
272 |             // format规定: params names <Array> 对应tableData的键名,作为匹配template中两个#之间动态内容的名字
273 |             //			   params template <String> html字符串模版
274 |             let tempHTML = ''
275 |             let rowKey = row[col.key]
276 |             if (rowKey == 'null') {
277 |                 rowKey = '-'
278 |             }
279 |             if (rowKey || rowKey === 0) {
280 |                 tempHTML = isNaN(rowKey - 0)
281 |                     ? rowKey
282 |                     : this.numTransform(rowKey - 0)
283 |                 // tempHTML = tempHTML == 0 ? "-" : tempHTML
284 |             } else if (!!col.format) {
285 |                 let tempFormat = col.format.template
286 |                 col.format.names.map(item => {
287 |                     let regexp = new RegExp(`\#${item}\#`, 'mg')
288 |                     tempFormat = tempFormat.replace(regexp, row[item])
289 |                 })
290 |                 tempHTML = tempFormat
291 |             } else {
292 |                 let error = new Error('数据的key或format值至少一个不为空')
293 |                 throw error
294 |             }
295 |             // console.log(tempHTML)
296 |             return tempHTML + ''
297 |         },
298 |         sort(key, index) {
299 |             if (!key || !this.columns[index].sort) {
300 |                 return
301 |             }
302 |             // 排序功能: 如果点击的排序按钮是原先的 那么更改排序类型
303 |             //			如果点击的另一个排序按钮 那么选择当前排序并且排序类型改为降序(desc)
304 |             if (key != this.nowSortKey) {
305 |                 this.nowSortKey = key
306 |                 this.sortType = 'desc'
307 |             } else {
308 |                 this.toggleSort()
309 |             }
310 |             this.$emit('onSort', { key: this.nowSortKey, type: this.sortType })
311 |         },
312 |         toggleSort() {
313 |             this.sortType = this.sortType == 'asc' ? 'desc' : 'asc'
314 |         },
315 |         numTransform(n) {
316 |             if (Number.isNaN(n - 0)) {
317 |                 return n
318 |             }
319 |             if (Math.abs(n) >= 100000000) {
320 |                 n = Number((n / 100000000).toFixed(1)) + '亿'
321 |             } else if (Math.abs(n) >= 10000) {
322 |                 n = Number((n / 10000).toFixed(1)) + '万'
323 |             }
324 |             return n.toString()
325 |         },
326 |         resetSort() {
327 |             // 重置排序状态
328 |             this.nowSortKey = ''
329 |             this.sortType = 'desc'
330 |         },
331 |         setUrl(row, col) {
332 |             if (!col.isLink) {
333 |                 return
334 |             }
335 |             let urlParam = {}
336 |             let {
337 |                 isLink: { url, params = [] }
338 |             } = col
339 |             params.forEach(item => {
340 |                 if (~item.indexOf('|')) {
341 |                     let temp = item.split('|')
342 |                     urlParam[temp[0]] = row[temp[1]]
343 |                 } else {
344 |                     urlParam[item] = row[item]
345 |                 }
346 |             })
347 |             url = this.setUrlParams(url, urlParam)
348 |             return url
349 |         },
350 |         setUrlParams(url, params) {
351 |             let tempUrl = url,
352 |                 keyArr = Object.keys(params)
353 |             keyArr.forEach(item => {
354 |                 tempUrl += `&${item}=${params[item]}`
355 |             })
356 |             tempUrl = tempUrl.replace(/\&/, '?')
357 |             return tempUrl
358 |         }
359 |     }
360 | }
361 | </script>
362 | 
363 | <style lang="scss">
364 | .navigator-hover {
365 |     background: transparent;
366 |     opacity: 1;
367 | }
368 | @mixin ellipsis($num: 1) {
369 |     overflow: hidden;
370 |     text-overflow: ellipsis;
371 |     @if $num==1 {
372 |         white-space: nowrap;
373 |     } @else {
374 |         display: -webkit-box;
375 |         -webkit-line-clamp: $num;
376 |         /* autoprefixer: off */
377 |         -webkit-box-orient: vertical;
378 |         /* autoprefixer: on */
379 |     }
380 | }
381 | 
382 | // 三角形
383 | %triangle-basic {
384 |     content: '';
385 |     height: 0;
386 |     width: 0;
387 |     overflow: hidden;
388 | }
389 | 
390 | @mixin triangle($direction, $size, $borderColor) {
391 |     @extend %triangle-basic;
392 |     @if $direction==top {
393 |         border-bottom: $size solid $borderColor;
394 |         border-left: $size dashed transparent;
395 |         border-right: $size dashed transparent;
396 |         border-top: 0;
397 |     } @else if $direction==right {
398 |         border-left: $size solid $borderColor;
399 |         border-top: $size dashed transparent;
400 |         border-bottom: $size dashed transparent;
401 |         border-right: 0;
402 |     } @else if $direction==bottom {
403 |         border-top: $size solid $borderColor;
404 |         border-left: $size dashed transparent;
405 |         border-right: $size dashed transparent;
406 |         border-bottom: 0;
407 |     } @else if $direction==left {
408 |         border-right: $size solid $borderColor;
409 |         border-top: $size dashed transparent;
410 |         border-bottom: $size dashed transparent;
411 |         border-left: 0;
412 |     }
413 | }
414 | 
415 | a {
416 |     text-decoration: none;
417 | }
418 | 
419 | .z-table {
420 |     position: relative;
421 |     display: inline-block;
422 |     height: 100%;
423 |     min-height: 130upx;
424 |     width: 100%;
425 |     background: #fff;
426 |     border: solid 2upx #ccc;
427 |     font-size: $uni-font-size-sm;
428 |     box-sizing: border-box;
429 | 
430 |     .z-table-main {
431 |         height: 100%;
432 |         box-sizing: border-box;
433 |     }
434 | 
435 |     .z-table-container {
436 |         height: 100%;
437 |         overflow: scroll;
438 |         box-sizing: border-box;
439 |     }
440 | 
441 |     .z-table-pack {
442 |         position: relative;
443 |         min-height: 100%;
444 |         width: fit-content;
445 |     }
446 | 
447 |     .z-table-title {
448 |         position: sticky;
449 |         top: 0;
450 |         height: 64upx;
451 |         z-index: 1;
452 | 
453 |         .z-table-title-item {
454 |             border-bottom: solid 1upx #dbdbdb;
455 |             background: #f8f8f8;
456 |         }
457 | 
458 |         .z-table-stick-side {
459 |             position: sticky;
460 |             top: 0;
461 |             left: 0;
462 |             border-right: solid 1upx #dbdbdb;
463 |             box-sizing: border-box;
464 |         }
465 |     }
466 | 
467 |     .table-container-box.short-table {
468 |         padding-bottom: 48rpx;
469 |     }
470 | 
471 |     .z-table-title,
472 |     .z-table-container-row {
473 |         display: flex;
474 |         width: fit-content;
475 |         white-space: nowrap;
476 |         box-sizing: border-box;
477 | 
478 |         .z-table-title-item,
479 |         .z-table-container-col {
480 |             @include ellipsis();
481 |             display: inline-flex;
482 |             padding: 0 16upx;
483 |             height: 64upx;
484 |             align-items: center;
485 |             line-height: 64upx;
486 |             box-sizing: border-box;
487 |         }
488 |     }
489 | 
490 |     .z-table-container-row {
491 |         z-index: 0;
492 |         border-bottom: solid 1upx #f4f4f4;
493 |         box-sizing: border-box;
494 |     }
495 | 
496 |     .z-table-stick-side {
497 |         position: sticky;
498 |         left: 0;
499 |         background: #f7f9ff;
500 |         border-right: solid 1upx #dbdbdb;
501 |         box-sizing: border-box;
502 |     }
503 | 
504 |     .z-table-bottom {
505 |         position: absolute;
506 |         bottom: 0;
507 |         z-index: 9;
508 |         display: flex;
509 |         justify-items: center;
510 |         width: fit-content;
511 |         background: #4298f7 !important;
512 |         color: #fff !important;
513 |         white-space: nowrap;
514 |         box-sizing: border-box;
515 | 
516 |         &.long-table {
517 |             position: sticky;
518 |         }
519 | 
520 |         .z-table-stick-side {
521 |             background: #4298f7 !important;
522 |             box-sizing: border-box;
523 |         }
524 | 
525 |         .z-table-bottom-col {
526 |             display: inline-flex;
527 |             align-items: center;
528 |             text-align: center;
529 |             padding: 16upx;
530 |             box-sizing: border-box;
531 |         }
532 | 
533 |         .z-table-bottom-text {
534 |             line-height: 100%;
535 |             box-sizing: border-box;
536 |         }
537 | 
538 |         .z-table-bottom-text-title {
539 |             margin-bottom: 10upx;
540 |             font-size: 22upx;
541 |             color: #aad0ff;
542 |             box-sizing: border-box;
543 |         }
544 | 
545 |         .sum {
546 |             margin-left: 14upx;
547 |             font-size: 28upx;
548 |             box-sizing: border-box;
549 |         }
550 |     }
551 | 
552 |     .table-empty {
553 |         position: absolute;
554 |         top: 64upx;
555 |         height: 64upx;
556 |         line-height: 64upx;
557 |         width: 100%;
558 |         text-align: center;
559 |     }
560 | 
561 |     .sort {
562 |         display: inline-block;
563 |         padding: 5upx;
564 |         vertical-align: text-bottom;
565 | 
566 |         .up-arrow {
567 |             @include triangle(top, 10upx, #ccc);
568 |             margin-bottom: 5upx;
569 | 
570 |             &.action {
571 |                 @include triangle(top, 10upx, #4298f7);
572 |             }
573 |         }
574 | 
575 |         .down-arrow {
576 |             @include triangle(bottom, 10upx, #ccc);
577 | 
578 |             &.action {
579 |                 @include triangle(bottom, 10upx, #4298f7);
580 |             }
581 |         }
582 |     }
583 | 
584 |     // 1.0.5
585 |     .z-loading {
586 |         position: absolute;
587 |         top: 0;
588 |         left: 0;
589 |         z-index: 2;
590 |         display: flex;
591 |         align-items: center;
592 |         justify-content: center;
593 |         height: 100%;
594 |         width: 100%;
595 |         background: #fff;
596 |         opacity: 0;
597 |         transition: all 0.3s;
598 | 
599 |         &.ztableLoading {
600 |             opacity: 1;
601 |         }
602 | 
603 |         .z-loading-animate {
604 |             position: relative;
605 |             display: inline-block;
606 |             width: 30upx;
607 |             height: 30upx;
608 |             margin-right: 20upx;
609 |             border-radius: 100%;
610 |             border: solid 6upx #ccc;
611 |             vertical-align: middle;
612 |             animation: rotate 1s ease-in-out infinite;
613 | 
614 |             &::after {
615 |                 content: '';
616 |                 display: block;
617 |                 position: absolute;
618 |                 top: -10upx;
619 |                 z-index: 1;
620 |                 background: #fff;
621 |                 width: 20upx;
622 |                 height: 20upx;
623 |                 border-radius: 10upx;
624 |             }
625 |         }
626 | 
627 |         @keyframes rotate {
628 |             from {
629 |                 transform: rotate(0deg);
630 |             }
631 | 
632 |             to {
633 |                 transform: rotate(360deg);
634 |             }
635 |         }
636 |     }
637 | }
638 | </style>
639 | 


--------------------------------------------------------------------------------
/pages/index/index.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 | 	<view class="content">
   3 | 		<image class="logo" src="/static/z-table/z-table.png"></image>
   4 | 		<view class="version">v 1.0.7</view>
   5 | 		<view class="title">
   6 | 			注意:
   7 | 			<view>本示例必须使用sass插件,请在HbuildX的工具-插件安装中安装scss/sass编译插件</view>
   8 | 			<view class="toggle-btn" @click="showUpData = !showUpData">{{ showUpData ? '隐藏' : '显示' }}更新内容</view>
   9 | 			<view v-if="showUpData">
  10 | 				<text space="ensp">
  11 | 				1.0.7更新内容：
  12 | 				    优化dosum事件，如果当前列中有个字段为非数字则计算出来的总和为'-'
  13 | 				1.0.6更新内容：
  14 | 				    添加title或者表格内容异步获取时的loading，注意如果需要异步加载，需要把tableData初始值设为false，当没有数据的时候值为空数组
  15 | 				1.0.4更新内容：
  16 | 				    数据高度小于视窗高度的时候，底部统计不再显示跟随最后一条数据显示，而是沉在视窗底部
  17 | 				</text>
  18 | 			</view>
  19 | 		</view>
  20 | 		<view class="example-block">
  21 | 			<view class="example-title block-title">基础使用示例</view>
  22 | 			<view class="table">
  23 | 				<z-table :tableData="baseTableData" :columns="baseColumns"></z-table>
  24 | 			</view>
  25 | 			<view class="example-title">code:</view>
  26 | 			<scroll-view scroll-x class="codes">
  27 | 				<text space="ensp">
  28 | 					html代码:
  29 | 					{{baseHtml}}
  30 | 					
  31 | 					js代码:
  32 | 					baseTableData: [{
  33 | 						    name: "张三",
  34 | 						    age: 18,
  35 | 						    gender: "男"
  36 | 						},{
  37 | 						    name: "赵四",
  38 | 						    age: 16,
  39 | 						    gender: "女"
  40 | 						},{
  41 | 						    name: "王五",
  42 | 						    age: 20,
  43 | 						    gender: "男"
  44 | 						},{
  45 | 						    name: "李六",
  46 | 						    age: 18,
  47 | 						    gender: "女"
  48 | 						}],
  49 | 						
  50 | 					baseColumns: [{
  51 | 						    title: "姓名",
  52 | 						    key: "name",
  53 | 						    width: 100
  54 | 						},{
  55 | 						    title: "性别",
  56 | 						    key: "gender",
  57 | 						    width: 100
  58 | 						},{
  59 | 						    title: "年龄",
  60 | 						    key: "age",
  61 | 						    width: 100
  62 | 						}]
  63 | 				</text>
  64 | 			</scroll-view>
  65 | 			<view class="example-explain">
  66 | 				<view class="explain-title">参数</view>
  67 | 				<view class="explain-context">
  68 | 					<view class="explain">tableData [Array] <text class="explain-text">需要展示的数据</text></view>
  69 | 					<view class="explain">columns [Array] <text class="explain-text">表格列的配置描述</text></view>
  70 | 				</view>
  71 | 				<view class="explain-title">columns具体参数</view>
  72 | 				<view class="explain-context">
  73 | 					<view class="explain">title [String] <text class="explain-text">列名</text></view>
  74 | 					<view class="explain">key [String] <text class="explain-text">对应tableData中的字段名</text></view>
  75 | 					<view class="explain">width [Number] <text class="explain-text">列宽(如果不给列宽会出现列宽不一致的问题)</text></view>
  76 | 				</view>
  77 | 			</view>
  78 | 		</view>
  79 | 		<view class="example-block">
  80 | 			<view class="example-title block-title">左侧固定的表格示例</view>
  81 | 			<view class="table">
  82 | 				<z-table :tableData="stickSideTableData" :columns="stickSideColumns" stickSide></z-table>
  83 | 			</view>
  84 | 			<view class="example-title">code:</view>
  85 | 			<scroll-view scroll-x class="codes">
  86 | 				<text space="ensp">
  87 | 					html代码:
  88 | 					{{stickSideHtml}}
  89 | 					
  90 | 					js代码:
  91 | 					stickSideTableData: [{
  92 | 						    name: "张三",
  93 | 						    age: 18,
  94 | 						    gender: "男"
  95 | 						},{
  96 | 						    name: "赵四",
  97 | 						    age: 16,
  98 | 						    gender: "女"
  99 | 						},{
 100 | 						    name: "王五",
 101 | 						    age: 20,
 102 | 						    gender: "男"
 103 | 						},{
 104 | 						    name: "李六",
 105 | 						    age: 18,
 106 | 						    gender: "女"
 107 | 						}],
 108 | 						
 109 | 					stickSideColumns: [{
 110 | 						    title: "姓名",
 111 | 						    key: "name",
 112 | 						    width: 100
 113 | 						},{
 114 | 						    title: "性别",
 115 | 						    key: "gender",
 116 | 						    width: 400
 117 | 						},{
 118 | 						    title: "年龄",
 119 | 						    key: "age",
 120 | 						    width: 400
 121 | 						}]
 122 | 				</text>
 123 | 			</scroll-view>
 124 | 			<view class="example-explain">
 125 | 				<view class="explain-title">参数</view>
 126 | 				<view class="explain-context">
 127 | 					<view class="explain">其他参数一样</view>
 128 | 					<view class="explain">stickSide [Boolean] <text class="explain-text">是否固定左侧第一列</text></view>
 129 | 				</view>
 130 | 			</view>
 131 | 		</view>
 132 | 		<view class="example-block">
 133 | 			<view class="example-title block-title">显示底部统计的表格示例</view>
 134 | 			<view class="table">
 135 | 				<z-table :tableData="showBottomSumTableData" :columns="showBottomSumColumns" showBottomSum></z-table>
 136 | 			</view>
 137 | 			<view class="example-title">code:</view>
 138 | 			<scroll-view scroll-x class="codes">
 139 | 				<text space="ensp">
 140 | 					html代码:
 141 | 					{{showBottomSumHtml}}
 142 | 					
 143 | 					js代码:
 144 | 					showBottomSumTableData: [{
 145 | 						    name: "张三",
 146 | 						    age: 18,
 147 | 						    gender: "男"
 148 | 						},{
 149 | 						    name: "赵四",
 150 | 						    age: 16,
 151 | 						    gender: "女"
 152 | 						},{
 153 | 						    name: "王五",
 154 | 						    age: 20,
 155 | 						    gender: "男"
 156 | 						},{
 157 | 						    name: "李六",
 158 | 						    age: 18,
 159 | 						    gender: "女"
 160 | 						}],
 161 | 						
 162 | 					showBottomSumColumns: [{
 163 | 						    title: "姓名",
 164 | 						    key: "name",
 165 | 						    width: 100
 166 | 						},{
 167 | 						    title: "性别",
 168 | 						    key: "gender",
 169 | 						    width: 400
 170 | 						},{
 171 | 						    title: "年龄",
 172 | 						    key: "age",
 173 | 						    width: 400
 174 | 						}]
 175 | 				</text>
 176 | 			</scroll-view>
 177 | 			<view class="example-explain">
 178 | 				<view class="explain-title">参数</view>
 179 | 				<view class="explain-context">
 180 | 					<view class="explain">其他参数一样</view>
 181 | 					<view class="explain">showBottomSum [Boolean] <text class="explain-text">是否显示底部统计行</text></view>
 182 | 				</view>
 183 | 			</view>
 184 | 		</view>
 185 | 		<view class="example-block">
 186 | 			<view class="example-title block-title">自定义内容的表格示例</view>
 187 | 			<view class="table">
 188 | 				<z-table :tableData="customTableData" :columns="customColumns"></z-table>
 189 | 			</view>
 190 | 			<view class="example-title">code:</view>
 191 | 			<scroll-view scroll-x class="codes">
 192 | 				<text space="ensp">
 193 | 					html代码:
 194 | 					{{customHtml}}
 195 | 					
 196 | 					js代码:
 197 | 					customTableData: [{
 198 | 						    name: "张三",
 199 | 						    age: 18,
 200 | 						    gender: "男"
 201 | 						},{
 202 | 						    name: "赵四",
 203 | 						    age: 16,
 204 | 						    gender: "女"
 205 | 						},{
 206 | 						    name: "王五",
 207 | 						    age: 20,
 208 | 						    gender: "男"
 209 | 						},{
 210 | 						    name: "李六",
 211 | 						    age: 18,
 212 | 						    gender: "女"
 213 | 						}],
 214 | 						
 215 | 					customColumns: [{
 216 | 						    title: "姓名",
 217 | 						    format: {
 218 | 						        template: "我叫 #name#",
 219 | 						        names: ["name"]
 220 | 						    },
 221 | 						    width: 200
 222 | 						},{
 223 | 						    title: "性别",
 224 | 						    key: "gender",
 225 | 						    width: 400
 226 | 						},{
 227 | 						    title: "年龄",
 228 | 						    key: "age",
 229 | 						    width: 400
 230 | 						}]
 231 | 				</text>
 232 | 			</scroll-view>
 233 | 			<view class="example-explain">
 234 | 				<view class="explain-title">参数</view>
 235 | 				<view class="explain-context">
 236 | 					<view class="explain">其他参数一样</view>
 237 | 					<view class="explain">
 238 | 						columns中的key替换为format
 239 | 					</view>
 240 | 					<view class="explain">format [Object] <text class="explain-text">自定义内容</text></view>
 241 | 				</view>
 242 | 				<view class="explain-title">format具体参数</view>
 243 | 				<view class="explain-context">
 244 | 					<view class="explain">template [String] <text class="explain-text">自定义内容模版需要用到tableData中的字段时用#key#(key是字段名)来替换</text></view>
 245 | 					<view class="explain">name [Array] <text class="explain-text">对应tableData中的字段名数组</text></view>
 246 | 				</view>
 247 | 			</view>
 248 | 		</view>
 249 | 		<view class="example-block">
 250 | 			<view class="example-title block-title">单元格内容为链接的示例</view>
 251 | 			<view class="table">
 252 | 				<z-table :tableData="isLinkTableData" :columns="isLinkColumns"></z-table>
 253 | 			</view>
 254 | 			<view class="example-title">code:</view>
 255 | 			<scroll-view scroll-x class="codes">
 256 | 				<text space="ensp">
 257 | 					html代码:
 258 | 					{{isLinkHtml}}
 259 | 					
 260 | 					js代码:
 261 | 					isLinkTableData: [{
 262 | 						    name: "张三",
 263 | 						    age: 18,
 264 | 						    gender: "男"
 265 | 						},{
 266 | 						    name: "赵四",
 267 | 						    age: 16,
 268 | 						    gender: "女"
 269 | 						},{
 270 | 						    name: "王五",
 271 | 						    age: 20,
 272 | 						    gender: "男"
 273 | 						},{
 274 | 						    name: "李六",
 275 | 						    age: 18,
 276 | 						    gender: "女"
 277 | 						}],
 278 | 						
 279 | 					isLinkColumns: [{
 280 | 						    title: "姓名",
 281 | 						    key: "name",
 282 | 						    isLink: {
 283 | 						        url: "https://www.baidu.com",
 284 | 						        params: ["from|name"]
 285 | 						    },
 286 | 						    width: 100							
 287 | 						},{
 288 | 						    title: "性别",
 289 | 						    key: "gender",
 290 | 						    width: 100
 291 | 						},{
 292 | 						    title: "年龄",
 293 | 						    key: "age",
 294 | 						    width: 100
 295 | 						}]
 296 | 				</text>
 297 | 			</scroll-view>
 298 | 			<view class="example-explain">
 299 | 				<view class="explain-title">参数</view>
 300 | 				<view class="explain-context">
 301 | 					<view class="explain">其他参数一样</view>
 302 | 					<view class="explain">
 303 | 						columns中的添加参数isLink
 304 | 					</view>
 305 | 					<view class="explain">isLink [Object] <text class="explain-text">单元格为链接的数据</text></view>
 306 | 				</view>
 307 | 				<view class="explain-title">isLink具体参数</view>
 308 | 				<view class="explain-context">
 309 | 					<view class="explain">url [String] <text class="explain-text">链接地址, 在H5上地址带http被认为是外部链接</text></view>
 310 | 					<view class="explain">params [Array] <text class="explain-text">地址带的参数[key|value, key|value, ...]每一项都是key和value以"|"链接,如果不带"|"默认键值同名 value就是tableData中的字段名</text></view>
 311 | 				</view>
 312 | 			</view>
 313 | 		</view>
 314 | 		<view class="example-block">
 315 | 			<view class="example-title block-title">自定义判空显示的示例</view>
 316 | 			<view class="table">
 317 | 				<z-table :tableData="emptyTableData" :columns="emptyColumns" :showLoading="false" emptyText="设置了showLoading=false才会看到我"></z-table>
 318 | 			</view>
 319 | 			<view class="example-title">code:</view>
 320 | 			<scroll-view scroll-x class="codes">
 321 | 				<text space="ensp">
 322 | 					html代码:
 323 | 					{{emptyHtml}}
 324 | 					
 325 | 					js代码:
 326 | 					emptyTableData:  [],						
 327 | 					emptyColumns: [{
 328 | 						    title: "姓名",
 329 | 						    key: "name",
 330 | 						    width: 100
 331 | 						},{
 332 | 						    title: "性别",
 333 | 						    key: "gender",
 334 | 						    width: 100
 335 | 						},{
 336 | 						    title: "年龄",
 337 | 						    key: "age",
 338 | 						    width: 100
 339 | 						}]
 340 | 				</text>
 341 | 			</scroll-view>
 342 | 			<view class="example-explain">
 343 | 				<view class="explain-title">参数</view>
 344 | 				<view class="explain-context">
 345 | 					<view class="explain">其他参数一样</view>
 346 | 					<view class="explain">showLoading [Boolean] <text class="explain-text">对于第一次渲染表格时显示正在加载</text></view>
 347 | 					<view class="explain">emptyText [String] <text class="explain-text">空数据显示的文字内容, 默认:暂无数据</text></view>
 348 | 				</view>
 349 | 			</view>
 350 | 		</view>
 351 | 		<view class="example-block">
 352 | 			<view class="example-title block-title">自定义高度示例</view>
 353 | 			<view class="table">
 354 | 				<z-table :tableData="heightTableData" :columns="heightColumns" :tableHeight="192"></z-table>
 355 | 			</view>
 356 | 			<view class="example-title">code:</view>
 357 | 			<scroll-view scroll-x class="codes">
 358 | 				<text space="ensp">
 359 | 					html代码:
 360 | 					{{heightHtml}}
 361 | 					
 362 | 					js代码:
 363 | 					heightTableData: [{
 364 | 						    name: "张三",
 365 | 						    age: 18,
 366 | 						    gender: "男"
 367 | 						},{
 368 | 						    name: "赵四",
 369 | 						    age: 16,
 370 | 						    gender: "女"
 371 | 						},{
 372 | 						    name: "王五",
 373 | 						    age: 20,
 374 | 						    gender: "男"
 375 | 						},{
 376 | 						    name: "李六",
 377 | 						    age: 18,
 378 | 						    gender: "女"
 379 | 						}],						
 380 | 					heightColumns: [{
 381 | 						    title: "姓名",
 382 | 						    key: "name",
 383 | 						    width: 100
 384 | 						},{
 385 | 						    title: "性别",
 386 | 						    key: "gender",
 387 | 						    width: 100
 388 | 						},{
 389 | 						    title: "年龄",
 390 | 						    key: "age",
 391 | 						    width: 100
 392 | 						}]
 393 | 				</text>
 394 | 			</scroll-view>
 395 | 			<view class="example-explain">
 396 | 				<view class="explain-title">参数</view>
 397 | 				<view class="explain-context">
 398 | 					<view class="explain">其他参数一样</view>
 399 | 					<view class="explain">tableHeight [Number] <text class="explain-text">表格的高度超出会开启滚动,(实测谷歌亲儿子机型可能会出现下拉触发整个页面下拉刷新的问题)</text></view>
 400 | 				</view>
 401 | 			</view>
 402 | 		</view>
 403 | 		<view class="example-block">
 404 | 			<view class="example-title block-title">开启排序示例</view>
 405 | 			<view class="table">
 406 | 				<z-table :tableData="sortTableData" :columns="sortColumns"  @onSort="doSort"></z-table>
 407 | 			</view>
 408 | 			<view class="example-title">code:</view>
 409 | 			<scroll-view scroll-x class="codes">
 410 | 				<text space="ensp">
 411 | 					html代码:
 412 | 					{{sortHtml}}
 413 | 					
 414 | 					js代码:
 415 | 					sortTableData: [{
 416 | 						    name: "张三",
 417 | 						    age: 18,
 418 | 						    gender: "男"
 419 | 						},{
 420 | 						    name: "赵四",
 421 | 						    age: 16,
 422 | 						    gender: "女"
 423 | 						},{
 424 | 						    name: "王五",
 425 | 						    age: 20,
 426 | 						    gender: "男"
 427 | 						},{
 428 | 						    name: "李六",
 429 | 						    age: 18,
 430 | 						    gender: "女"
 431 | 						}],
 432 | 						
 433 | 					sortColumns: [{
 434 | 						    title: "姓名",
 435 | 						    key: "name",
 436 | 						    width: 100
 437 | 						},{
 438 | 						    title: "性别",
 439 | 						    key: "gender",
 440 | 						    sort: true,
 441 | 						    width: 100
 442 | 						},{
 443 | 						    title: "年龄",
 444 | 						    key: "age",
 445 | 						    sort: true,
 446 | 						    width: 100
 447 | 						}]
 448 | 				</text>
 449 | 			</scroll-view>
 450 | 			<view class="example-explain">
 451 | 				<view class="explain-title">参数</view>
 452 | 				<view class="explain-context">
 453 | 					<view class="explain">sort [Boolean] <text class="explain-text">开启排序</text></view>
 454 | 				</view>
 455 | 				<view class="explain-title">回调事件</view>
 456 | 				<view class="explain-context">
 457 | 					<view class="explain">onSort [Function] <text class="explain-text">向上触发sort事件传递参数 [Object]: 
 458 | 					{
 459 | 				        key: 列的字段名, 
 460 | 				        type: 正序"asc"/倒序"desc"
 461 | 					}
 462 | 					最终排序需要到外部自行实现
 463 | 					</text></view>
 464 | 				</view>
 465 | 				<view class="explain-title">事件</view>
 466 | 				<view class="explain-context">
 467 | 					<view class="explain">resetSort [Function] <text class="explain-text">父级可以调用这个方法来重置排序</text></view>
 468 | 				</view>
 469 | 			</view>
 470 | 		</view>
 471 | 		<view class="example-block">
 472 | 			<view class="example-title block-title">开启所有功能</view>
 473 | 			<view class="table">
 474 | 				<z-table :tableData="finaleTableData" :columns="finaleColumns" @onSort="doSort" stickSide showBottomSum emptyText='设置了showLoading=false才会看到我' :tableHeight='600'></z-table>
 475 | 			</view>
 476 | 			<view class="example-title">code:</view>
 477 | 			<scroll-view scroll-x class="codes">
 478 | 				<text space="ensp">
 479 | 					html代码:
 480 | 					{{finaleHtml}}
 481 | 					
 482 | 					js代码:
 483 | 					sortTableData: [{
 484 | 						    name: "张三",
 485 | 						    age: 18,
 486 | 						    gender: "男"
 487 | 						},{
 488 | 						    name: "赵四",
 489 | 						    age: 16,
 490 | 						    gender: "女"
 491 | 						},{
 492 | 						    name: "王五",
 493 | 						    age: 20,
 494 | 						    gender: "男"
 495 | 						},{
 496 | 						    name: "李六",
 497 | 						    age: 18,
 498 | 						    gender: "女"
 499 | 						},
 500 | 						...
 501 | 						],
 502 | 						
 503 | 					sortColumns: [{
 504 | 						    title: "姓名",
 505 | 						    key: "name",
 506 | 						    format: {
 507 | 						        template: "我叫 #name#",
 508 | 						        names: ["name"]
 509 | 						    },
 510 | 						    isLink: {
 511 | 						        url: "https://www.baidu.com",
 512 | 						        params: ["from|name"]
 513 | 						    },
 514 | 						    width: 200
 515 | 						},{
 516 | 						    title: "性别",
 517 | 						    key: "gender",
 518 | 						    sort: true,
 519 | 						    width: 100
 520 | 						},{
 521 | 						    title: "年龄",
 522 | 						    key: "age",
 523 | 						    sort: true,
 524 | 						    width: 100
 525 | 						}]
 526 | 				</text>
 527 | 			</scroll-view>
 528 | 		</view>
 529 | 	</view>
 530 | </template>
 531 | 
 532 | <script>
 533 | import zTable from "../../components/z-table/z-table.vue";
 534 | 
 535 | export default {
 536 | 	data() {
 537 | 		return {
 538 | 			title: "zTable使用示例",
 539 | 			showUpData: false,
 540 | 			baseTableData: [
 541 | 				{
 542 | 					name: "张三",
 543 | 					age: 18,
 544 | 					gender: "男"
 545 | 				},
 546 | 				{
 547 | 					name: "赵四",
 548 | 					age: 16,
 549 | 					gender: "女"
 550 | 				},
 551 | 				{
 552 | 					name: "王五",
 553 | 					age: 20,
 554 | 					gender: "男"
 555 | 				},
 556 | 				{
 557 | 					name: "李六",
 558 | 					age: 18,
 559 | 					gender: "女"
 560 | 				}
 561 | 			],
 562 | 			baseColumns: [
 563 | 				{
 564 | 					title: "姓名",
 565 | 					key: "name",
 566 | 					width: 100
 567 | 				},
 568 | 				{
 569 | 					title: "性别",
 570 | 					key: "gender",
 571 | 					width: 400
 572 | 				},
 573 | 				{
 574 | 					title: "年龄",
 575 | 					key: "age",
 576 | 					width: 400
 577 | 				}
 578 | 			],
 579 | 			baseHtml: "<z-table :tableData='baseTableData' :columns='baseColumns'></z-table>",
 580 | 			// 固定左侧
 581 | 			stickSideTableData: [{
 582 | 				name: "张三",
 583 | 				age: 18,
 584 | 				gender: "男"
 585 | 			},{
 586 | 				name: "赵四",
 587 | 				age: 16,
 588 | 				gender: "女"
 589 | 			},{
 590 | 				name: "王五",
 591 | 				age: 20,
 592 | 				gender: "男"
 593 | 			},{
 594 | 				name: "李六",
 595 | 				age: 18,
 596 | 				gender: "女"
 597 | 			}],
 598 | 			stickSideColumns: [{
 599 | 				title: "姓名",
 600 | 				key: "name",
 601 | 				width: 100
 602 | 			},{
 603 | 				title: "性别",
 604 | 				key: "gender",
 605 | 				width: 400
 606 | 			},{
 607 | 				title: "年龄",
 608 | 				key: "age",
 609 | 				width: 400
 610 | 			}],
 611 | 			stickSideHtml: "<z-table :tableData='stickSideTableData' :columns='stickSideColumns' stickSide='true'></z-table>",
 612 | 			// 底部统计表格
 613 | 			showBottomSumTableData: [{
 614 | 				name: "张三",
 615 | 				age: 18,
 616 | 				gender: "男"
 617 | 			},{
 618 | 				name: "赵四",
 619 | 				age: 16,
 620 | 				gender: "女"
 621 | 			},{
 622 | 				name: "王五",
 623 | 				age: 20,
 624 | 				gender: "男"
 625 | 			},{
 626 | 				name: "李六",
 627 | 				age: 18,
 628 | 				gender: "女"
 629 | 			}],
 630 | 			showBottomSumColumns: [{
 631 | 				title: "姓名",
 632 | 				key: "name",
 633 | 				width: 100
 634 | 			},{
 635 | 				title: "性别",
 636 | 				key: "gender",
 637 | 				width: 400
 638 | 			},{
 639 | 				title: "年龄",
 640 | 				key: "age",
 641 | 				width: 400
 642 | 			}],
 643 | 			showBottomSumHtml: "<z-table :tableData='showBottomSumTableData' :columns='showBottomSumColumns' showBottomSum='true'></z-table>",
 644 | 			// 自定义内容的表格
 645 | 			customTableData: [{
 646 | 				name: "张三",
 647 | 				age: 18,
 648 | 				gender: "男"
 649 | 			},{
 650 | 				name: "赵四",
 651 | 				age: 16,
 652 | 				gender: "女"
 653 | 			},{
 654 | 				name: "王五",
 655 | 				age: 20,
 656 | 				gender: "男"
 657 | 			},{
 658 | 				name: "李六",
 659 | 				age: 18,
 660 | 				gender: "女"
 661 | 			}],
 662 | 			customColumns: [{
 663 | 				title: "姓名",
 664 | 				format: {
 665 | 				    template: "我叫 #name#",
 666 | 				    names: ["name"]
 667 | 				},
 668 | 				width: 200
 669 | 			},{
 670 | 				title: "性别",
 671 | 				key: "gender",
 672 | 				width: 400
 673 | 			},{
 674 | 				title: "年龄",
 675 | 				key: "age",
 676 | 				width: 400
 677 | 			}],
 678 | 			customHtml: "<z-table :tableData='customTableData' :columns='customColumns'></z-table>",
 679 | 			// 单元格为链接
 680 | 			isLinkTableData: [
 681 | 				{
 682 | 					name: "张三",
 683 | 					age: 18,
 684 | 					gender: "男"
 685 | 				},
 686 | 				{
 687 | 					name: "赵四",
 688 | 					age: 16,
 689 | 					gender: "女"
 690 | 				},
 691 | 				{
 692 | 					name: "王五",
 693 | 					age: 20,
 694 | 					gender: "男"
 695 | 				},
 696 | 				{
 697 | 					name: "李六",
 698 | 					age: 18,
 699 | 					gender: "女"
 700 | 				}
 701 | 			],
 702 | 			isLinkColumns: [
 703 | 				{
 704 | 					title: "姓名",
 705 | 					key: "name",
 706 | 					isLink: {
 707 | 						url: "https://www.baidu.com",
 708 | 						params: ["from|name"]
 709 | 					},
 710 | 					width: 100
 711 | 				},
 712 | 				{
 713 | 					title: "性别",
 714 | 					key: "gender",
 715 | 					width: 400
 716 | 				},
 717 | 				{
 718 | 					title: "年龄",
 719 | 					key: "age",
 720 | 					width: 400
 721 | 				}
 722 | 			],
 723 | 			isLinkHtml: "<z-table :tableData='isLinkTableData' :columns='isLinkColumns'></z-table>",
 724 | 			// 空字符串
 725 | 			emptyTableData: [],
 726 | 			emptyColumns: [
 727 | 				{
 728 | 					title: "姓名",
 729 | 					key: "name",
 730 | 					empty: {
 731 | 						url: "https://www.baidu.com",
 732 | 						params: ["from|name"]
 733 | 					},
 734 | 					width: 100
 735 | 				},
 736 | 				{
 737 | 					title: "性别",
 738 | 					key: "gender",
 739 | 					width: 400
 740 | 				},
 741 | 				{
 742 | 					title: "年龄",
 743 | 					key: "age",
 744 | 					width: 400
 745 | 				}
 746 | 			],
 747 | 			emptyHtml: "<z-table :tableData='emptyTableData' :columns='emptyColumns' :showLoading='false' emptyText='设置了showLoading=false才会看到我'></z-table>",
 748 | 			// 自定义高度
 749 | 			heightTableData: [
 750 | 				{
 751 | 					name: "张三",
 752 | 					age: 18,
 753 | 					gender: "男"
 754 | 				},
 755 | 				{
 756 | 					name: "赵四",
 757 | 					age: 16,
 758 | 					gender: "女"
 759 | 				},
 760 | 				{
 761 | 					name: "王五",
 762 | 					age: 20,
 763 | 					gender: "男"
 764 | 				},
 765 | 				{
 766 | 					name: "李六",
 767 | 					age: 18,
 768 | 					gender: "女"
 769 | 				}
 770 | 			],
 771 | 			heightColumns: [
 772 | 				{
 773 | 					title: "姓名",
 774 | 					key: "name",
 775 | 					height: {
 776 | 						url: "https://www.baidu.com",
 777 | 						params: ["from|name"]
 778 | 					},
 779 | 					width: 100
 780 | 				},
 781 | 				{
 782 | 					title: "性别",
 783 | 					key: "gender",
 784 | 					width: 400
 785 | 				},
 786 | 				{
 787 | 					title: "年龄",
 788 | 					key: "age",
 789 | 					width: 400
 790 | 				}
 791 | 			],
 792 | 			heightHtml: "<z-table :tableData='heightTableData' :columns='heightColumns' :tableHeight='192'></z-table>",
 793 | 			// 开启排序
 794 | 			sortTableData: [
 795 | 				{
 796 | 					name: "张三",
 797 | 					age: 18,
 798 | 					gender: "男"
 799 | 				},
 800 | 				{
 801 | 					name: "赵四",
 802 | 					age: 16,
 803 | 					gender: "女"
 804 | 				},
 805 | 				{
 806 | 					name: "王五",
 807 | 					age: 20,
 808 | 					gender: "男"
 809 | 				},
 810 | 				{
 811 | 					name: "李六",
 812 | 					age: 18,
 813 | 					gender: "女"
 814 | 				}
 815 | 			],
 816 | 			sortColumns: [
 817 | 				{
 818 | 					title: "姓名",
 819 | 					key: "name",
 820 | 					width: 100
 821 | 				},
 822 | 				{
 823 | 					title: "性别",
 824 | 					key: "gender",
 825 | 					sort: true,
 826 | 					width: 400
 827 | 				},
 828 | 				{
 829 | 					title: "年龄",
 830 | 					key: "age",
 831 | 					sort: true,
 832 | 					width: 400
 833 | 				}
 834 | 			],
 835 | 			sortHtml: "<z-table :tableData='sortTableData' :columns='sortColumns' @sort='doSort'></z-table>",
 836 | 			finaleTableData: [
 837 | 				{
 838 | 					name: "张三",
 839 | 					age: 18,
 840 | 					gender: "男"
 841 | 				},
 842 | 				{
 843 | 					name: "赵四",
 844 | 					age: 16,
 845 | 					gender: "女"
 846 | 				},
 847 | 				{
 848 | 					name: "王五",
 849 | 					age: 20,
 850 | 					gender: "男"
 851 | 				},
 852 | 				{
 853 | 					name: "李六",
 854 | 					age: 18,
 855 | 					gender: "女"
 856 | 				},
 857 | 				{
 858 | 					name: "张三",
 859 | 					age: 18,
 860 | 					gender: "男"
 861 | 				},
 862 | 				{
 863 | 					name: "赵四",
 864 | 					age: 16,
 865 | 					gender: "女"
 866 | 				},
 867 | 				{
 868 | 					name: "王五",
 869 | 					age: 20,
 870 | 					gender: "男"
 871 | 				},
 872 | 				{
 873 | 					name: "李六",
 874 | 					age: 18,
 875 | 					gender: "女"
 876 | 				},
 877 | 				{
 878 | 					name: "张三",
 879 | 					age: 18,
 880 | 					gender: "男"
 881 | 				},
 882 | 				{
 883 | 					name: "赵四",
 884 | 					age: 16,
 885 | 					gender: "女"
 886 | 				},
 887 | 				{
 888 | 					name: "王五",
 889 | 					age: 20,
 890 | 					gender: "男"
 891 | 				},
 892 | 				{
 893 | 					name: "李六",
 894 | 					age: 18,
 895 | 					gender: "女"
 896 | 				}
 897 | 			],
 898 | 			finaleColumns: [
 899 | 				{
 900 | 					title: "姓名",
 901 | 					format: {
 902 | 					    template: "我叫 #name#",
 903 | 					    names: ["name"]
 904 | 					},
 905 | 					isLink: {
 906 | 						url: "https://www.baidu.com",
 907 | 						params: ["from|name"]
 908 | 					},
 909 | 					width: 200
 910 | 				},
 911 | 				{
 912 | 					title: "性别",
 913 | 					key: "gender",
 914 | 					sort: true,
 915 | 					width: 400
 916 | 				},
 917 | 				{
 918 | 					title: "年龄",
 919 | 					key: "age",
 920 | 					sort: true,
 921 | 					width: 400
 922 | 				}
 923 | 			],
 924 | 			finaleHtml: "<z-table :tableData='finaleTableData' :columns='finaleColumns' @onSort='doSort' stickSide showBottomSum emptyText='设置了showLoading=false才会看到我' :tableHeight='600'></z-table>",
 925 | 		};
 926 | 	},
 927 | 	components: {
 928 | 		zTable
 929 | 	},
 930 | 	methods: {
 931 | 		doSort(res) {
 932 | 			uni.showToast({
 933 | 				title: `点击了${res.key}的排序, 排序方式为${res.type}`,
 934 | 				icon: "none"
 935 | 			})
 936 | 		}
 937 | 	}
 938 | };
 939 | </script>
 940 | 
 941 | <style>
 942 | .content {
 943 | 	padding: 20upx;
 944 | 	font-size: 24upx;
 945 | 	background: #066;
 946 | }
 947 | 
 948 | .logo {
 949 | 	display: block;
 950 | 	height: 144upx;
 951 | 	width: 144upx;
 952 | 	margin: 0 auto;
 953 | 	margin-top: 50upx;
 954 | }
 955 | 
 956 | .version {
 957 | 	text-align: center;
 958 | 	color: #fff;
 959 | }
 960 | 
 961 | .table {
 962 | 	text-align: center;
 963 | }
 964 | 
 965 | .title {
 966 | 	font-size: 24upx;
 967 | 	color: #fff;
 968 | }
 969 | 
 970 | .block-title {
 971 | 	position: sticky;
 972 | 	top: var(--window-top);
 973 | 	padding: 40upx 0 !important;
 974 | 	text-align: center;
 975 | 	background: #f7f9ff;
 976 | 	z-index: 99;
 977 | }
 978 | 
 979 | .example-block {
 980 | 	padding: 20upx;
 981 | 	margin: 20upx -20upx;
 982 | 	background: #f7f9ff;
 983 | }
 984 | 
 985 | .example-title {
 986 | 	font-size: 30upx;
 987 | 	font-weight: bold;
 988 | 	margin: 30upx 0 10upx;
 989 | }
 990 | 
 991 | .example-explain {
 992 | 	font-size: 24upx;
 993 | }
 994 | 
 995 | .explain-title {
 996 | 	margin-top: 30upx;
 997 | 	padding-bottom: 10upx;
 998 | 	font-size: 28upx;
 999 | 	border-bottom: solid 2upx #ccc;
1000 | }
1001 | 
1002 | .explain-context {
1003 | 	margin-top: 10upx;
1004 | 	color: #8f8f94;
1005 | }
1006 | 
1007 | .explain {
1008 | 	display: flex;
1009 | }
1010 | 
1011 | .explain-text {
1012 | 	flex: 1;
1013 | 	margin-left: 20upx;
1014 | }
1015 | 
1016 | .codes {
1017 | 	padding: 20upx;
1018 | 	background: #333;
1019 | 	color: #fff;
1020 | 	box-sizing: border-box;
1021 | }
1022 | 
1023 | .codes text {
1024 | 	white-space: nowrap;
1025 | }
1026 | 
1027 | .toggle-btn {
1028 | 	margin: 10rpx 0;
1029 | 	padding: 10rex;
1030 | 	color: #1c1;
1031 | }
1032 | </style>
1033 | 


--------------------------------------------------------------------------------