From 8758dde802bcf136a64b01da5a3c630056bae24a Mon Sep 17 00:00:00 2001
From: xuyonghao <898441624@qq.com>
Date: 星期三, 12 三月 2025 14:30:37 +0800
Subject: [PATCH] 注释天气部分
---
pages/parkDetail/parkDetail.vue | 1734 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 867 insertions(+), 867 deletions(-)
diff --git a/pages/parkDetail/parkDetail.vue b/pages/parkDetail/parkDetail.vue
index b218061..7887160 100644
--- a/pages/parkDetail/parkDetail.vue
+++ b/pages/parkDetail/parkDetail.vue
@@ -1,870 +1,870 @@
-<template>
- <view class="park-tabel">
- <z-table :textAlign="selectContent[nowType].textAlign" :titleTextAlign="selectContent[nowType].titleTextAlign"
- :tableData="nowData" :columns="nowColumn" @onSort="doSort" :stickSide="selectContent[nowType].stickSide"
- :showBottomSum="selectContent[nowType].showBottomSum" :showLoading="false" :emptyText='selectContent[nowType].emptyText'
- :tableHeight='selectContent[nowType].tableHeight' @onClick="rowClick" :singleSelect="singleSelect" :showSelect="selectContent[nowType].showSelect"
- @onSelect="tableSelect"></z-table>
- </view>
-</template>
-
-<script>
- import zTable from "@/components/z-table/z-table.vue"
- export default {
- components: {
- zTable
- },
- data() {
- return {
- title: "zTable浣跨敤绀轰緥",
- showUpData: false,
- nowType: 0,
- nowData: false,
- nowColumn: false,
- nowHtml: '',
- myDebounce: this.debounce(this.setTable),
- selectContent: [{
- id: 'f0',
- name: '寮�鍚墍鏈夌殑鍔熻兘', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'finaleTableData', // 琛ㄦ牸鏁版嵁
- columns: 'finaleColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: true, // 宸︿晶鍥哄畾
- showBottomSum: true, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: '100vh', // 琛ㄦ牸楂樺害
- showSelect: true, // 寮�鍚�夋嫨鍔熻兘
- html: 'finaleHtml'
- },
- {
- id: 'f1',
- name: '鍩虹浣跨敤绀轰緥', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'baseTableData', // 琛ㄦ牸鏁版嵁
- columns: 'baseColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'baseHtml'
- },
- {
- id: 'f2',
- name: '宸︿晶鍥哄畾', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'stickSideTableData', // 琛ㄦ牸鏁版嵁
- columns: 'stickSideColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: true, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'stickSideHtml'
- },
- {
- id: 'f3',
- name: '鏄剧ず搴曢儴缁熻', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'showBottomSumTableData', // 琛ㄦ牸鏁版嵁
- columns: 'showBottomSumColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: true, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'showBottomSumHtml'
- },
- {
- id: 'f4',
- name: '鑷畾涔夊唴瀹�', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'customTableData', // 琛ㄦ牸鏁版嵁
- columns: 'customColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'customHtml'
- },
- {
- id: 'f5',
- name: '鍗曞厓鏍煎唴瀹逛负閾炬帴', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'isLinkTableData', // 琛ㄦ牸鏁版嵁
- columns: 'isLinkColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'isLinkHtml'
- },
- {
- id: 'f6',
- name: '鑷畾涔夊垽绌烘樉绀哄唴瀹�', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'emptyTableData', // 琛ㄦ牸鏁版嵁
- columns: 'emptyColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'emptyHtml'
- },
- {
- id: 'f7',
- name: '鑷畾涔夐珮搴�', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'heightTableData', // 琛ㄦ牸鏁版嵁
- columns: 'heightColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: 200, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'alignHtml'
- },
- {
- id: 'f8',
- name: '寮�鍚帓搴�', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'sortTableData', // 琛ㄦ牸鏁版嵁
- columns: 'sortColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'sortHtml'
- },
- {
- id: 'f9',
- name: '寮�鍚�夋嫨', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'selectData', // 琛ㄦ牸鏁版嵁
- columns: 'selectColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: true, // 寮�鍚�夋嫨鍔熻兘
- html: 'selectHtml'
- },
- {
- id: 'f10',
- name: '寮�鍚偣鍑讳簨浠�', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'clickData', // 琛ㄦ牸鏁版嵁
- columns: 'clickColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'clickHtml'
- },
- {
- id: 'f11',
- name: '璁剧疆瀵归綈鏂瑰紡', // 鍔熻兘鍚�
- textAlign: 'center', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: 'center', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'alignTableData', // 琛ㄦ牸鏁版嵁
- columns: 'alignColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'alignHtml'
- },
- {
- id: 'f12',
- name: '鑷畾涔夎〃澶村唴瀹癸紙鍙兘瀹氫箟鏍峰紡锛�', // 鍔熻兘鍚�
- textAlign: 'center', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: 'center', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'customTitleTableData', // 琛ㄦ牸鏁版嵁
- columns: 'customTitleColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: false, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'customTitleHtml'
- },
- {
- id: 'f13',
- name: '涓嶆牸寮忓寲鏁板瓧鍐呭', // 鍔熻兘鍚�
- textAlign: '', // 鍐呭瀵归綈鏂瑰紡
- titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
- tableData: 'unformatnumTableData', // 琛ㄦ牸鏁版嵁
- columns: 'unformatnumColumns', // 琛ㄦ牸鍒楀唴瀹�
- stickSide: false, // 宸︿晶鍥哄畾
- showBottomSum: true, // 搴曢儴鏄剧ず缁熻
- emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
- tableHeight: false, // 琛ㄦ牸楂樺害
- showSelect: false, // 寮�鍚�夋嫨鍔熻兘
- html: 'unformatnumHtml'
- }
-
- ],
- baseTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: ''
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- baseColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 400
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 400
- }
- ],
- baseHtml: "<z-table :tableData='baseTableData' :columns='baseColumns'></z-table>",
- // 鍥哄畾宸︿晶
- stickSideTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- }, {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- }, {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- }, {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }],
- stickSideColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- }, {
- title: "鎬у埆",
- key: "gender",
- width: 400
- }, {
- title: "骞撮緞",
- key: "age",
- width: 400
- }],
- stickSideHtml: "<z-table :tableData='stickSideTableData' :columns='stickSideColumns' stickSide='true'></z-table>",
- // 搴曢儴缁熻琛ㄦ牸
- showBottomSumTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- }, {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- }, {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- }, {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }],
- showBottomSumColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- }, {
- title: "鎬у埆",
- key: "gender",
- width: 400
- }, {
- title: "骞撮緞",
- key: "age",
- width: 400
- }],
- showBottomSumHtml: "<z-table :tableData='showBottomSumTableData' :columns='showBottomSumColumns' showBottomSum='true'></z-table>",
- // 鑷畾涔夊唴瀹圭殑琛ㄦ牸
- customTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- }, {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- }, {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- }, {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }],
- customColumns: [{
- title: "濮撳悕",
- format: {
- template: "鎴戝彨 #name#",
- names: ["name"]
- },
- width: 200
- }, {
- title: "鎬у埆",
- key: "gender",
- width: 400
- }, {
- title: "骞撮緞",
- key: "age",
- width: 400
- }],
- customHtml: "<z-table :tableData='customTableData' :columns='customColumns'></z-table>",
- // 鍗曞厓鏍间负閾炬帴
- isLinkTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- isLinkColumns: [{
- title: "濮撳悕",
- key: "name",
- isLink: {
- url: "https://www.baidu.com",
- params: ["from|name"]
- },
- width: 100
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 400
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 400
- }
- ],
- isLinkHtml: "<z-table :tableData='isLinkTableData' :columns='isLinkColumns'></z-table>",
- // 绌哄瓧绗︿覆
- emptyTableData: [],
- emptyColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 400
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 400
- }
- ],
- emptyHtml: "<z-table :tableData='emptyTableData' :columns='emptyColumns' :showLoading='false' emptyText='璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�'></z-table>",
- // 鑷畾涔夐珮搴�
- heightTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- heightColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 400
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 400
- }
- ],
- heightHtml: "<z-table :tableData='heightTableData' :columns='heightColumns' :tableHeight='192'></z-table>",
- // 寮�鍚帓搴�
- sortTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- sortColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- },
- {
- title: "鎬у埆",
- key: "gender",
- sort: true,
- width: 400
- },
- {
- title: "骞撮緞",
- key: "age",
- sort: true,
- width: 400
- }
- ],
- sortHtml: "<z-table :tableData='sortTableData' :columns='sortColumns' @sort='doSort'></z-table>",
- finaleTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- },
- {
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- },
- {
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- finaleColumns: [{
- title: '<span style="color: #333"><span style="display: inline-block; width: 10px; height: 10px; line-height: 10px; margin-right: 5px; border: solid 1px #000; border-radius: 50%; font-size: 11px; text-align: center; vertical-align: middle;">!</span><span st yle="vertical-align: middle;">濮撳悕</span></span>',
- format: {
- template: "<span><img src='https://i0.hdslb.com/bfs/face/f81c108b4e7ced4b8e16c9a0d4ee3370e17e12bf.jpg' style='width: 20px;height: 20px; margin-right: 5px; border-radius: 50%;vertical-align: middle;'/><span style='vertical-align: middle;'>鎴戝彨 #name#</span>",
- names: ["name"]
- },
- isLink: {
- url: "https://www.baidu.com",
- params: ["from|name"]
- },
- width: 300
- },
- {
- title: "鎬у埆",
- key: "gender",
- sort: true,
- width: 400,
- listenerClick: true
- },
- {
- title: "骞撮緞",
- key: "age",
- sort: true,
- width: 400
- }
- ],
- finaleHtml: "<z-table :tableData='finaleTableData' :columns='finaleColumns' stickSide showBottomSum emptyText='璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�' :tableHeight='600' showSelect @onClick='rowClick' @onSelect='tableSelect' @onSort='doSort' ></z-table>",
- singleSelect: false,
- selectData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- selectColumns: [{
- title: "濮撳悕",
- key: 'name',
- width: 300
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 300
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 300
- }
- ],
- selectHtml: "<z-table showSelect :singleSelect='singleSelect' :tableData='selectData' :columns='selectColumns' @onSelect='tableSelect'></z-table>",
- clickData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- clickColumns: [{
- title: "濮撳悕",
- key: 'name',
- width: 300
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 300,
- listenerClick: true
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 300
- }
- ],
- clickHtml: "<z-table :tableData='selectData' :columns='selectColumns' @onClick='rowClick'></z-table>",
- alignTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- alignColumns: [{
- title: "濮撳悕",
- key: 'name',
- width: 200
- },
- {
- title: '鎬у埆',
- key: "gender",
- width: 400,
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 400
- }
- ],
- alignHtml: "<z-table :tableData='alignTableData' :columns='alignColumns'></z-table>",
- customTitleTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: "鐢�"
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�"
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�"
- }
- ],
- customTitleColumns: [{
- title: '<span style="color: #333"><span style="display: inline-block; width: 10px; height: 10px; line-height: 10px; margin-right: 5px; border: solid 1px #000; border-radius: 50%; font-size: 11px; text-align: center; vertical-align: middle;">!</span><span st yle="vertical-align: middle;">濮撳悕</span></span>',
- key: 'name',
- width: 200
- },
- {
- title: '<span style="color: red">鎬у埆</span>',
- key: "gender",
- width: 400,
- },
- {
- title: '<span style="color: blue">骞撮緞</span>',
- key: "age",
- width: 400
- }
- ],
- customTitleHtml: "<z-table :tableData='customTitleTableData' :columns='customTitleColumns'></z-table>",
- unformatnumTableData: [{
- name: "寮犱笁",
- age: 18,
- gender: '',
- tel: 13588888888,
- salary: 15000
- },
- {
- name: "璧靛洓",
- age: 16,
- gender: "濂�",
- tel: 13566666666,
- salary: 5000
- },
- {
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�",
- tel: 13577777777,
- salary: 22000
- },
- {
- name: "鏉庡叚",
- age: 18,
- gender: "濂�",
- tel: 13599999999,
- salary: 30000
- }
- ],
- unformatnumColumns: [{
- title: "濮撳悕",
- key: "name",
- width: 100
- },
- {
- title: "鎵嬫満鍙�",
- key: "tel",
- formatNum: false,
- noSum: true
- },
- {
- title: "钖祫",
- key: "salary"
- },
- {
- title: "鎬у埆",
- key: "gender",
- width: 400
- },
- {
- title: "骞撮緞",
- key: "age",
- width: 400
- }
- ],
- unformatnumHtml: "<z-table :tableData='unformatnumTableData' :columns='unformatnumColumns'></z-table>",
-
- }
- },
- watch: {
- nowType: {
- handler() {
- this.nowData = false
- this.nowColumn = false
- this.myDebounce()
- },
- immediate: true
- }
- },
- onShow() {
- let temp = new Array(100)
- // 鎬ц兘娴嬭瘯 100鏉¤嚜瀹氫箟鍐呭甯﹀ご鍍�
- for (let i of temp) {
- this.finaleTableData.push({
- name: "鐜嬩簲",
- age: 20,
- gender: "鐢�"
- })
- }
- },
- methods: {
- changeType(index) {
- if (this.nowType === index) return
- this.nowType = index
- },
- setTable() {
- this.nowData = this.$data[this.selectContent[this.nowType].tableData]
- this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
- this.nowHtml = this.$data[this.selectContent[this.nowType].html]
- // console.log(this.nowHtml)
- },
- debounce(fn, time = 1000) {
- let timer = null
- return function() {
- if (timer) clearTimeout(timer)
- timer = setTimeout(fn, time)
- }
- },
- doSort(res) {
- uni.showToast({
- title: `鐐瑰嚮浜�${res.key}鐨勬帓搴�, 鎺掑簭鏂瑰紡涓�${res.type}`,
- icon: "none"
- })
- },
- rowClick(item) {
- uni.showToast({
- title: `${JSON.stringify(item)}鏁版嵁琚偣鍑籤,
- icon: 'none'
- })
- },
- tableSelect(selectList) {
- uni.showToast({
- title: `閫変腑浜員ableData涓笅鏍囦负${selectList.join(',')}鐨勫厓绱燻,
- icon: 'none'
- })
- }
- }
- }
-</script>
-
-<style lang="scss" scoped>
- .park-tabel{
- width: 100%;
+<template>
+ <view class="park-tabel">
+ <z-table :textAlign="selectContent[nowType].textAlign" :titleTextAlign="selectContent[nowType].titleTextAlign"
+ :tableData="nowData" :columns="nowColumn" @onSort="doSort" :stickSide="selectContent[nowType].stickSide"
+ :showBottomSum="selectContent[nowType].showBottomSum" :showLoading="false" :emptyText='selectContent[nowType].emptyText'
+ :tableHeight='selectContent[nowType].tableHeight' @onClick="rowClick" :singleSelect="singleSelect" :showSelect="selectContent[nowType].showSelect"
+ @onSelect="tableSelect"></z-table>
+ </view>
+</template>
+
+<script>
+ import zTable from "@/components/z-table/z-table.vue"
+ export default {
+ components: {
+ zTable
+ },
+ data() {
+ return {
+ title: "zTable浣跨敤绀轰緥",
+ showUpData: false,
+ nowType: 0,
+ nowData: false,
+ nowColumn: false,
+ nowHtml: '',
+ myDebounce: this.debounce(this.setTable),
+ selectContent: [{
+ id: 'f0',
+ name: '寮�鍚墍鏈夌殑鍔熻兘', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'finaleTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'finaleColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: true, // 宸︿晶鍥哄畾
+ showBottomSum: true, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: '100vh', // 琛ㄦ牸楂樺害
+ showSelect: true, // 寮�鍚�夋嫨鍔熻兘
+ html: 'finaleHtml'
+ },
+ {
+ id: 'f1',
+ name: '鍩虹浣跨敤绀轰緥', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'baseTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'baseColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'baseHtml'
+ },
+ {
+ id: 'f2',
+ name: '宸︿晶鍥哄畾', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'stickSideTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'stickSideColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: true, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'stickSideHtml'
+ },
+ {
+ id: 'f3',
+ name: '鏄剧ず搴曢儴缁熻', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'showBottomSumTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'showBottomSumColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: true, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'showBottomSumHtml'
+ },
+ {
+ id: 'f4',
+ name: '鑷畾涔夊唴瀹�', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'customTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'customColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'customHtml'
+ },
+ {
+ id: 'f5',
+ name: '鍗曞厓鏍煎唴瀹逛负閾炬帴', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'isLinkTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'isLinkColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'isLinkHtml'
+ },
+ {
+ id: 'f6',
+ name: '鑷畾涔夊垽绌烘樉绀哄唴瀹�', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'emptyTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'emptyColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'emptyHtml'
+ },
+ {
+ id: 'f7',
+ name: '鑷畾涔夐珮搴�', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'heightTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'heightColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: 200, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'alignHtml'
+ },
+ {
+ id: 'f8',
+ name: '寮�鍚帓搴�', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'sortTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'sortColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'sortHtml'
+ },
+ {
+ id: 'f9',
+ name: '寮�鍚�夋嫨', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'selectData', // 琛ㄦ牸鏁版嵁
+ columns: 'selectColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: true, // 寮�鍚�夋嫨鍔熻兘
+ html: 'selectHtml'
+ },
+ {
+ id: 'f10',
+ name: '寮�鍚偣鍑讳簨浠�', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'clickData', // 琛ㄦ牸鏁版嵁
+ columns: 'clickColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'clickHtml'
+ },
+ {
+ id: 'f11',
+ name: '璁剧疆瀵归綈鏂瑰紡', // 鍔熻兘鍚�
+ textAlign: 'center', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: 'center', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'alignTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'alignColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'alignHtml'
+ },
+ {
+ id: 'f12',
+ name: '鑷畾涔夎〃澶村唴瀹癸紙鍙兘瀹氫箟鏍峰紡锛�', // 鍔熻兘鍚�
+ textAlign: 'center', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: 'center', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'customTitleTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'customTitleColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: false, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'customTitleHtml'
+ },
+ {
+ id: 'f13',
+ name: '涓嶆牸寮忓寲鏁板瓧鍐呭', // 鍔熻兘鍚�
+ textAlign: '', // 鍐呭瀵归綈鏂瑰紡
+ titleTextAlign: '', // 琛ㄥご瀵归綈鏂瑰紡
+ tableData: 'unformatnumTableData', // 琛ㄦ牸鏁版嵁
+ columns: 'unformatnumColumns', // 琛ㄦ牸鍒楀唴瀹�
+ stickSide: false, // 宸︿晶鍥哄畾
+ showBottomSum: true, // 搴曢儴鏄剧ず缁熻
+ emptyText: '璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�', // 琛ㄦ牸鍐呭涓虹┖鏃舵樉绀虹殑鍐呭
+ tableHeight: false, // 琛ㄦ牸楂樺害
+ showSelect: false, // 寮�鍚�夋嫨鍔熻兘
+ html: 'unformatnumHtml'
+ }
+
+ ],
+ baseTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: ''
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ baseColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }
+ ],
+ baseHtml: "<z-table :tableData='baseTableData' :columns='baseColumns'></z-table>",
+ // 鍥哄畾宸︿晶
+ stickSideTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ }, {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ }, {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ }, {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }],
+ stickSideColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ }, {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ }, {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }],
+ stickSideHtml: "<z-table :tableData='stickSideTableData' :columns='stickSideColumns' stickSide='true'></z-table>",
+ // 搴曢儴缁熻琛ㄦ牸
+ showBottomSumTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ }, {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ }, {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ }, {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }],
+ showBottomSumColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ }, {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ }, {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }],
+ showBottomSumHtml: "<z-table :tableData='showBottomSumTableData' :columns='showBottomSumColumns' showBottomSum='true'></z-table>",
+ // 鑷畾涔夊唴瀹圭殑琛ㄦ牸
+ customTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ }, {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ }, {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ }, {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }],
+ customColumns: [{
+ title: "濮撳悕",
+ format: {
+ template: "鎴戝彨 #name#",
+ names: ["name"]
+ },
+ width: 200
+ }, {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ }, {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }],
+ customHtml: "<z-table :tableData='customTableData' :columns='customColumns'></z-table>",
+ // 鍗曞厓鏍间负閾炬帴
+ isLinkTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ isLinkColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ isLink: {
+ url: "https://www.baidu.com",
+ params: ["from|name"]
+ },
+ width: 100
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }
+ ],
+ isLinkHtml: "<z-table :tableData='isLinkTableData' :columns='isLinkColumns'></z-table>",
+ // 绌哄瓧绗︿覆
+ emptyTableData: [],
+ emptyColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }
+ ],
+ emptyHtml: "<z-table :tableData='emptyTableData' :columns='emptyColumns' :showLoading='false' emptyText='璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�'></z-table>",
+ // 鑷畾涔夐珮搴�
+ heightTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ heightColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }
+ ],
+ heightHtml: "<z-table :tableData='heightTableData' :columns='heightColumns' :tableHeight='192'></z-table>",
+ // 寮�鍚帓搴�
+ sortTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ sortColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ sort: true,
+ width: 400
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ sort: true,
+ width: 400
+ }
+ ],
+ sortHtml: "<z-table :tableData='sortTableData' :columns='sortColumns' @sort='doSort'></z-table>",
+ finaleTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ },
+ {
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ },
+ {
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ finaleColumns: [{
+ title: '<span style="color: #333"><span style="display: inline-block; width: 10px; height: 10px; line-height: 10px; margin-right: 5px; border: solid 1px #000; border-radius: 50%; font-size: 11px; text-align: center; vertical-align: middle;">!</span><span st yle="vertical-align: middle;">濮撳悕</span></span>',
+ format: {
+ template: "<span><img src='https://i0.hdslb.com/bfs/face/f81c108b4e7ced4b8e16c9a0d4ee3370e17e12bf.jpg' style='width: 20px;height: 20px; margin-right: 5px; border-radius: 50%;vertical-align: middle;'/><span style='vertical-align: middle;'>鎴戝彨 #name#</span>",
+ names: ["name"]
+ },
+ isLink: {
+ url: "https://www.baidu.com",
+ params: ["from|name"]
+ },
+ width: 300
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ sort: true,
+ width: 400,
+ listenerClick: true
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ sort: true,
+ width: 400
+ }
+ ],
+ finaleHtml: "<z-table :tableData='finaleTableData' :columns='finaleColumns' stickSide showBottomSum emptyText='璁剧疆浜唖howLoading=false鎵嶄細鐪嬪埌鎴�' :tableHeight='600' showSelect @onClick='rowClick' @onSelect='tableSelect' @onSort='doSort' ></z-table>",
+ singleSelect: false,
+ selectData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ selectColumns: [{
+ title: "濮撳悕",
+ key: 'name',
+ width: 300
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 300
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 300
+ }
+ ],
+ selectHtml: "<z-table showSelect :singleSelect='singleSelect' :tableData='selectData' :columns='selectColumns' @onSelect='tableSelect'></z-table>",
+ clickData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ clickColumns: [{
+ title: "濮撳悕",
+ key: 'name',
+ width: 300
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 300,
+ listenerClick: true
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 300
+ }
+ ],
+ clickHtml: "<z-table :tableData='selectData' :columns='selectColumns' @onClick='rowClick'></z-table>",
+ alignTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ alignColumns: [{
+ title: "濮撳悕",
+ key: 'name',
+ width: 200
+ },
+ {
+ title: '鎬у埆',
+ key: "gender",
+ width: 400,
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }
+ ],
+ alignHtml: "<z-table :tableData='alignTableData' :columns='alignColumns'></z-table>",
+ customTitleTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: "鐢�"
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�"
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�"
+ }
+ ],
+ customTitleColumns: [{
+ title: '<span style="color: #333"><span style="display: inline-block; width: 10px; height: 10px; line-height: 10px; margin-right: 5px; border: solid 1px #000; border-radius: 50%; font-size: 11px; text-align: center; vertical-align: middle;">!</span><span st yle="vertical-align: middle;">濮撳悕</span></span>',
+ key: 'name',
+ width: 200
+ },
+ {
+ title: '<span style="color: red">鎬у埆</span>',
+ key: "gender",
+ width: 400,
+ },
+ {
+ title: '<span style="color: blue">骞撮緞</span>',
+ key: "age",
+ width: 400
+ }
+ ],
+ customTitleHtml: "<z-table :tableData='customTitleTableData' :columns='customTitleColumns'></z-table>",
+ unformatnumTableData: [{
+ name: "寮犱笁",
+ age: 18,
+ gender: '',
+ tel: 13588888888,
+ salary: 15000
+ },
+ {
+ name: "璧靛洓",
+ age: 16,
+ gender: "濂�",
+ tel: 13566666666,
+ salary: 5000
+ },
+ {
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�",
+ tel: 13577777777,
+ salary: 22000
+ },
+ {
+ name: "鏉庡叚",
+ age: 18,
+ gender: "濂�",
+ tel: 13599999999,
+ salary: 30000
+ }
+ ],
+ unformatnumColumns: [{
+ title: "濮撳悕",
+ key: "name",
+ width: 100
+ },
+ {
+ title: "鎵嬫満鍙�",
+ key: "tel",
+ formatNum: false,
+ noSum: true
+ },
+ {
+ title: "钖祫",
+ key: "salary"
+ },
+ {
+ title: "鎬у埆",
+ key: "gender",
+ width: 400
+ },
+ {
+ title: "骞撮緞",
+ key: "age",
+ width: 400
+ }
+ ],
+ unformatnumHtml: "<z-table :tableData='unformatnumTableData' :columns='unformatnumColumns'></z-table>",
+
+ }
+ },
+ watch: {
+ nowType: {
+ handler() {
+ this.nowData = false
+ this.nowColumn = false
+ this.myDebounce()
+ },
+ immediate: true
+ }
+ },
+ onShow() {
+ let temp = new Array(100)
+ // 鎬ц兘娴嬭瘯 100鏉¤嚜瀹氫箟鍐呭甯﹀ご鍍�
+ for (let i of temp) {
+ this.finaleTableData.push({
+ name: "鐜嬩簲",
+ age: 20,
+ gender: "鐢�"
+ })
+ }
+ },
+ methods: {
+ changeType(index) {
+ if (this.nowType === index) return
+ this.nowType = index
+ },
+ setTable() {
+ this.nowData = this.$data[this.selectContent[this.nowType].tableData]
+ this.nowColumn = this.$data[this.selectContent[this.nowType].columns]
+ this.nowHtml = this.$data[this.selectContent[this.nowType].html]
+ // console.log(this.nowHtml)
+ },
+ debounce(fn, time = 1000) {
+ let timer = null
+ return function() {
+ if (timer) clearTimeout(timer)
+ timer = setTimeout(fn, time)
+ }
+ },
+ doSort(res) {
+ uni.showToast({
+ title: `鐐瑰嚮浜�${res.key}鐨勬帓搴�, 鎺掑簭鏂瑰紡涓�${res.type}`,
+ icon: "none"
+ })
+ },
+ rowClick(item) {
+ uni.showToast({
+ title: `${JSON.stringify(item)}鏁版嵁琚偣鍑籤,
+ icon: 'none'
+ })
+ },
+ tableSelect(selectList) {
+ uni.showToast({
+ title: `閫変腑浜員ableData涓笅鏍囦负${selectList.join(',')}鐨勫厓绱燻,
+ icon: 'none'
+ })
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .park-tabel{
+ width: 100%;
}
.content {
padding: 20rpx;
--
Gitblit v1.8.0