├── .gitignore ├── .vscode └── settings.json ├── README.md ├── miniprogram ├── app.js ├── app.json ├── app.scss ├── app.ts ├── app.wxss ├── pages │ ├── index │ │ ├── components │ │ │ ├── basic │ │ │ │ ├── basic.js │ │ │ │ ├── basic.json │ │ │ │ ├── basic.scss │ │ │ │ ├── basic.ts │ │ │ │ ├── basic.wxml │ │ │ │ └── basic.wxss │ │ │ ├── check │ │ │ │ ├── check.js │ │ │ │ ├── check.json │ │ │ │ ├── check.scss │ │ │ │ ├── check.ts │ │ │ │ ├── check.wxml │ │ │ │ └── check.wxss │ │ │ ├── columns │ │ │ │ ├── columns.js │ │ │ │ ├── columns.json │ │ │ │ ├── columns.scss │ │ │ │ ├── columns.ts │ │ │ │ ├── columns.wxml │ │ │ │ ├── columns.wxss │ │ │ │ └── data.d.ts │ │ │ ├── custom_action │ │ │ │ ├── components │ │ │ │ │ └── action_td │ │ │ │ │ │ ├── action_td.js │ │ │ │ │ │ ├── action_td.json │ │ │ │ │ │ ├── action_td.scss │ │ │ │ │ │ ├── action_td.ts │ │ │ │ │ │ ├── action_td.wxml │ │ │ │ │ │ └── action_td.wxss │ │ │ │ ├── custom_action.js │ │ │ │ ├── custom_action.json │ │ │ │ ├── custom_action.scss │ │ │ │ ├── custom_action.ts │ │ │ │ ├── custom_action.wxml │ │ │ │ ├── custom_action.wxss │ │ │ │ └── data.d.ts │ │ │ ├── custom_expand │ │ │ │ ├── components │ │ │ │ │ └── expand_component │ │ │ │ │ │ ├── expand_component.js │ │ │ │ │ │ ├── expand_component.json │ │ │ │ │ │ ├── expand_component.scss │ │ │ │ │ │ ├── expand_component.ts │ │ │ │ │ │ ├── expand_component.wxml │ │ │ │ │ │ └── expand_component.wxss │ │ │ │ ├── custom_expand.js │ │ │ │ ├── custom_expand.json │ │ │ │ ├── custom_expand.scss │ │ │ │ ├── custom_expand.ts │ │ │ │ ├── custom_expand.wxml │ │ │ │ └── custom_expand.wxss │ │ │ ├── dynamic_value │ │ │ │ ├── components │ │ │ │ │ └── action_td │ │ │ │ │ │ ├── action_td.js │ │ │ │ │ │ ├── action_td.json │ │ │ │ │ │ ├── action_td.scss │ │ │ │ │ │ ├── action_td.ts │ │ │ │ │ │ ├── action_td.wxml │ │ │ │ │ │ └── action_td.wxss │ │ │ │ ├── dynamic_value.js │ │ │ │ ├── dynamic_value.json │ │ │ │ ├── dynamic_value.scss │ │ │ │ ├── dynamic_value.ts │ │ │ │ ├── dynamic_value.wxml │ │ │ │ └── dynamic_value.wxss │ │ │ ├── expand │ │ │ │ ├── expand.js │ │ │ │ ├── expand.json │ │ │ │ ├── expand.scss │ │ │ │ ├── expand.ts │ │ │ │ ├── expand.wxml │ │ │ │ └── expand.wxss │ │ │ ├── function │ │ │ │ ├── data.d.ts │ │ │ │ ├── function.js │ │ │ │ ├── function.json │ │ │ │ ├── function.scss │ │ │ │ ├── function.ts │ │ │ │ ├── function.wxml │ │ │ │ └── function.wxss │ │ │ ├── layout │ │ │ │ ├── layout.js │ │ │ │ ├── layout.json │ │ │ │ ├── layout.scss │ │ │ │ ├── layout.ts │ │ │ │ ├── layout.wxml │ │ │ │ └── layout.wxss │ │ │ ├── parameter │ │ │ │ ├── data.d.ts │ │ │ │ ├── parameter.js │ │ │ │ ├── parameter.json │ │ │ │ ├── parameter.scss │ │ │ │ ├── parameter.ts │ │ │ │ ├── parameter.wxml │ │ │ │ └── parameter.wxss │ │ │ ├── scroll_to_lower_and_upper │ │ │ │ ├── data.d.ts │ │ │ │ ├── scroll_to_lower_and_upper.js │ │ │ │ ├── scroll_to_lower_and_upper.json │ │ │ │ ├── scroll_to_lower_and_upper.scss │ │ │ │ ├── scroll_to_lower_and_upper.ts │ │ │ │ ├── scroll_to_lower_and_upper.wxml │ │ │ │ └── scroll_to_lower_and_upper.wxss │ │ │ ├── scroll_x │ │ │ │ ├── scroll_x.js │ │ │ │ ├── scroll_x.json │ │ │ │ ├── scroll_x.scss │ │ │ │ ├── scroll_x.ts │ │ │ │ ├── scroll_x.wxml │ │ │ │ └── scroll_x.wxss │ │ │ └── set_height │ │ │ │ ├── data.d.ts │ │ │ │ ├── set_height.js │ │ │ │ ├── set_height.json │ │ │ │ ├── set_height.scss │ │ │ │ ├── set_height.ts │ │ │ │ ├── set_height.wxml │ │ │ │ └── set_height.wxss │ │ ├── data.d.ts │ │ ├── index.js │ │ ├── index.json │ │ ├── index.scss │ │ ├── index.ts │ │ ├── index.wxml │ │ ├── index.wxss │ │ ├── service.js │ │ └── service.ts │ └── template │ │ ├── component_template │ │ ├── component_template.js │ │ ├── component_template.json │ │ ├── component_template.scss │ │ ├── component_template.ts │ │ ├── component_template.wxml │ │ └── component_template.wxss │ │ └── page_template │ │ ├── data.d.ts │ │ ├── page_template.js │ │ ├── page_template.json │ │ ├── page_template.scss │ │ ├── page_template.ts │ │ ├── page_template.wxml │ │ ├── page_template.wxss │ │ ├── service.js │ │ └── service.ts ├── public │ ├── components │ │ └── public │ │ │ ├── empty │ │ │ ├── empty.js │ │ │ ├── empty.json │ │ │ ├── empty.md │ │ │ ├── empty.scss │ │ │ ├── empty.ts │ │ │ ├── empty.wxml │ │ │ ├── empty.wxss │ │ │ └── empty_tip.png │ │ │ ├── load_more │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ ├── index.wxss │ │ │ └── load_more.md │ │ │ └── table │ │ │ ├── components │ │ │ └── tr │ │ │ │ ├── tr.js │ │ │ │ ├── tr.json │ │ │ │ ├── tr.scss │ │ │ │ ├── tr.ts │ │ │ │ ├── tr.wxml │ │ │ │ └── tr.wxss │ │ │ ├── data.d.ts │ │ │ ├── table.js │ │ │ ├── table.json │ │ │ ├── table.md │ │ │ ├── table.scss │ │ │ ├── table.ts │ │ │ ├── table.wxml │ │ │ ├── table.wxs │ │ │ └── table.wxss │ ├── utils │ │ ├── util.js │ │ └── util.ts │ └── wxss │ │ ├── _common.scss │ │ └── _main.scss └── sitemap.json ├── package-lock.json ├── package.json ├── project.config.json ├── tsconfig.json └── typings ├── index.d.ts └── types ├── component.d.ts ├── global.d.ts └── index.d.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | **/node_modules 5 | # roadhog-api-doc ignore 6 | /src/utils/request-temp.js 7 | _roadhog-api-doc 8 | 9 | # production 10 | /dist 11 | # /.vscode 12 | /lib 13 | # /typings/types 14 | /miniprogram/miniprogram_npm 15 | # misc 16 | .DS_Store 17 | npm-debug.log* 18 | yarn-error.log 19 | 20 | /coverage 21 | .idea 22 | yarn.lock 23 | # package-lock.json 24 | *bak 25 | 26 | # visual studio code 27 | .history 28 | *.log 29 | functions/* 30 | .temp/** 31 | 32 | # umi 33 | .umi 34 | .umi-production 35 | 36 | # screenshot 37 | screenshot 38 | .firebase 39 | .eslintcache 40 | 41 | dist.rar 42 | 43 | build 44 | 45 | /typings/types/wx -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveSassCompile.settings.formats": [ 3 | { 4 | "format": "compressed", 5 | "extensionName": ".wxss", 6 | "savePath": "" 7 | }, 8 | ], 9 | "liveSassCompile.settings.excludeList": [ 10 | "**/node_modules/**", 11 | ".vscode/**" 12 | ], 13 | "liveSassCompile.settings.generateMap": false, 14 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 使用说明 2 | 3 | 该组件具有 列表展示模式，勾选模式，展开行模式。 4 | 1. 复制`/miniprogram/public/components/public`下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中） 5 | 2. 在需要使用的页面引入table组件即可。 6 | 3. 请注意，rowKey字段指出数据唯一的标识，默认值为id字段，若数据中不存在id字段，则请指定rowKey为数据中的唯一标识字段。 7 | 8 | # 示例小程序 9 | ![小程序图片](https://mmbiz.qpic.cn/mmbiz_jpg/NNDgcXA2O90eRXGPicjGqcvetdnNgk8icDpnBcxoEtEwSQgibXmib0LnB2icLYGtGlW5NE30N1fn4M0f165MkxcicoOg/0?wx_fmt=jpeg) 10 | 11 | # API 12 | 13 | ## prop 14 | 15 | | 参数 | 说明 | 类型 | 默认值 | 是否必填 | 16 | |-----|-----|-----|-----|-----| 17 | |columns| 表格的配置 | Columns[] | [] | true | 18 | |dataList| 数据 | any[] | [] | true | 19 | |getListLoading| 请求列表的loading | boolean | false| true | 20 | |showTipImage| 无数据时的提示文本图片 | boolean | false| true | 21 | |rowKey| 用于指明每条数据的唯一标识符，勾选状态下是勾选项返回的值 | string | id | false | 22 | |tableHeight| table高度。|string| 600rpx |false | 23 | |tipTitle| 无数据时的提示文本主标题 | string | 提示 | false | 24 | |tipSubtitle| 无数据时的提示文本副标题 | string | 暂无数据| false | 25 | |scrollX| 是否需要X轴滚动。 | boolean | false| false | 26 | |select| 控制是否出现勾选。 | boolean | false| false | 27 | |selectKeys| 勾选的初始值 | any[] | []| false | 28 | |generic:action-td| 当列表项内具有操作列，需要在`columns`内添加`type:action`的一项，操作列的内容往往需要自定义，小程序不提供react,vue的`rander函数`，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由`bindclickaction`触发 | component |undefined | false | 29 | |isExpand| 控制是否点击展开。 | boolean | false|false | 30 | |expandValueKey| 展开信息的key值 | string | false | 31 | |initExpandValue| 当展开信息为空时的默认提示语 | string | '暂无信息' |false | 32 | |expandStyle| 展开信息的最外层的样式 | string | ''|false | 33 | |generic:expand-component| 如果展开区域的内容需要自定义，`expandValueKey`设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由`bindclickexpand`触发 | component | undefined |false | 34 | |dynamicValue| 给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} | object | {} |false | 35 | 36 | 37 | ## event 38 | 39 | |事件 | 解释| 类型| 40 | |-----|-----|-----| 41 | |bindclicklistitem| 点击列表行事件 |Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）}| 42 | |bindclickexpand| 点击展开内容事件 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)}| 43 | |bindclickaction| 点击抽象节点事件 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}| 44 | |bindonactionevent| 抽象节点内的业务事件触发 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}| 45 | |bindcheckkey| 勾选事件 返回被勾选项的rowKey数组 |Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果)| 46 | |bindscrolltolower| 滚动触底 | Function() | 47 | |bindscrolltoupper| 滚动触顶 | Function() | 48 | 49 | ## column 50 | 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 51 | 52 | |事件 | 解释| 类型| 必填| 53 | |-----|-----|-----|-----| 54 | |title|字段名中文含义|string| true| 55 | |key|字段名|string| true| 56 | |width|单元格宽度|string| false| 57 | |type|判断字段是否是自定义组件|'action'/undefined | false| 58 | |render|td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容|function| false| 59 | -------------------------------------------------------------------------------- /miniprogram/app.js: -------------------------------------------------------------------------------- 1 | import { setNavStyle } from './public/utils/util'; 2 | App({ 3 | onLaunch() { 4 | }, 5 | globalData: { 6 | pageConfig: setNavStyle(), 7 | transmit: { 8 | title: '小程序table组件', 9 | path: '/pages/index/index', 10 | imageUrl: '', 11 | success: function (res) { 12 | console.log(res); 13 | }, 14 | fail: function (res) { 15 | console.log(res); 16 | } 17 | } 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /miniprogram/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages": [ 3 | "pages/index/index" 4 | ], 5 | "window": { 6 | "backgroundTextStyle": "light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "WeChat", 9 | "navigationBarTextStyle": "black", 10 | "backgroundColorTop": "#fff", 11 | "backgroundColorBottom": "#F2f2f2" 12 | }, 13 | "style": "v2", 14 | "sitemapLocation": "sitemap.json" 15 | } -------------------------------------------------------------------------------- /miniprogram/app.scss: -------------------------------------------------------------------------------- 1 | page{ 2 | background-color: #f2f2f2; 3 | } -------------------------------------------------------------------------------- /miniprogram/app.ts: -------------------------------------------------------------------------------- 1 | import { setNavStyle } from './public/utils/util' 2 | // app.ts 3 | App({ 4 | onLaunch() { 5 | 6 | }, 7 | globalData: { 8 | pageConfig: setNavStyle(), 9 | transmit: { 10 | title: '小程序table组件', 11 | path: '/pages/index/index', 12 | imageUrl: '', 13 | success: function (res: any) { 14 | console.log(res) 15 | }, 16 | fail: function (res: any) { 17 | console.log(res) 18 | } 19 | } 20 | }, 21 | }) -------------------------------------------------------------------------------- /miniprogram/app.wxss: -------------------------------------------------------------------------------- 1 | page{background-color:#f2f2f2} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/basic/basic.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }], 27 | dataList: [], 28 | pageNum: 1, 29 | pageSize: 10, 30 | pageCount: 1, 31 | getListLoading: false, 32 | }, 33 | methods: { 34 | options: {}, 35 | handleClickItem(e) { 36 | console.log(e); 37 | const { index, item } = e.detail.value; 38 | wx.showToast({ 39 | title: `点击第${index + 1}行` 40 | }); 41 | }, 42 | getList() { 43 | return __awaiter(this, void 0, void 0, function* () { 44 | try { 45 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 46 | if (pageNum > pageCount) 47 | return; 48 | if (getListLoading) 49 | return; 50 | this.setData({ 51 | getListLoading: true, 52 | }); 53 | const res = yield mockData('list', { 54 | id: 1, 55 | name: '兼职人员', 56 | age: 10, 57 | sex: '男', 58 | }, "name", pageNum, pageSize); 59 | this.setData({ 60 | dataList: dataList.concat(res.data.list), 61 | pageCount: res.data.pageCount, 62 | getListLoading: false, 63 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 64 | }); 65 | } 66 | catch (e) { 67 | this.setData({ 68 | getListLoading: false, 69 | }); 70 | console.log(e); 71 | } 72 | }); 73 | }, 74 | initComponent() { 75 | this.getList(); 76 | }, 77 | }, 78 | lifetimes: { 79 | attached: function () { }, 80 | ready: function () { this.initComponent(); }, 81 | moved: function () { }, 82 | detached: function () { }, 83 | }, 84 | pageLifetimes: { 85 | show: function () { }, 86 | hide: function () { }, 87 | resize: function () { }, 88 | }, 89 | }); 90 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/basic/basic.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/basic/basic.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/basic/basic.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/basic/basic.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | } 16 | 17 | type InitProperty = { 18 | 19 | } 20 | 21 | type InitMethod = { 22 | options: any 23 | handleClickItem(e: GlobalData.WxAppletsEvent): void 24 | getList(): void, 25 | initComponent(): void 26 | } 27 | 28 | 29 | 30 | Component({ 31 | options: { 32 | addGlobalClass: true, 33 | }, 34 | /** 35 | * 组件的属性列表 36 | */ 37 | properties: { 38 | 39 | }, 40 | /** 41 | * 组件的初始数据 42 | */ 43 | data: { 44 | tableColumns: [{ 45 | title: "姓名", 46 | key: "name", 47 | }, { 48 | title: "年龄", 49 | key: "age", 50 | }, { 51 | title: "性别", 52 | key: "sex", 53 | }],// table 表头参数 54 | dataList: [],// 学校数组 55 | pageNum: 1, 56 | pageSize: 10, 57 | pageCount: 1, 58 | getListLoading: false, 59 | }, 60 | /** 61 | * 组件的方法列表 62 | */ 63 | methods: { 64 | options: {}, 65 | handleClickItem(e) { 66 | console.log(e) 67 | const { index, item } = e.detail.value 68 | wx.showToast({ 69 | title: `点击第${index + 1}行` 70 | }) 71 | }, 72 | // 获取列表 73 | async getList() { 74 | try { 75 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 76 | if (pageNum > pageCount) return 77 | if (getListLoading) return 78 | this.setData({ 79 | getListLoading: true, 80 | }) 81 | const res = await mockData('list', { 82 | id: 1, 83 | name: '兼职人员', 84 | age: 10, 85 | sex: '男', 86 | }, "name", pageNum, pageSize) 87 | this.setData({ 88 | dataList: dataList.concat(res.data.list), 89 | pageCount: res.data.pageCount, 90 | getListLoading: false, 91 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 92 | }) 93 | } catch (e) { 94 | this.setData({ 95 | getListLoading: false, 96 | }) 97 | console.log(e) 98 | } 99 | }, 100 | initComponent() { 101 | this.getList() 102 | }, 103 | }, 104 | lifetimes: { 105 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 106 | attached: function () { }, 107 | ready: function () { this.initComponent() }, 108 | moved: function () { }, 109 | detached: function () { }, 110 | }, 111 | 112 | pageLifetimes: { 113 | // 组件所在页面的生命周期函数 114 | show: function () { }, 115 | hide: function () { }, 116 | resize: function () { }, 117 | }, 118 | }) 119 | 120 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/basic/basic.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/basic/basic.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/check/check.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }], 27 | dataList: [], 28 | pageNum: 1, 29 | pageSize: 10, 30 | pageCount: 1, 31 | getListLoading: false, 32 | tableScrollViewHeight: '800rpx', 33 | initSelectKeys: [2, 4, 15] 34 | }, 35 | methods: { 36 | options: {}, 37 | handleClickInitCheck() { 38 | this.setData({ 39 | initSelectKeys: [2, 4, 15] 40 | }); 41 | }, 42 | handleCheckTable(e) { 43 | console.log(e); 44 | }, 45 | getList() { 46 | return __awaiter(this, void 0, void 0, function* () { 47 | try { 48 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 49 | if (pageNum > pageCount) 50 | return; 51 | if (getListLoading) 52 | return; 53 | this.setData({ 54 | getListLoading: true, 55 | }); 56 | const res = yield mockData('list', { 57 | id: 1, 58 | name: '兼职人员', 59 | age: 10, 60 | sex: '男', 61 | }, "name", pageNum, pageSize); 62 | this.setData({ 63 | dataList: dataList.concat(res.data.list.map((item, index) => (Object.assign({}, item, { check_id: ((pageNum - 1) * pageSize) + index + 1 })))), 64 | pageCount: res.data.pageCount, 65 | getListLoading: false, 66 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 67 | }); 68 | } 69 | catch (e) { 70 | this.setData({ 71 | getListLoading: false, 72 | }); 73 | console.log(e); 74 | } 75 | }); 76 | }, 77 | getTableScrollViewHeight() { 78 | const node = this.createSelectorQuery().select('.basic-table >>> .tr-th'); 79 | const { pageConfig } = app.globalData; 80 | node.boundingClientRect((rect) => { 81 | this.setData({ 82 | tableScrollViewHeight: rect ? `calc(100vh - ${600 + rect.height / pageConfig.pixelRate}rpx)` : '' 83 | }); 84 | }).exec(); 85 | }, 86 | initComponent() { 87 | this.getList(); 88 | this.getTableScrollViewHeight(); 89 | }, 90 | }, 91 | lifetimes: { 92 | attached: function () { }, 93 | ready: function () { this.initComponent(); }, 94 | moved: function () { }, 95 | detached: function () { }, 96 | }, 97 | pageLifetimes: { 98 | show: function () { }, 99 | hide: function () { }, 100 | resize: function () { }, 101 | }, 102 | }); 103 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/check/check.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/check/check.scss: -------------------------------------------------------------------------------- 1 | .button{ 2 | margin-top: 30rpx; 3 | background-color: #fff; 4 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/check/check.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | tableScrollViewHeight: string, 16 | initSelectKeys: number[] 17 | } 18 | 19 | type InitProperty = { 20 | 21 | } 22 | 23 | type InitMethod = { 24 | options: any 25 | handleClickInitCheck(): void 26 | handleCheckTable(e: GlobalData.WxAppletsEvent): void, 27 | getList(): void, 28 | getTableScrollViewHeight(): void 29 | initComponent(): void 30 | } 31 | 32 | 33 | Component({ 34 | options: { 35 | addGlobalClass: true, 36 | }, 37 | /** 38 | * 组件的属性列表 39 | */ 40 | properties: { 41 | 42 | }, 43 | /** 44 | * 组件的初始数据 45 | */ 46 | data: { 47 | tableColumns: [{ 48 | title: "姓名", 49 | key: "name", 50 | }, { 51 | title: "年龄", 52 | key: "age", 53 | }, { 54 | title: "性别", 55 | key: "sex", 56 | }],// table 表头参数 57 | dataList: [],// 学校数组 58 | pageNum: 1, 59 | pageSize: 10, 60 | pageCount: 1, 61 | getListLoading: false, 62 | tableScrollViewHeight: '800rpx', 63 | initSelectKeys: [2, 4, 15] 64 | }, 65 | /** 66 | * 组件的方法列表 67 | */ 68 | methods: { 69 | options: {}, 70 | // 重置勾选 71 | handleClickInitCheck() { 72 | this.setData({ 73 | initSelectKeys: [2, 4, 15] 74 | }) 75 | }, 76 | handleCheckTable(e) { 77 | console.log(e) 78 | }, 79 | // 获取列表 80 | async getList() { 81 | try { 82 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 83 | if (pageNum > pageCount) return 84 | if (getListLoading) return 85 | this.setData({ 86 | getListLoading: true, 87 | }) 88 | const res = await mockData('list', { 89 | id: 1, 90 | name: '兼职人员', 91 | age: 10, 92 | sex: '男', 93 | }, "name", pageNum, pageSize) 94 | this.setData({ 95 | dataList: dataList.concat(res.data.list.map((item, index) => ({ 96 | ...item, 97 | check_id: ((pageNum - 1) * pageSize) + index + 1 98 | }))), 99 | pageCount: res.data.pageCount, 100 | getListLoading: false, 101 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 102 | }) 103 | } catch (e) { 104 | this.setData({ 105 | getListLoading: false, 106 | }) 107 | console.log(e) 108 | } 109 | }, 110 | getTableScrollViewHeight() { 111 | // const pageConfig = wx. 112 | const node = this.createSelectorQuery().select('.basic-table >>> .tr-th') 113 | const { pageConfig } = app.globalData 114 | node.boundingClientRect((rect) => { 115 | this.setData({ 116 | tableScrollViewHeight: rect ? `calc(100vh - ${600 + rect.height / pageConfig.pixelRate}rpx)` : '' 117 | }) 118 | }).exec() 119 | }, 120 | initComponent() { 121 | this.getList() 122 | this.getTableScrollViewHeight() 123 | }, 124 | }, 125 | lifetimes: { 126 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 127 | attached: function () { }, 128 | ready: function () { this.initComponent() }, 129 | moved: function () { }, 130 | detached: function () { }, 131 | }, 132 | 133 | pageLifetimes: { 134 | // 组件所在页面的生命周期函数 135 | show: function () { }, 136 | hide: function () { }, 137 | resize: function () { }, 138 | }, 139 | }) 140 | 141 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/check/check.wxml: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/check/check.wxss: -------------------------------------------------------------------------------- 1 | .button{margin-top:30rpx;background-color:#fff} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/columns.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "key", 19 | key: "key", 20 | }, { 21 | title: "介绍", 22 | key: "desc", 23 | }, { 24 | title: "类型", 25 | key: "type", 26 | }, { 27 | title: "必填", 28 | key: "require", 29 | }], 30 | dataList: [], 31 | getListLoading: false 32 | }, 33 | methods: { 34 | options: {}, 35 | getList() { 36 | return __awaiter(this, void 0, void 0, function* () { 37 | try { 38 | this.setData({ 39 | getListLoading: true 40 | }); 41 | const res = yield mockData('data', [{ 42 | key: 'title', 43 | desc: '字段名中文含义', 44 | type: 'string', 45 | require: true 46 | }, { 47 | key: 'key', 48 | desc: '字段名', 49 | type: 'string', 50 | require: true 51 | }, { 52 | key: 'width', 53 | desc: '单元格宽度', 54 | type: 'string', 55 | require: false 56 | }, { 57 | key: 'type', 58 | desc: '判断字段是否是自定义组件', 59 | type: 'action', 60 | require: false 61 | }, { 62 | key: 'render', 63 | desc: 'td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容', 64 | type: 'function', 65 | require: false 66 | }]); 67 | this.setData({ 68 | dataList: res.data, 69 | getListLoading: false 70 | }); 71 | } 72 | catch (e) { 73 | this.setData({ 74 | getListLoading: false 75 | }); 76 | console.log(e); 77 | } 78 | }); 79 | }, 80 | initComponent() { 81 | this.getList(); 82 | }, 83 | }, 84 | lifetimes: { 85 | attached: function () { }, 86 | ready: function () { this.initComponent(); }, 87 | moved: function () { }, 88 | detached: function () { }, 89 | }, 90 | pageLifetimes: { 91 | show: function () { }, 92 | hide: function () { }, 93 | resize: function () { }, 94 | }, 95 | }); 96 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/columns.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/columns.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/columns/columns.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/columns.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from './data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | getListLoading: boolean 12 | } 13 | 14 | type InitProperty = { 15 | 16 | } 17 | 18 | type InitMethod = { 19 | options: any 20 | getList(): void, 21 | initComponent(): void 22 | } 23 | 24 | 25 | 26 | Component({ 27 | options: { 28 | addGlobalClass: true, 29 | }, 30 | /** 31 | * 组件的属性列表 32 | */ 33 | properties: { 34 | 35 | }, 36 | /** 37 | * 组件的初始数据 38 | */ 39 | data: { 40 | tableColumns: [{ 41 | title: "key", 42 | key: "key", 43 | }, { 44 | title: "介绍", 45 | key: "desc", 46 | }, { 47 | title: "类型", 48 | key: "type", 49 | }, { 50 | title: "必填", 51 | key: "require", 52 | }],// table 表头参数 53 | dataList: [],// 学校数组 54 | getListLoading: false 55 | }, 56 | /** 57 | * 组件的方法列表 58 | */ 59 | methods: { 60 | options: {}, 61 | // 获取列表 62 | async getList() { 63 | try { 64 | this.setData({ 65 | getListLoading: true 66 | }) 67 | const res = await mockData('data', [{ 68 | key: 'title', 69 | desc: '字段名中文含义', 70 | type: 'string', 71 | require: true 72 | }, { 73 | key: 'key', 74 | desc: '字段名', 75 | type: 'string', 76 | require: true 77 | }, { 78 | key: 'width', 79 | desc: '单元格宽度', 80 | type: 'string', 81 | require: false 82 | }, { 83 | key: 'type', 84 | desc: '判断字段是否是自定义组件', 85 | type: 'action', 86 | require: false 87 | }, { 88 | key: 'render', 89 | desc: 'td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容', 90 | type: 'function', 91 | require: false 92 | }]) 93 | this.setData({ 94 | dataList: res.data, 95 | getListLoading: false 96 | }) 97 | } catch (e) { 98 | this.setData({ 99 | getListLoading: false 100 | }) 101 | console.log(e) 102 | } 103 | }, 104 | initComponent() { 105 | this.getList() 106 | }, 107 | }, 108 | lifetimes: { 109 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 110 | attached: function () { }, 111 | ready: function () { this.initComponent() }, 112 | moved: function () { }, 113 | detached: function () { }, 114 | }, 115 | 116 | pageLifetimes: { 117 | // 组件所在页面的生命周期函数 118 | show: function () { }, 119 | hide: function () { }, 120 | resize: function () { }, 121 | }, 122 | }) 123 | 124 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/columns.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/columns.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/columns/data.d.ts: -------------------------------------------------------------------------------- 1 | export interface DataListItem { 2 | key: string, 3 | desc: string, 4 | type: string, 5 | require: boolean 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/components/action_td/action_td.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: { 7 | item: { 8 | type: Object, 9 | value: {} 10 | }, 11 | index: { 12 | type: Number, 13 | }, 14 | columns: { 15 | type: Object, 16 | value: {} 17 | } 18 | }, 19 | data: {}, 20 | methods: { 21 | handleClickItem(e) { 22 | const { type } = e.currentTarget.dataset; 23 | const { index, item } = this.data; 24 | this.triggerEvent('clickaction', { 25 | value: { 26 | type, 27 | index, item 28 | } 29 | }); 30 | this.triggerEvent('onactionevent', { 31 | value: { 32 | type, 33 | index, item 34 | } 35 | }); 36 | } 37 | }, 38 | lifetimes: { 39 | attached: function () { }, 40 | ready: function () { }, 41 | moved: function () { }, 42 | detached: function () { }, 43 | }, 44 | pageLifetimes: { 45 | show: function () { }, 46 | hide: function () { }, 47 | resize: function () { }, 48 | }, 49 | }); 50 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/components/action_td/action_td.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/components/action_td/action_td.scss: -------------------------------------------------------------------------------- 1 | .action-box{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-flow:nowrap; 6 | justify-content:center; 7 | align-items:center; 8 | font-size: 24rpx; 9 | .name{ 10 | color:#006699 11 | } 12 | .age{ 13 | color:#990066 14 | } 15 | .sex{ 16 | color:#669900 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/components/action_td/action_td.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 获取应用实例 4 | const app = getApp() 5 | type InitData = { 6 | } 7 | 8 | type InitProperty = { 9 | item: WechatMiniprogram.Component.FullProperty, 10 | index: WechatMiniprogram.Component.FullProperty, 11 | columns: WechatMiniprogram.Component.FullProperty, 12 | } 13 | 14 | type InitMethod = { 15 | handleClickItem(e: GlobalData.WxAppletsEvent): void 16 | } 17 | 18 | Component({ 19 | options: { 20 | addGlobalClass: true, 21 | }, 22 | /** 23 | * 组件的属性列表 24 | */ 25 | properties: { 26 | item: { 27 | type: Object, 28 | value: {} 29 | }, 30 | index: { 31 | type: Number, 32 | }, 33 | columns: { 34 | type: Object, 35 | value: {} 36 | } 37 | }, 38 | /** 39 | * 组件的初始数据 40 | */ 41 | data: { 42 | }, 43 | 44 | /** 45 | * 组件的方法列表 46 | */ 47 | methods: { 48 | handleClickItem(e) { 49 | const { type } = e.currentTarget.dataset 50 | const { index, item } = this.data 51 | this.triggerEvent('clickaction', { 52 | value: { 53 | type, 54 | index, item 55 | } 56 | }) 57 | this.triggerEvent('onactionevent', { 58 | value: { 59 | type, 60 | index, item 61 | } 62 | }) 63 | } 64 | }, 65 | 66 | lifetimes: { 67 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 68 | attached: function () { }, 69 | ready: function () { }, 70 | moved: function () { }, 71 | detached: function () { }, 72 | }, 73 | 74 | pageLifetimes: { 75 | // 组件所在页面的生命周期函数 76 | show: function () { }, 77 | hide: function () { }, 78 | resize: function () { }, 79 | }, 80 | 81 | }) 82 | 83 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/components/action_td/action_td.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{item.name}} 4 | 5 | 6 | {{item.age}} 7 | 8 | 9 | {{item.sex}} 10 | 11 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/components/action_td/action_td.wxss: -------------------------------------------------------------------------------- 1 | .action-box{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:nowrap;flex-flow:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:24rpx}.action-box .name{color:#006699}.action-box .age{color:#990066}.action-box .sex{color:#669900} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/custom_action.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | type: "action" 21 | }, { 22 | title: "年龄", 23 | key: "age", 24 | type: "action" 25 | }, { 26 | title: "性别", 27 | key: "sex", 28 | type: "action" 29 | }], 30 | dataList: [], 31 | pageNum: 1, 32 | pageSize: 10, 33 | pageCount: 1, 34 | getListLoading: false, 35 | }, 36 | methods: { 37 | options: {}, 38 | handleClickAction(e) { 39 | console.log(e); 40 | let str = ''; 41 | const { type, index, item } = e.detail.value; 42 | if (type === 'name') { 43 | str = `第${index + 1}行姓名字段`; 44 | } 45 | else if (type === 'age') { 46 | str = `第${index + 1}行年龄字段`; 47 | } 48 | else if (type === 'sex') { 49 | str = `第${index + 1}行性别字段`; 50 | } 51 | wx.showToast({ 52 | title: str 53 | }); 54 | }, 55 | handleOnActionEvent(e) { 56 | console.log(e); 57 | }, 58 | getList() { 59 | return __awaiter(this, void 0, void 0, function* () { 60 | try { 61 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 62 | if (pageNum > pageCount) 63 | return; 64 | if (getListLoading) 65 | return; 66 | this.setData({ 67 | getListLoading: true, 68 | }); 69 | const res = yield mockData('list', { 70 | id: 1, 71 | name: '兼职人员', 72 | age: 10, 73 | sex: '男', 74 | }, "name", pageNum, pageSize); 75 | this.setData({ 76 | dataList: dataList.concat(res.data.list), 77 | pageCount: res.data.pageCount, 78 | getListLoading: false, 79 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 80 | }); 81 | } 82 | catch (e) { 83 | this.setData({ 84 | getListLoading: false, 85 | }); 86 | console.log(e); 87 | } 88 | }); 89 | }, 90 | reloadList() { 91 | this.setData({ 92 | pageNum: 1, 93 | pageCount: 1, 94 | dataList: [], 95 | }, () => { 96 | this.getList(); 97 | }); 98 | }, 99 | initComponent() { 100 | this.getList(); 101 | }, 102 | }, 103 | lifetimes: { 104 | attached: function () { }, 105 | ready: function () { this.initComponent(); }, 106 | moved: function () { }, 107 | detached: function () { }, 108 | }, 109 | pageLifetimes: { 110 | show: function () { }, 111 | hide: function () { }, 112 | resize: function () { }, 113 | }, 114 | }); 115 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/custom_action.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table", 5 | "action-td": "./components/action_td/action_td" 6 | } 7 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/custom_action.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/custom_action/custom_action.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/custom_action.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | } 16 | 17 | type InitProperty = { 18 | 19 | } 20 | 21 | type InitMethod = { 22 | options: any 23 | handleClickAction(e: GlobalData.WxAppletsEvent): void, 24 | handleOnActionEvent(e: GlobalData.WxAppletsEvent): void, 25 | getList(): void, 26 | reloadList(): void, 27 | initComponent(): void 28 | } 29 | 30 | 31 | 32 | Component({ 33 | options: { 34 | addGlobalClass: true, 35 | }, 36 | /** 37 | * 组件的属性列表 38 | */ 39 | properties: { 40 | 41 | }, 42 | /** 43 | * 组件的初始数据 44 | */ 45 | data: { 46 | tableColumns: [{ 47 | title: "姓名", 48 | key: "name", 49 | type: "action" 50 | }, { 51 | title: "年龄", 52 | key: "age", 53 | type: "action" 54 | }, { 55 | title: "性别", 56 | key: "sex", 57 | type: "action" 58 | }],// table 表头参数 59 | dataList: [],// 学校数组 60 | pageNum: 1, 61 | pageSize: 10, 62 | pageCount: 1, 63 | getListLoading: false, 64 | }, 65 | /** 66 | * 组件的方法列表 67 | */ 68 | methods: { 69 | options: {}, 70 | // 点击table的action区域 71 | handleClickAction(e) { 72 | console.log(e) 73 | let str: string = '' 74 | const { type, index, item } = e.detail.value 75 | if (type === 'name') { 76 | str = `第${index + 1}行姓名字段` 77 | } else if (type === 'age') { 78 | str = `第${index + 1}行年龄字段` 79 | } else if (type === 'sex') { 80 | str = `第${index + 1}行性别字段` 81 | } 82 | wx.showToast({ 83 | title: str 84 | }) 85 | }, 86 | // 如果有action 里面有对数据的操作 触发该事件 87 | handleOnActionEvent(e) { 88 | console.log(e) 89 | }, 90 | // 获取列表 91 | async getList() { 92 | try { 93 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 94 | if (pageNum > pageCount) return 95 | if (getListLoading) return 96 | this.setData({ 97 | getListLoading: true, 98 | }) 99 | const res = await mockData('list', { 100 | id: 1, 101 | name: '兼职人员', 102 | age: 10, 103 | sex: '男', 104 | }, "name", pageNum, pageSize) 105 | this.setData({ 106 | dataList: dataList.concat(res.data.list), 107 | pageCount: res.data.pageCount, 108 | getListLoading: false, 109 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 110 | }) 111 | } catch (e) { 112 | this.setData({ 113 | getListLoading: false, 114 | }) 115 | console.log(e) 116 | } 117 | }, 118 | // 条件变化就会触发 119 | reloadList() { 120 | this.setData({ 121 | pageNum: 1, // 单页数量 122 | pageCount: 1,// 总页数 123 | dataList: [], 124 | }, () => { 125 | this.getList() 126 | }) 127 | }, 128 | initComponent() { 129 | this.getList() 130 | }, 131 | }, 132 | lifetimes: { 133 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 134 | attached: function () { }, 135 | ready: function () { this.initComponent() }, 136 | moved: function () { }, 137 | detached: function () { }, 138 | }, 139 | 140 | pageLifetimes: { 141 | // 组件所在页面的生命周期函数 142 | show: function () { }, 143 | hide: function () { }, 144 | resize: function () { }, 145 | }, 146 | }) 147 | 148 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/custom_action.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/custom_action.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_action/data.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/custom_action/data.d.ts -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/components/expand_component/expand_component.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: { 7 | item: { 8 | type: Object, 9 | value: {} 10 | }, 11 | index: { 12 | type: Number, 13 | }, 14 | dynamicValue: { 15 | type: Object, 16 | value: {} 17 | }, 18 | }, 19 | data: {}, 20 | methods: { 21 | handleClickItem(e) { 22 | const { type } = e.currentTarget.dataset; 23 | const { index, item } = this.data; 24 | this.triggerEvent('clickexpand', { 25 | value: { 26 | type, 27 | index, item 28 | } 29 | }); 30 | } 31 | }, 32 | lifetimes: { 33 | attached: function () { }, 34 | ready: function () { }, 35 | moved: function () { }, 36 | detached: function () { }, 37 | }, 38 | pageLifetimes: { 39 | show: function () { }, 40 | hide: function () { }, 41 | resize: function () { }, 42 | }, 43 | }); 44 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/components/expand_component/expand_component.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | } 5 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/components/expand_component/expand_component.scss: -------------------------------------------------------------------------------- 1 | .expand-box{ 2 | padding: 0 20rpx 35rpx; 3 | font-size: 24rpx; 4 | color:#333; 5 | .line{ 6 | padding: 30rpx 0; 7 | &.name{ 8 | color:#006699 9 | } 10 | &.age{ 11 | color:#990066 12 | } 13 | &.sex{ 14 | color:#669900 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/components/expand_component/expand_component.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 获取应用实例 4 | const app = getApp() 5 | type InitData = { 6 | } 7 | 8 | type InitProperty = { 9 | item: WechatMiniprogram.Component.FullProperty, 10 | index: WechatMiniprogram.Component.FullProperty, 11 | dynamicValue: WechatMiniprogram.Component.FullProperty, 12 | } 13 | 14 | type InitMethod = { 15 | handleClickItem(e: GlobalData.WxAppletsEvent): void 16 | } 17 | 18 | Component({ 19 | options: { 20 | addGlobalClass: true, 21 | }, 22 | /** 23 | * 组件的属性列表 24 | */ 25 | properties: { 26 | item: { 27 | type: Object, 28 | value: {} 29 | }, 30 | index: { 31 | type: Number, 32 | }, 33 | dynamicValue: { 34 | type: Object, 35 | value: {} 36 | }, 37 | }, 38 | /** 39 | * 组件的初始数据 40 | */ 41 | data: { 42 | }, 43 | 44 | /** 45 | * 组件的方法列表 46 | */ 47 | methods: { 48 | handleClickItem(e) { 49 | const { type } = e.currentTarget.dataset 50 | const { index, item } = this.data 51 | this.triggerEvent('clickexpand', { 52 | value: { 53 | type, 54 | index, item 55 | } 56 | }) 57 | } 58 | }, 59 | 60 | lifetimes: { 61 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 62 | attached: function () { }, 63 | ready: function () { }, 64 | moved: function () { }, 65 | detached: function () { }, 66 | }, 67 | 68 | pageLifetimes: { 69 | // 组件所在页面的生命周期函数 70 | show: function () { }, 71 | hide: function () { }, 72 | resize: function () { }, 73 | }, 74 | 75 | }) 76 | 77 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/components/expand_component/expand_component.wxml: -------------------------------------------------------------------------------- 1 | 2 | 姓名:{{item.name}} 3 | 年龄:{{item.age}} 4 | 性别:{{item.sex}} 5 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/components/expand_component/expand_component.wxss: -------------------------------------------------------------------------------- 1 | .expand-box{padding:0 20rpx 35rpx;font-size:24rpx;color:#333}.expand-box .line{padding:30rpx 0}.expand-box .line.name{color:#006699}.expand-box .line.age{color:#990066}.expand-box .line.sex{color:#669900} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/custom_expand.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }], 27 | dataList: [], 28 | pageNum: 1, 29 | pageSize: 10, 30 | pageCount: 1, 31 | getListLoading: false, 32 | tableScrollViewHeight: '800rpx', 33 | }, 34 | methods: { 35 | options: {}, 36 | handleClickExpand(e) { 37 | console.log(e); 38 | let str = ''; 39 | const { type, index, item } = e.detail.value; 40 | if (type === 'name') { 41 | str = '点击了姓名'; 42 | } 43 | else if (type === 'age') { 44 | str = '点击了年龄'; 45 | } 46 | else if (type === 'sex') { 47 | str = '点击了性别'; 48 | } 49 | wx.showToast({ 50 | title: str 51 | }); 52 | }, 53 | getList() { 54 | return __awaiter(this, void 0, void 0, function* () { 55 | try { 56 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 57 | if (pageNum > pageCount) 58 | return; 59 | if (getListLoading) 60 | return; 61 | this.setData({ 62 | getListLoading: true, 63 | }); 64 | const res = yield mockData('list', { 65 | id: 1, 66 | name: '兼职人员', 67 | age: 10, 68 | sex: '男', 69 | }, "name", pageNum, pageSize); 70 | this.setData({ 71 | dataList: dataList.concat(res.data.list.map((item, index) => (Object.assign({}, item, { exoand_value: index === 0 ? '' : `这是第${((pageNum - 1) * pageSize) + index + 1}条` })))), 72 | pageCount: res.data.pageCount, 73 | getListLoading: false, 74 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 75 | }); 76 | } 77 | catch (e) { 78 | this.setData({ 79 | getListLoading: false, 80 | }); 81 | console.log(e); 82 | } 83 | }); 84 | }, 85 | getTableScrollViewHeight() { 86 | const node = this.createSelectorQuery().select('.basic-table >>> .tr-th'); 87 | const { pageConfig } = app.globalData; 88 | node.boundingClientRect((rect) => { 89 | this.setData({ 90 | tableScrollViewHeight: rect ? `calc(100vh - ${600 + rect.height / pageConfig.pixelRate}rpx)` : '' 91 | }); 92 | }).exec(); 93 | }, 94 | initComponent() { 95 | this.getList(); 96 | this.getTableScrollViewHeight(); 97 | }, 98 | }, 99 | lifetimes: { 100 | attached: function () { }, 101 | ready: function () { this.initComponent(); }, 102 | moved: function () { }, 103 | detached: function () { }, 104 | }, 105 | pageLifetimes: { 106 | show: function () { }, 107 | hide: function () { }, 108 | resize: function () { }, 109 | }, 110 | }); 111 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/custom_expand.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table", 5 | "expand-component": "./components/expand_component/expand_component" 6 | } 7 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/custom_expand.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/custom_expand/custom_expand.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/custom_expand.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | tableScrollViewHeight: string, 16 | } 17 | 18 | type InitProperty = { 19 | 20 | } 21 | 22 | type InitMethod = { 23 | options: any 24 | handleClickExpand(e: GlobalData.WxAppletsEvent): void, 25 | getList(): void, 26 | getTableScrollViewHeight(): void 27 | initComponent(): void 28 | } 29 | 30 | 31 | 32 | Component({ 33 | options: { 34 | addGlobalClass: true, 35 | }, 36 | /** 37 | * 组件的属性列表 38 | */ 39 | properties: { 40 | 41 | }, 42 | /** 43 | * 组件的初始数据 44 | */ 45 | data: { 46 | tableColumns: [{ 47 | title: "姓名", 48 | key: "name", 49 | }, { 50 | title: "年龄", 51 | key: "age", 52 | }, { 53 | title: "性别", 54 | key: "sex", 55 | }],// table 表头参数 56 | dataList: [],// 学校数组 57 | pageNum: 1, 58 | pageSize: 10, 59 | pageCount: 1, 60 | getListLoading: false, 61 | tableScrollViewHeight: '800rpx', 62 | }, 63 | /** 64 | * 组件的方法列表 65 | */ 66 | methods: { 67 | options: {}, 68 | // 点击table的action区域 69 | handleClickExpand(e) { 70 | console.log(e) 71 | let str: string = '' 72 | const { type, index, item } = e.detail.value 73 | if (type === 'name') { 74 | str = '点击了姓名' 75 | } else if (type === 'age') { 76 | str = '点击了年龄' 77 | } else if (type === 'sex') { 78 | str = '点击了性别' 79 | } 80 | wx.showToast({ 81 | title: str 82 | }) 83 | }, 84 | // 获取列表 85 | async getList() { 86 | try { 87 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 88 | if (pageNum > pageCount) return 89 | if (getListLoading) return 90 | this.setData({ 91 | getListLoading: true, 92 | }) 93 | const res = await mockData('list', { 94 | id: 1, 95 | name: '兼职人员', 96 | age: 10, 97 | sex: '男', 98 | }, "name", pageNum, pageSize) 99 | this.setData({ 100 | dataList: dataList.concat(res.data.list.map((item, index) => ({ 101 | ...item, 102 | exoand_value: index === 0 ? '' : `这是第${((pageNum - 1) * pageSize) + index + 1}条` 103 | }))), 104 | pageCount: res.data.pageCount, 105 | getListLoading: false, 106 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 107 | }) 108 | } catch (e) { 109 | this.setData({ 110 | getListLoading: false, 111 | }) 112 | console.log(e) 113 | } 114 | }, 115 | getTableScrollViewHeight() { 116 | // const pageConfig = wx. 117 | const node = this.createSelectorQuery().select('.basic-table >>> .tr-th') 118 | const { pageConfig } = app.globalData 119 | node.boundingClientRect((rect) => { 120 | this.setData({ 121 | tableScrollViewHeight: rect ? `calc(100vh - ${600 + rect.height / pageConfig.pixelRate}rpx)` : '' 122 | }) 123 | }).exec() 124 | }, 125 | initComponent() { 126 | this.getList() 127 | this.getTableScrollViewHeight() 128 | }, 129 | }, 130 | lifetimes: { 131 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 132 | attached: function () { }, 133 | ready: function () { this.initComponent() }, 134 | moved: function () { }, 135 | detached: function () { }, 136 | }, 137 | 138 | pageLifetimes: { 139 | // 组件所在页面的生命周期函数 140 | show: function () { }, 141 | hide: function () { }, 142 | resize: function () { }, 143 | }, 144 | }) 145 | 146 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/custom_expand.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/custom_expand/custom_expand.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/components/action_td/action_td.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: { 7 | item: { 8 | type: Object, 9 | value: {} 10 | }, 11 | index: { 12 | type: Number, 13 | }, 14 | columns: { 15 | type: Object, 16 | value: {} 17 | }, 18 | dynamicValue: { 19 | type: Object, 20 | value: {} 21 | } 22 | }, 23 | data: {}, 24 | methods: { 25 | handleClickItem(e) { 26 | const { type } = e.currentTarget.dataset; 27 | const { index, item } = this.data; 28 | this.triggerEvent('clickaction', { 29 | value: { 30 | type, 31 | index, item 32 | } 33 | }); 34 | } 35 | }, 36 | lifetimes: { 37 | attached: function () { }, 38 | ready: function () { }, 39 | moved: function () { }, 40 | detached: function () { }, 41 | }, 42 | pageLifetimes: { 43 | show: function () { }, 44 | hide: function () { }, 45 | resize: function () { }, 46 | }, 47 | }); 48 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/components/action_td/action_td.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/components/action_td/action_td.scss: -------------------------------------------------------------------------------- 1 | .action-box{ 2 | width: 100%; 3 | height: 100%; 4 | display: flex; 5 | flex-flow:nowrap; 6 | justify-content:center; 7 | align-items:center; 8 | font-size: 24rpx; 9 | .name{ 10 | color:#006699 11 | } 12 | .age{ 13 | color:#990066 14 | } 15 | .sex{ 16 | color:#669900 17 | } 18 | .action-btn{ 19 | width: 90rpx; 20 | height: 46rpx; 21 | line-height: 46rpx; 22 | border-radius: 10rpx; 23 | font-size: 22rpx; 24 | font-weight: 500; 25 | color: #FFFFFF; 26 | text-align: center; 27 | &.disable{ 28 | background: #EF5849; 29 | } 30 | &.enable{ 31 | background: #677BEE; 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/components/action_td/action_td.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // 获取应用实例 4 | const app = getApp() 5 | type InitData = { 6 | } 7 | 8 | type InitProperty = { 9 | item: WechatMiniprogram.Component.FullProperty, 10 | index: WechatMiniprogram.Component.FullProperty, 11 | columns: WechatMiniprogram.Component.FullProperty, 12 | dynamicValue: WechatMiniprogram.Component.FullProperty, 13 | } 14 | 15 | type InitMethod = { 16 | handleClickItem(e: GlobalData.WxAppletsEvent): void 17 | } 18 | 19 | Component({ 20 | options: { 21 | addGlobalClass: true, 22 | }, 23 | /** 24 | * 组件的属性列表 25 | */ 26 | properties: { 27 | item: { 28 | type: Object, 29 | value: {} 30 | }, 31 | index: { 32 | type: Number, 33 | }, 34 | columns: { 35 | type: Object, 36 | value: {} 37 | }, 38 | dynamicValue: { 39 | type: Object, 40 | value: {} 41 | } 42 | }, 43 | /** 44 | * 组件的初始数据 45 | */ 46 | data: { 47 | }, 48 | 49 | /** 50 | * 组件的方法列表 51 | */ 52 | methods: { 53 | handleClickItem(e) { 54 | const { type } = e.currentTarget.dataset 55 | const { index, item } = this.data 56 | this.triggerEvent('clickaction', { 57 | value: { 58 | type, 59 | index, item 60 | } 61 | }) 62 | } 63 | }, 64 | 65 | lifetimes: { 66 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 67 | attached: function () { }, 68 | ready: function () { }, 69 | moved: function () { }, 70 | detached: function () { }, 71 | }, 72 | 73 | pageLifetimes: { 74 | // 组件所在页面的生命周期函数 75 | show: function () { }, 76 | hide: function () { }, 77 | resize: function () { }, 78 | }, 79 | 80 | }) 81 | 82 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/components/action_td/action_td.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{item.name}} 4 | 5 | 6 | {{item.age}} 7 | 8 | 9 | {{item.sex}} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/components/action_td/action_td.wxss: -------------------------------------------------------------------------------- 1 | .action-box{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:nowrap;flex-flow:nowrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:24rpx}.action-box .name{color:#006699}.action-box .age{color:#990066}.action-box .sex{color:#669900}.action-box .action-btn{width:90rpx;height:46rpx;line-height:46rpx;border-radius:10rpx;font-size:22rpx;font-weight:500;color:#FFFFFF;text-align:center}.action-box .action-btn.disable{background:#EF5849}.action-box .action-btn.enable{background:#677BEE} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/dynamic_value.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | type: "action" 21 | }, { 22 | title: "年龄", 23 | key: "age", 24 | type: "action" 25 | }, { 26 | title: "性别", 27 | key: "sex", 28 | type: "action" 29 | }, { 30 | title: "操作", 31 | key: "action", 32 | type: "action" 33 | }], 34 | dataList: [], 35 | pageNum: 1, 36 | pageSize: 10, 37 | pageCount: 1, 38 | getListLoading: false, 39 | editStatus: false 40 | }, 41 | methods: { 42 | options: {}, 43 | handleClickAction(e) { 44 | console.log(e.detail.value); 45 | let str = ''; 46 | const { type, index, item } = e.detail.value; 47 | if (type === 'name') { 48 | str = `第${index + 1}行姓名字段`; 49 | } 50 | else if (type === 'age') { 51 | str = `第${index + 1}行年龄字段`; 52 | } 53 | else if (type === 'sex') { 54 | str = `第${index + 1}行性别字段`; 55 | } 56 | else if (type === 'action') { 57 | str = `第${index + 1}行操作`; 58 | } 59 | wx.showToast({ 60 | title: str 61 | }); 62 | }, 63 | handleClickChangeStatus() { 64 | const { editStatus } = this.data; 65 | console.log(123); 66 | this.setData({ 67 | editStatus: !editStatus 68 | }); 69 | }, 70 | getList() { 71 | return __awaiter(this, void 0, void 0, function* () { 72 | try { 73 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 74 | if (pageNum > pageCount) 75 | return; 76 | if (getListLoading) 77 | return; 78 | this.setData({ 79 | getListLoading: true, 80 | }); 81 | const res = yield mockData('list', { 82 | id: 1, 83 | name: '兼职人员', 84 | age: 10, 85 | sex: '男', 86 | }, "name", pageNum, pageSize); 87 | this.setData({ 88 | dataList: dataList.concat(res.data.list), 89 | pageCount: res.data.pageCount, 90 | getListLoading: false, 91 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 92 | }); 93 | } 94 | catch (e) { 95 | this.setData({ 96 | getListLoading: false, 97 | }); 98 | console.log(e); 99 | } 100 | }); 101 | }, 102 | reloadList() { 103 | this.setData({ 104 | pageNum: 1, 105 | pageCount: 1, 106 | dataList: [], 107 | }, () => { 108 | this.getList(); 109 | }); 110 | }, 111 | initComponent() { 112 | this.getList(); 113 | }, 114 | }, 115 | lifetimes: { 116 | attached: function () { }, 117 | ready: function () { this.initComponent(); }, 118 | moved: function () { }, 119 | detached: function () { }, 120 | }, 121 | pageLifetimes: { 122 | show: function () { }, 123 | hide: function () { }, 124 | resize: function () { }, 125 | }, 126 | }); 127 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/dynamic_value.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table", 5 | "action-td": "./components/action_td/action_td" 6 | } 7 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/dynamic_value.scss: -------------------------------------------------------------------------------- 1 | .button{ 2 | margin-top: 30rpx; 3 | background-color: #fff; 4 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/dynamic_value.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | editStatus: boolean 16 | } 17 | 18 | type InitProperty = { 19 | 20 | } 21 | 22 | type InitMethod = { 23 | options: any 24 | handleClickAction(e: GlobalData.WxAppletsEvent): void, 25 | handleClickChangeStatus(): void 26 | getList(): void, 27 | reloadList(): void, 28 | initComponent(): void 29 | } 30 | 31 | 32 | 33 | Component({ 34 | options: { 35 | addGlobalClass: true, 36 | }, 37 | /** 38 | * 组件的属性列表 39 | */ 40 | properties: { 41 | 42 | }, 43 | /** 44 | * 组件的初始数据 45 | */ 46 | data: { 47 | tableColumns: [{ 48 | title: "姓名", 49 | key: "name", 50 | type: "action" 51 | }, { 52 | title: "年龄", 53 | key: "age", 54 | type: "action" 55 | }, { 56 | title: "性别", 57 | key: "sex", 58 | type: "action" 59 | }, { 60 | title: "操作", 61 | key: "action", 62 | type: "action" 63 | }],// table 表头参数 64 | dataList: [],// 学校数组 65 | pageNum: 1, 66 | pageSize: 10, 67 | pageCount: 1, 68 | getListLoading: false, 69 | editStatus: false 70 | }, 71 | /** 72 | * 组件的方法列表 73 | */ 74 | methods: { 75 | options: {}, 76 | // 点击table的action区域 77 | handleClickAction(e) { 78 | console.log(e.detail.value) 79 | let str: string = '' 80 | const { type, index, item } = e.detail.value 81 | if (type === 'name') { 82 | str = `第${index + 1}行姓名字段` 83 | } else if (type === 'age') { 84 | str = `第${index + 1}行年龄字段` 85 | } else if (type === 'sex') { 86 | str = `第${index + 1}行性别字段` 87 | } else if (type === 'action') { 88 | str = `第${index + 1}行操作` 89 | } 90 | wx.showToast({ 91 | title: str 92 | }) 93 | }, 94 | handleClickChangeStatus() { 95 | const { editStatus } = this.data 96 | console.log(123) 97 | this.setData({ 98 | editStatus: !editStatus 99 | }) 100 | }, 101 | // 获取列表 102 | async getList() { 103 | try { 104 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 105 | if (pageNum > pageCount) return 106 | if (getListLoading) return 107 | this.setData({ 108 | getListLoading: true, 109 | }) 110 | const res = await mockData('list', { 111 | id: 1, 112 | name: '兼职人员', 113 | age: 10, 114 | sex: '男', 115 | }, "name", pageNum, pageSize) 116 | this.setData({ 117 | dataList: dataList.concat(res.data.list), 118 | pageCount: res.data.pageCount, 119 | getListLoading: false, 120 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 121 | }) 122 | } catch (e) { 123 | this.setData({ 124 | getListLoading: false, 125 | }) 126 | console.log(e) 127 | } 128 | }, 129 | // 条件变化就会触发 130 | reloadList() { 131 | this.setData({ 132 | pageNum: 1, // 单页数量 133 | pageCount: 1,// 总页数 134 | dataList: [], 135 | }, () => { 136 | this.getList() 137 | }) 138 | }, 139 | initComponent() { 140 | this.getList() 141 | }, 142 | }, 143 | lifetimes: { 144 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 145 | attached: function () { }, 146 | ready: function () { this.initComponent() }, 147 | moved: function () { }, 148 | detached: function () { }, 149 | }, 150 | 151 | pageLifetimes: { 152 | // 组件所在页面的生命周期函数 153 | show: function () { }, 154 | hide: function () { }, 155 | resize: function () { }, 156 | }, 157 | }) 158 | 159 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/dynamic_value.wxml: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/dynamic_value/dynamic_value.wxss: -------------------------------------------------------------------------------- 1 | .button{margin-top:30rpx;background-color:#fff} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/expand/expand.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }], 27 | dataList: [], 28 | pageNum: 1, 29 | pageSize: 10, 30 | pageCount: 1, 31 | getListLoading: false, 32 | tableScrollViewHeight: '800rpx', 33 | }, 34 | methods: { 35 | options: {}, 36 | handleClickExpand(e) { 37 | console.log(e); 38 | }, 39 | getList() { 40 | return __awaiter(this, void 0, void 0, function* () { 41 | try { 42 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 43 | if (pageNum > pageCount) 44 | return; 45 | if (getListLoading) 46 | return; 47 | this.setData({ 48 | getListLoading: true, 49 | }); 50 | const res = yield mockData('list', { 51 | id: 1, 52 | name: '兼职人员', 53 | age: 10, 54 | sex: '男', 55 | }, "name", pageNum, pageSize); 56 | this.setData({ 57 | dataList: dataList.concat(res.data.list.map((item, index) => (Object.assign({}, item, { exoand_value: index === 0 ? '' : `这是第${((pageNum - 1) * pageSize) + index + 1}条` })))), 58 | pageCount: res.data.pageCount, 59 | getListLoading: false, 60 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 61 | }); 62 | } 63 | catch (e) { 64 | this.setData({ 65 | getListLoading: false, 66 | }); 67 | console.log(e); 68 | } 69 | }); 70 | }, 71 | getTableScrollViewHeight() { 72 | const node = this.createSelectorQuery().select('.basic-table >>> .tr-th'); 73 | const { pageConfig } = app.globalData; 74 | node.boundingClientRect((rect) => { 75 | this.setData({ 76 | tableScrollViewHeight: rect ? `calc(100vh - ${600 + rect.height / pageConfig.pixelRate}rpx)` : '' 77 | }); 78 | }).exec(); 79 | }, 80 | initComponent() { 81 | this.getList(); 82 | this.getTableScrollViewHeight(); 83 | }, 84 | }, 85 | lifetimes: { 86 | attached: function () { }, 87 | ready: function () { this.initComponent(); }, 88 | moved: function () { }, 89 | detached: function () { }, 90 | }, 91 | pageLifetimes: { 92 | show: function () { }, 93 | hide: function () { }, 94 | resize: function () { }, 95 | }, 96 | }); 97 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/expand/expand.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/expand/expand.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/expand/expand.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/expand/expand.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | tableScrollViewHeight: string, 16 | } 17 | 18 | type InitProperty = { 19 | 20 | } 21 | 22 | type InitMethod = { 23 | options: any 24 | handleClickExpand(e: GlobalData.WxAppletsEvent): void, 25 | getList(): void, 26 | getTableScrollViewHeight(): void 27 | initComponent(): void 28 | } 29 | 30 | 31 | Component({ 32 | options: { 33 | addGlobalClass: true, 34 | }, 35 | /** 36 | * 组件的属性列表 37 | */ 38 | properties: { 39 | 40 | }, 41 | /** 42 | * 组件的初始数据 43 | */ 44 | data: { 45 | tableColumns: [{ 46 | title: "姓名", 47 | key: "name", 48 | }, { 49 | title: "年龄", 50 | key: "age", 51 | }, { 52 | title: "性别", 53 | key: "sex", 54 | }],// table 表头参数 55 | dataList: [],// 学校数组 56 | pageNum: 1, 57 | pageSize: 10, 58 | pageCount: 1, 59 | getListLoading: false, 60 | tableScrollViewHeight: '800rpx', 61 | }, 62 | /** 63 | * 组件的方法列表 64 | */ 65 | methods: { 66 | options: {}, 67 | // 点击table的action区域 68 | handleClickExpand(e) { 69 | console.log(e) 70 | }, 71 | // 获取列表 72 | async getList() { 73 | try { 74 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 75 | if (pageNum > pageCount) return 76 | if (getListLoading) return 77 | this.setData({ 78 | getListLoading: true, 79 | }) 80 | const res = await mockData('list', { 81 | id: 1, 82 | name: '兼职人员', 83 | age: 10, 84 | sex: '男', 85 | }, "name", pageNum, pageSize) 86 | this.setData({ 87 | dataList: dataList.concat(res.data.list.map((item, index) => ({ 88 | ...item, 89 | exoand_value: index === 0 ? '' : `这是第${((pageNum - 1) * pageSize) + index + 1}条` 90 | }))), 91 | pageCount: res.data.pageCount, 92 | getListLoading: false, 93 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 94 | }) 95 | } catch (e) { 96 | this.setData({ 97 | getListLoading: false, 98 | }) 99 | console.log(e) 100 | } 101 | }, 102 | getTableScrollViewHeight() { 103 | // const pageConfig = wx. 104 | const node = this.createSelectorQuery().select('.basic-table >>> .tr-th') 105 | const { pageConfig } = app.globalData 106 | node.boundingClientRect((rect) => { 107 | this.setData({ 108 | tableScrollViewHeight: rect ? `calc(100vh - ${600 + rect.height / pageConfig.pixelRate}rpx)` : '' 109 | }) 110 | }).exec() 111 | }, 112 | initComponent() { 113 | this.getList() 114 | this.getTableScrollViewHeight() 115 | }, 116 | }, 117 | lifetimes: { 118 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 119 | attached: function () { }, 120 | ready: function () { this.initComponent() }, 121 | moved: function () { }, 122 | detached: function () { }, 123 | }, 124 | 125 | pageLifetimes: { 126 | // 组件所在页面的生命周期函数 127 | show: function () { }, 128 | hide: function () { }, 129 | resize: function () { }, 130 | }, 131 | }) 132 | 133 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/expand/expand.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/expand/expand.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/data.d.ts: -------------------------------------------------------------------------------- 1 | export interface DataListItem { 2 | key: string, 3 | desc: string, 4 | type: string, 5 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/function.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "绑定事件名", 19 | key: "key", 20 | }, { 21 | title: "介绍", 22 | key: "desc", 23 | }, { 24 | title: "类型", 25 | key: "type", 26 | }], 27 | dataList: [], 28 | getListLoading: false 29 | }, 30 | methods: { 31 | options: {}, 32 | getList() { 33 | return __awaiter(this, void 0, void 0, function* () { 34 | try { 35 | this.setData({ 36 | getListLoading: true 37 | }); 38 | const res = yield mockData('data', [{ 39 | key: 'bindclicklistitem', 40 | desc: '点击列表行事件', 41 | type: 'Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）}' 42 | }, { 43 | key: 'bindclickexpand', 44 | desc: '点击展开内容事件', 45 | type: 'Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)}' 46 | }, { 47 | key: 'bindclickaction', 48 | desc: '点击抽象节点事件', 49 | type: 'Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}' 50 | }, { 51 | key: 'bindcheckkey', 52 | desc: '勾选事件,返回被勾选项的rowKey数组', 53 | type: 'Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果)' 54 | }, { 55 | key: 'bindscrolltolower', 56 | desc: '滚动触底', 57 | type: 'Function() ' 58 | }, { 59 | key: 'bindscrolltoupper', 60 | desc: '滚动触顶', 61 | type: 'Function() ' 62 | }]); 63 | this.setData({ 64 | dataList: res.data, 65 | getListLoading: false 66 | }); 67 | } 68 | catch (e) { 69 | this.setData({ 70 | getListLoading: false 71 | }); 72 | console.log(e); 73 | } 74 | }); 75 | }, 76 | initComponent() { 77 | this.getList(); 78 | }, 79 | }, 80 | lifetimes: { 81 | attached: function () { }, 82 | ready: function () { this.initComponent(); }, 83 | moved: function () { }, 84 | detached: function () { }, 85 | }, 86 | pageLifetimes: { 87 | show: function () { }, 88 | hide: function () { }, 89 | resize: function () { }, 90 | }, 91 | }); 92 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/function.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/function.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/function/function.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/function.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from './data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | getListLoading: boolean 12 | } 13 | 14 | type InitProperty = { 15 | 16 | } 17 | 18 | type InitMethod = { 19 | options: any 20 | getList(): void, 21 | initComponent(): void 22 | } 23 | 24 | 25 | 26 | Component({ 27 | options: { 28 | addGlobalClass: true, 29 | }, 30 | /** 31 | * 组件的属性列表 32 | */ 33 | properties: { 34 | 35 | }, 36 | /** 37 | * 组件的初始数据 38 | */ 39 | data: { 40 | tableColumns: [{ 41 | title: "绑定事件名", 42 | key: "key", 43 | }, { 44 | title: "介绍", 45 | key: "desc", 46 | }, { 47 | title: "类型", 48 | key: "type", 49 | }],// table 表头参数 50 | dataList: [],// 学校数组 51 | getListLoading: false 52 | }, 53 | /** 54 | * 组件的方法列表 55 | */ 56 | methods: { 57 | options: {}, 58 | // 获取列表 59 | async getList() { 60 | try { 61 | this.setData({ 62 | getListLoading: true 63 | }) 64 | const res = await mockData('data', [{ 65 | key: 'bindclicklistitem', 66 | desc: '点击列表行事件', 67 | type: 'Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）}' 68 | }, { 69 | key: 'bindclickexpand', 70 | desc: '点击展开内容事件', 71 | type: 'Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)}' 72 | }, { 73 | key: 'bindclickaction', 74 | desc: '点击抽象节点事件', 75 | type: 'Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}' 76 | }, { 77 | key: 'bindcheckkey', 78 | desc: '勾选事件,返回被勾选项的rowKey数组', 79 | type: 'Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果)' 80 | }, { 81 | key: 'bindscrolltolower', 82 | desc: '滚动触底', 83 | type: 'Function() ' 84 | }, { 85 | key: 'bindscrolltoupper', 86 | desc: '滚动触顶', 87 | type: 'Function() ' 88 | }]) 89 | this.setData({ 90 | dataList: res.data, 91 | getListLoading: false 92 | }) 93 | } catch (e) { 94 | this.setData({ 95 | getListLoading: false 96 | }) 97 | console.log(e) 98 | } 99 | }, 100 | initComponent() { 101 | this.getList() 102 | }, 103 | }, 104 | lifetimes: { 105 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 106 | attached: function () { }, 107 | ready: function () { this.initComponent() }, 108 | moved: function () { }, 109 | detached: function () { }, 110 | }, 111 | 112 | pageLifetimes: { 113 | // 组件所在页面的生命周期函数 114 | show: function () { }, 115 | hide: function () { }, 116 | resize: function () { }, 117 | }, 118 | }) 119 | 120 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/function.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/function/function.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/layout/layout.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: { 7 | title: { 8 | type: String, 9 | value: "" 10 | }, 11 | desc: { 12 | type: String, 13 | value: "" 14 | }, 15 | }, 16 | data: {}, 17 | methods: {}, 18 | lifetimes: { 19 | attached: function () { }, 20 | moved: function () { }, 21 | detached: function () { }, 22 | }, 23 | pageLifetimes: { 24 | show: function () { }, 25 | hide: function () { }, 26 | resize: function () { }, 27 | }, 28 | }); 29 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/layout/layout.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/layout/layout.scss: -------------------------------------------------------------------------------- 1 | .block{ 2 | margin-bottom: 60rpx; 3 | padding: 30rpx; 4 | .title{ 5 | margin-bottom: 30rpx; 6 | font-size: 28rpx; 7 | color:#333 8 | } 9 | .content{ 10 | margin-bottom: 30rpx; 11 | border-radius: 20rpx; 12 | overflow: hidden; 13 | } 14 | .desc{ 15 | font-size: 24rpx; 16 | color: #666; 17 | } 18 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/layout/layout.ts: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp() 3 | type InitData = { 4 | } 5 | 6 | type InitProperty = { 7 | title: WechatMiniprogram.Component.FullProperty, 8 | desc: WechatMiniprogram.Component.FullProperty 9 | } 10 | 11 | type InitMethod = { 12 | } 13 | 14 | Component({ 15 | options: { 16 | addGlobalClass: true, 17 | }, 18 | /** 19 | * 组件的属性列表 20 | */ 21 | properties: { 22 | title: { 23 | type: String, 24 | value: "" 25 | }, 26 | desc: { 27 | type: String, 28 | value: "" 29 | }, 30 | }, 31 | 32 | /** 33 | * 组件的初始数据 34 | */ 35 | data: { 36 | }, 37 | 38 | /** 39 | * 组件的方法列表 40 | */ 41 | methods: { 42 | }, 43 | 44 | lifetimes: { 45 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 46 | attached: function () { }, 47 | moved: function () { }, 48 | detached: function () { }, 49 | }, 50 | 51 | pageLifetimes: { 52 | // 组件所在页面的生命周期函数 53 | show: function () { }, 54 | hide: function () { }, 55 | resize: function () { }, 56 | }, 57 | 58 | }) 59 | 60 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/layout/layout.wxml: -------------------------------------------------------------------------------- 1 | 2 | {{title}} 3 | 4 | 5 | 6 | {{desc}} 7 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/layout/layout.wxss: -------------------------------------------------------------------------------- 1 | .block{margin-bottom:60rpx;padding:30rpx}.block .title{margin-bottom:30rpx;font-size:28rpx;color:#333}.block .content{margin-bottom:30rpx;border-radius:20rpx;overflow:hidden}.block .desc{font-size:24rpx;color:#666} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/data.d.ts: -------------------------------------------------------------------------------- 1 | export interface DataListItem { 2 | key: string, 3 | desc: string, 4 | type: string, 5 | require: boolean, 6 | init: any 7 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/parameter.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "参数", 19 | key: "key", 20 | }, { 21 | title: "介绍", 22 | key: "desc", 23 | }, { 24 | title: "类型", 25 | key: "type", 26 | }, { 27 | title: "默认值", 28 | key: "init", 29 | }, { 30 | title: "必填", 31 | key: "require", 32 | }], 33 | dataList: [], 34 | getListLoading: false 35 | }, 36 | methods: { 37 | options: {}, 38 | getList() { 39 | return __awaiter(this, void 0, void 0, function* () { 40 | try { 41 | this.setData({ 42 | getListLoading: true 43 | }); 44 | const res = yield mockData('data', [{ 45 | key: 'columns', 46 | desc: '表格内容配置', 47 | type: 'Columns[]', 48 | init: `[]`, 49 | require: true, 50 | }, { 51 | key: 'dataList', 52 | desc: '数据', 53 | type: 'any[]', 54 | init: `[]`, 55 | require: true, 56 | }, { 57 | key: 'getListLoading', 58 | desc: '请求列表的loading', 59 | type: 'boolean', 60 | init: 'false', 61 | require: true, 62 | }, { 63 | key: 'rowKey', 64 | desc: '用于指明行的唯一标识符，在勾选中有使用', 65 | type: 'string', 66 | init: `id`, 67 | require: false, 68 | }, { 69 | key: 'scrollViewHeight', 70 | desc: '控制可滚动区域高度。', 71 | type: 'string', 72 | init: `600rpx`, 73 | require: false, 74 | }, { 75 | key: 'showTipImage', 76 | desc: '控制无数据时显示提示文本图片', 77 | type: 'boolean', 78 | init: 'false', 79 | require: true, 80 | }, { 81 | key: 'tipTitle', 82 | desc: '无数据时的提示文本主标题', 83 | type: 'string', 84 | init: `提示`, 85 | require: false, 86 | }, { 87 | key: 'tipSubtitle', 88 | desc: '无数据时的提示文本副标题', 89 | type: 'string', 90 | init: `暂无数据`, 91 | require: false, 92 | }, { 93 | key: 'scrollX', 94 | desc: '是否需要X轴滚动', 95 | type: 'boolean', 96 | init: `false`, 97 | require: false, 98 | }, { 99 | key: 'select', 100 | desc: '控制是否出现勾选。', 101 | type: 'boolean', 102 | init: `false`, 103 | require: false, 104 | }, { 105 | key: 'selectKeys', 106 | desc: '勾选的初始值', 107 | type: 'string[]', 108 | init: `[]`, 109 | require: false, 110 | }, { 111 | key: 'isExpand', 112 | desc: '控制是否点击展开。', 113 | type: 'boolean', 114 | init: `false`, 115 | require: false, 116 | }, { 117 | key: 'expandValueKey', 118 | desc: '展开信息的key值', 119 | type: 'string', 120 | init: 'undefined', 121 | require: false, 122 | }, { 123 | key: 'initExpandValue', 124 | desc: '当展开信息为空时的默认提示语', 125 | type: 'string', 126 | init: 'undefined', 127 | require: false, 128 | }, { 129 | key: 'expandStyle', 130 | desc: '展开信息的最外层的样式', 131 | type: 'string', 132 | init: 'undefined', 133 | require: false, 134 | }, { 135 | key: 'dynamicValue', 136 | desc: '给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} ', 137 | type: 'Object', 138 | init: `{}`, 139 | require: false, 140 | }, { 141 | key: 'generic:action-td', 142 | desc: '当列表项内具有操作列，需要在`columns`内添加`key:action`的一项，操作列的内容往往需要自定义，小程序不提供react,vue的`rander函数`，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由`bindclickaction`触发', 143 | type: 'component', 144 | init: `undefined`, 145 | require: false, 146 | }, { 147 | key: 'generic:expand-component', 148 | desc: '如果展开区域的内容需要自定义，`expandValueKey`设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由`bindclickexpand`触发', 149 | type: 'component', 150 | init: `undefined`, 151 | require: false, 152 | },]); 153 | this.setData({ 154 | dataList: res.data, 155 | getListLoading: false 156 | }); 157 | } 158 | catch (e) { 159 | this.setData({ 160 | getListLoading: false 161 | }); 162 | console.log(e); 163 | } 164 | }); 165 | }, 166 | initComponent() { 167 | this.getList(); 168 | }, 169 | }, 170 | lifetimes: { 171 | attached: function () { }, 172 | ready: function () { this.initComponent(); }, 173 | moved: function () { }, 174 | detached: function () { }, 175 | }, 176 | pageLifetimes: { 177 | show: function () { }, 178 | hide: function () { }, 179 | resize: function () { }, 180 | }, 181 | }); 182 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/parameter.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/parameter.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/parameter/parameter.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/parameter.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from './data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | getListLoading: boolean 12 | } 13 | 14 | type InitProperty = { 15 | 16 | } 17 | 18 | type InitMethod = { 19 | options: any 20 | getList(): void, 21 | initComponent(): void 22 | } 23 | 24 | 25 | 26 | Component({ 27 | options: { 28 | addGlobalClass: true, 29 | }, 30 | /** 31 | * 组件的属性列表 32 | */ 33 | properties: { 34 | 35 | }, 36 | /** 37 | * 组件的初始数据 38 | */ 39 | data: { 40 | tableColumns: [{ 41 | title: "参数", 42 | key: "key", 43 | }, { 44 | title: "介绍", 45 | key: "desc", 46 | }, { 47 | title: "类型", 48 | key: "type", 49 | }, { 50 | title: "默认值", 51 | key: "init", 52 | }, { 53 | title: "必填", 54 | key: "require", 55 | }],// table 表头参数 56 | dataList: [],// 学校数组 57 | getListLoading: false 58 | }, 59 | /** 60 | * 组件的方法列表 61 | */ 62 | methods: { 63 | options: {}, 64 | // 获取列表 65 | async getList() { 66 | try { 67 | this.setData({ 68 | getListLoading: true 69 | }) 70 | const res = await mockData('data', [{ 71 | key: 'columns', 72 | desc: '表格内容配置', 73 | type: 'Columns[]', 74 | init: `[]`, 75 | require: true, 76 | }, { 77 | key: 'dataList', 78 | desc: '数据', 79 | type: 'any[]', 80 | init: `[]`, 81 | require: true, 82 | }, { 83 | key: 'getListLoading', 84 | desc: '请求列表的loading', 85 | type: 'boolean', 86 | init: 'false', 87 | require: true, 88 | }, { 89 | key: 'rowKey', 90 | desc: '用于指明行的唯一标识符，在勾选中有使用', 91 | type: 'string', 92 | init: `id`, 93 | require: false, 94 | }, { 95 | key: 'scrollViewHeight', 96 | desc: '控制可滚动区域高度。', 97 | type: 'string', 98 | init: `600rpx`, 99 | require: false, 100 | }, { 101 | key: 'showTipImage', 102 | desc: '控制无数据时显示提示文本图片', 103 | type: 'boolean', 104 | init: 'false', 105 | require: true, 106 | }, { 107 | key: 'tipTitle', 108 | desc: '无数据时的提示文本主标题', 109 | type: 'string', 110 | init: `提示`, 111 | require: false, 112 | }, { 113 | key: 'tipSubtitle', 114 | desc: '无数据时的提示文本副标题', 115 | type: 'string', 116 | init: `暂无数据`, 117 | require: false, 118 | }, { 119 | key: 'scrollX', 120 | desc: '是否需要X轴滚动', 121 | type: 'boolean', 122 | init: `false`, 123 | require: false, 124 | }, { 125 | key: 'select', 126 | desc: '控制是否出现勾选。', 127 | type: 'boolean', 128 | init: `false`, 129 | require: false, 130 | }, { 131 | key: 'selectKeys', 132 | desc: '勾选的初始值', 133 | type: 'string[]', 134 | init: `[]`, 135 | require: false, 136 | }, { 137 | key: 'isExpand', 138 | desc: '控制是否点击展开。', 139 | type: 'boolean', 140 | init: `false`, 141 | require: false, 142 | }, { 143 | key: 'expandValueKey', 144 | desc: '展开信息的key值', 145 | type: 'string', 146 | init: 'undefined', 147 | require: false, 148 | }, { 149 | key: 'initExpandValue', 150 | desc: '当展开信息为空时的默认提示语', 151 | type: 'string', 152 | init: 'undefined', 153 | require: false, 154 | }, { 155 | key: 'expandStyle', 156 | desc: '展开信息的最外层的样式', 157 | type: 'string', 158 | init: 'undefined', 159 | require: false, 160 | }, { 161 | key: 'dynamicValue', 162 | desc: '给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} ', 163 | type: 'Object', 164 | init: `{}`, 165 | require: false, 166 | }, { 167 | key: 'generic:action-td', 168 | desc: '当列表项内具有操作列，需要在`columns`内添加`key:action`的一项，操作列的内容往往需要自定义，小程序不提供react,vue的`rander函数`，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由`bindclickaction`触发', 169 | type: 'component', 170 | init: `undefined`, 171 | require: false, 172 | }, { 173 | key: 'generic:expand-component', 174 | desc: '如果展开区域的内容需要自定义，`expandValueKey`设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由`bindclickexpand`触发', 175 | type: 'component', 176 | init: `undefined`, 177 | require: false, 178 | },]) 179 | this.setData({ 180 | dataList: res.data, 181 | getListLoading: false 182 | }) 183 | } catch (e) { 184 | this.setData({ 185 | getListLoading: false 186 | }) 187 | console.log(e) 188 | } 189 | }, 190 | initComponent() { 191 | this.getList() 192 | }, 193 | }, 194 | lifetimes: { 195 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 196 | attached: function () { }, 197 | ready: function () { this.initComponent() }, 198 | moved: function () { }, 199 | detached: function () { }, 200 | }, 201 | 202 | pageLifetimes: { 203 | // 组件所在页面的生命周期函数 204 | show: function () { }, 205 | hide: function () { }, 206 | resize: function () { }, 207 | }, 208 | }) 209 | 210 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/parameter.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/parameter/parameter.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/data.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/scroll_to_lower_and_upper/data.d.ts -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }], 27 | dataList: [], 28 | pageNum: 1, 29 | pageSize: 10, 30 | pageCount: 1, 31 | getListLoading: false, 32 | }, 33 | methods: { 34 | options: {}, 35 | handleClickAction(e) { 36 | console.log(e); 37 | }, 38 | getList() { 39 | return __awaiter(this, void 0, void 0, function* () { 40 | try { 41 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 42 | if (pageNum > pageCount) 43 | return; 44 | if (getListLoading) 45 | return; 46 | this.setData({ 47 | getListLoading: true, 48 | }); 49 | const res = yield mockData('list', { 50 | id: 1, 51 | name: '兼职人员', 52 | age: 10, 53 | sex: '男', 54 | }, "name", pageNum, pageSize); 55 | this.setData({ 56 | dataList: dataList.concat(res.data.list), 57 | pageCount: res.data.pageCount, 58 | getListLoading: false, 59 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 60 | }); 61 | } 62 | catch (e) { 63 | this.setData({ 64 | getListLoading: false, 65 | }); 66 | console.log(e); 67 | } 68 | }); 69 | }, 70 | reloadList() { 71 | this.setData({ 72 | pageNum: 1, 73 | pageCount: 1, 74 | dataList: [], 75 | }, () => { 76 | this.getList(); 77 | }); 78 | }, 79 | initComponent() { 80 | this.getList(); 81 | }, 82 | }, 83 | lifetimes: { 84 | attached: function () { }, 85 | ready: function () { this.initComponent(); }, 86 | moved: function () { }, 87 | detached: function () { }, 88 | }, 89 | pageLifetimes: { 90 | show: function () { }, 91 | hide: function () { }, 92 | resize: function () { }, 93 | }, 94 | }); 95 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | } 16 | 17 | type InitProperty = { 18 | 19 | } 20 | 21 | type InitMethod = { 22 | options: any 23 | handleClickAction(e: GlobalData.WxAppletsEvent): void, 24 | getList(): void, 25 | reloadList(): void, 26 | initComponent(): void 27 | } 28 | 29 | 30 | 31 | Component({ 32 | options: { 33 | addGlobalClass: true, 34 | }, 35 | /** 36 | * 组件的属性列表 37 | */ 38 | properties: { 39 | 40 | }, 41 | /** 42 | * 组件的初始数据 43 | */ 44 | data: { 45 | tableColumns: [{ 46 | title: "姓名", 47 | key: "name", 48 | }, { 49 | title: "年龄", 50 | key: "age", 51 | }, { 52 | title: "性别", 53 | key: "sex", 54 | }],// table 表头参数 55 | dataList: [],// 学校数组 56 | pageNum: 1, 57 | pageSize: 10, 58 | pageCount: 1, 59 | getListLoading: false, 60 | }, 61 | /** 62 | * 组件的方法列表 63 | */ 64 | methods: { 65 | options: {}, 66 | // 点击table的action区域 67 | handleClickAction(e) { 68 | console.log(e) 69 | 70 | }, 71 | // 获取列表 72 | async getList() { 73 | try { 74 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 75 | if (pageNum > pageCount) return 76 | if (getListLoading) return 77 | this.setData({ 78 | getListLoading: true, 79 | }) 80 | const res = await mockData('list', { 81 | id: 1, 82 | name: '兼职人员', 83 | age: 10, 84 | sex: '男', 85 | }, "name", pageNum, pageSize) 86 | this.setData({ 87 | dataList: dataList.concat(res.data.list), 88 | pageCount: res.data.pageCount, 89 | getListLoading: false, 90 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 91 | }) 92 | } catch (e) { 93 | this.setData({ 94 | getListLoading: false, 95 | }) 96 | console.log(e) 97 | } 98 | }, 99 | // 条件变化就会触发 100 | reloadList() { 101 | this.setData({ 102 | pageNum: 1, // 单页数量 103 | pageCount: 1,// 总页数 104 | dataList: [], 105 | }, () => { 106 | this.getList() 107 | }) 108 | }, 109 | initComponent() { 110 | this.getList() 111 | }, 112 | }, 113 | lifetimes: { 114 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 115 | attached: function () { }, 116 | ready: function () { this.initComponent() }, 117 | moved: function () { }, 118 | detached: function () { }, 119 | }, 120 | 121 | pageLifetimes: { 122 | // 组件所在页面的生命周期函数 123 | show: function () { }, 124 | hide: function () { }, 125 | resize: function () { }, 126 | }, 127 | }) 128 | 129 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_to_lower_and_upper/scroll_to_lower_and_upper.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_x/scroll_x.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }, { 27 | title: "额外属性1", 28 | key: "prototype1", 29 | }, { 30 | title: "额外属性2额外属性2额外属性2额外属性2", 31 | key: "prototype2", 32 | }, { 33 | title: "额外属性3额外属性3额外属性3额外属性3", 34 | key: "prototype3", 35 | width: "300rpx" 36 | }], 37 | dataList: [], 38 | pageNum: 1, 39 | pageSize: 10, 40 | pageCount: 1, 41 | getListLoading: false, 42 | }, 43 | methods: { 44 | options: {}, 45 | handleClickItem(e) { 46 | console.log(e); 47 | const { index, item } = e.detail.value; 48 | wx.showToast({ 49 | title: `点击第${index + 1}行` 50 | }); 51 | }, 52 | getList() { 53 | return __awaiter(this, void 0, void 0, function* () { 54 | try { 55 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 56 | if (pageNum > pageCount) 57 | return; 58 | if (getListLoading) 59 | return; 60 | this.setData({ 61 | getListLoading: true, 62 | }); 63 | const res = yield mockData('list', { 64 | id: 1, 65 | name: '兼职人员', 66 | age: 10, 67 | sex: '男', 68 | prototype1: '属性一', 69 | prototype2: '属性二很长没有设置宽度', 70 | prototype3: '属性三很长设置了宽度', 71 | }, "name", pageNum, pageSize); 72 | this.setData({ 73 | dataList: dataList.concat(res.data.list), 74 | pageCount: res.data.pageCount, 75 | getListLoading: false, 76 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 77 | }); 78 | } 79 | catch (e) { 80 | this.setData({ 81 | getListLoading: false, 82 | }); 83 | console.log(e); 84 | } 85 | }); 86 | }, 87 | initComponent() { 88 | this.getList(); 89 | }, 90 | }, 91 | lifetimes: { 92 | attached: function () { }, 93 | ready: function () { this.initComponent(); }, 94 | moved: function () { }, 95 | detached: function () { }, 96 | }, 97 | pageLifetimes: { 98 | show: function () { }, 99 | hide: function () { }, 100 | resize: function () { }, 101 | }, 102 | }); 103 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_x/scroll_x.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_x/scroll_x.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/scroll_x/scroll_x.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_x/scroll_x.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | } 16 | 17 | type InitProperty = { 18 | 19 | } 20 | 21 | type InitMethod = { 22 | options: any 23 | handleClickItem(e: GlobalData.WxAppletsEvent): void 24 | getList(): void, 25 | initComponent(): void 26 | } 27 | 28 | 29 | 30 | Component({ 31 | options: { 32 | addGlobalClass: true, 33 | }, 34 | /** 35 | * 组件的属性列表 36 | */ 37 | properties: { 38 | 39 | }, 40 | /** 41 | * 组件的初始数据 42 | */ 43 | data: { 44 | tableColumns: [{ 45 | title: "姓名", 46 | key: "name", 47 | }, { 48 | title: "年龄", 49 | key: "age", 50 | }, { 51 | title: "性别", 52 | key: "sex", 53 | }, { 54 | title: "额外属性1", 55 | key: "prototype1", 56 | }, { 57 | title: "额外属性2额外属性2额外属性2额外属性2", 58 | key: "prototype2", 59 | }, { 60 | title: "额外属性3额外属性3额外属性3额外属性3", 61 | key: "prototype3", 62 | width: "300rpx" 63 | }],// table 表头参数 64 | dataList: [],// 学校数组 65 | pageNum: 1, 66 | pageSize: 10, 67 | pageCount: 1, 68 | getListLoading: false, 69 | }, 70 | /** 71 | * 组件的方法列表 72 | */ 73 | methods: { 74 | options: {}, 75 | handleClickItem(e) { 76 | console.log(e) 77 | const { index, item } = e.detail.value 78 | wx.showToast({ 79 | title: `点击第${index + 1}行` 80 | }) 81 | }, 82 | // 获取列表 83 | async getList() { 84 | try { 85 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 86 | if (pageNum > pageCount) return 87 | if (getListLoading) return 88 | this.setData({ 89 | getListLoading: true, 90 | }) 91 | const res = await mockData('list', { 92 | id: 1, 93 | name: '兼职人员', 94 | age: 10, 95 | sex: '男', 96 | prototype1: '属性一', 97 | prototype2: '属性二很长没有设置宽度', 98 | prototype3: '属性三很长设置了宽度', 99 | }, "name", pageNum, pageSize) 100 | this.setData({ 101 | dataList: dataList.concat(res.data.list), 102 | pageCount: res.data.pageCount, 103 | getListLoading: false, 104 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 105 | }) 106 | } catch (e) { 107 | this.setData({ 108 | getListLoading: false, 109 | }) 110 | console.log(e) 111 | } 112 | }, 113 | initComponent() { 114 | this.getList() 115 | }, 116 | }, 117 | lifetimes: { 118 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 119 | attached: function () { }, 120 | ready: function () { this.initComponent() }, 121 | moved: function () { }, 122 | detached: function () { }, 123 | }, 124 | 125 | pageLifetimes: { 126 | // 组件所在页面的生命周期函数 127 | show: function () { }, 128 | hide: function () { }, 129 | resize: function () { }, 130 | }, 131 | }) 132 | 133 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_x/scroll_x.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/scroll_x/scroll_x.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/data.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/set_height/data.d.ts -------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/set_height.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { mockData } from '../../../../public/utils/util'; 10 | const app = getApp(); 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | properties: {}, 16 | data: { 17 | tableColumns: [{ 18 | title: "姓名", 19 | key: "name", 20 | }, { 21 | title: "年龄", 22 | key: "age", 23 | }, { 24 | title: "性别", 25 | key: "sex", 26 | }], 27 | dataList: [], 28 | pageNum: 1, 29 | pageSize: 10, 30 | pageCount: 1, 31 | getListLoading: false, 32 | tableHeight: "800rpx" 33 | }, 34 | methods: { 35 | options: {}, 36 | getList() { 37 | return __awaiter(this, void 0, void 0, function* () { 38 | try { 39 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data; 40 | if (pageNum > pageCount) 41 | return; 42 | if (getListLoading) 43 | return; 44 | this.setData({ 45 | getListLoading: true, 46 | }); 47 | const res = yield mockData('list', { 48 | id: 1, 49 | name: '兼职人员', 50 | age: 10, 51 | sex: '男', 52 | }, "name", pageNum, pageSize); 53 | this.setData({ 54 | dataList: dataList.concat(res.data.list), 55 | pageCount: res.data.pageCount, 56 | getListLoading: false, 57 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 58 | }); 59 | } 60 | catch (e) { 61 | this.setData({ 62 | getListLoading: false, 63 | }); 64 | console.log(e); 65 | } 66 | }); 67 | }, 68 | initComponent() { 69 | this.getList(); 70 | }, 71 | }, 72 | lifetimes: { 73 | attached: function () { }, 74 | ready: function () { this.initComponent(); }, 75 | moved: function () { }, 76 | detached: function () { }, 77 | }, 78 | pageLifetimes: { 79 | show: function () { }, 80 | hide: function () { }, 81 | resize: function () { }, 82 | }, 83 | }); 84 | -------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/set_height.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "table": "/public/components/public/table/table" 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/set_height.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/components/set_height/set_height.scss -------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/set_height.ts: -------------------------------------------------------------------------------- 1 | import { Columns } from '../../../../public/components/public/table/data' 2 | import { DataListItem } from '../../data' 3 | import { mockData } from '../../../../public/utils/util' 4 | 5 | // 获取应用实例 6 | const app = getApp() 7 | 8 | type InitData = { 9 | dataList: DataListItem[], 10 | tableColumns: Columns[], 11 | pageNum: number,// 分页 12 | pageSize: number, // 单页数量 13 | pageCount: number,// 总页数 14 | getListLoading: boolean, 15 | tableHeight: string, 16 | } 17 | 18 | type InitProperty = { 19 | 20 | } 21 | 22 | type InitMethod = { 23 | options: any 24 | getList(): void, 25 | initComponent(): void 26 | } 27 | 28 | 29 | 30 | Component({ 31 | options: { 32 | addGlobalClass: true, 33 | }, 34 | /** 35 | * 组件的属性列表 36 | */ 37 | properties: { 38 | 39 | }, 40 | /** 41 | * 组件的初始数据 42 | */ 43 | data: { 44 | tableColumns: [{ 45 | title: "姓名", 46 | key: "name", 47 | }, { 48 | title: "年龄", 49 | key: "age", 50 | }, { 51 | title: "性别", 52 | key: "sex", 53 | }],// table 表头参数 54 | dataList: [],// 学校数组 55 | pageNum: 1, 56 | pageSize: 10, 57 | pageCount: 1, 58 | getListLoading: false, 59 | tableHeight: "800rpx" 60 | }, 61 | /** 62 | * 组件的方法列表 63 | */ 64 | methods: { 65 | options: {}, 66 | // 获取列表 67 | async getList() { 68 | try { 69 | const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data 70 | if (pageNum > pageCount) return 71 | if (getListLoading) return 72 | this.setData({ 73 | getListLoading: true, 74 | }) 75 | const res = await mockData('list', { 76 | id: 1, 77 | name: '兼职人员', 78 | age: 10, 79 | sex: '男', 80 | }, "name", pageNum, pageSize) 81 | this.setData({ 82 | dataList: dataList.concat(res.data.list), 83 | pageCount: res.data.pageCount, 84 | getListLoading: false, 85 | pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum, 86 | }) 87 | } catch (e) { 88 | this.setData({ 89 | getListLoading: false, 90 | }) 91 | console.log(e) 92 | } 93 | }, 94 | initComponent() { 95 | this.getList() 96 | }, 97 | }, 98 | lifetimes: { 99 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 100 | attached: function () { }, 101 | ready: function () { this.initComponent() }, 102 | moved: function () { }, 103 | detached: function () { }, 104 | }, 105 | 106 | pageLifetimes: { 107 | // 组件所在页面的生命周期函数 108 | show: function () { }, 109 | hide: function () { }, 110 | resize: function () { }, 111 | }, 112 | }) 113 | 114 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/set_height.wxml: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /miniprogram/pages/index/components/set_height/set_height.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/index/data.d.ts: -------------------------------------------------------------------------------- 1 | export interface DataListItem { 2 | id: number, 3 | name: string, 4 | age: number, 5 | sex: string, 6 | 7 | 8 | prototype1?: string, 9 | prototype2?: string, 10 | prototype3?: string, 11 | 12 | check_id?: number | string 13 | exoand_value?: string 14 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/index.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: {}, 7 | data: {}, 8 | computed: {}, 9 | methods: { 10 | onLoad(options) { 11 | console.log(options); 12 | }, 13 | onShow() { 14 | console.log('onShow'); 15 | }, 16 | onReady() { 17 | console.log('onReady'); 18 | }, 19 | onShareAppMessage() { 20 | return app.globalData.transmit; 21 | } 22 | }, 23 | lifetimes: { 24 | attached: function () { }, 25 | moved: function () { }, 26 | detached: function () { }, 27 | }, 28 | pageLifetimes: { 29 | show: function () { }, 30 | hide: function () { }, 31 | resize: function () { }, 32 | }, 33 | }); 34 | -------------------------------------------------------------------------------- /miniprogram/pages/index/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarTitleText": "自定义table", 3 | "component": true, 4 | "usingComponents": { 5 | "layout": "./components/layout/layout", 6 | "basic": "./components/basic/basic", 7 | "set-height": "./components/set_height/set_height", 8 | "scroll-x": "./components/scroll_x/scroll_x", 9 | "scroll-to-lower-and-upper": "./components/scroll_to_lower_and_upper/scroll_to_lower_and_upper", 10 | "custom-action": "./components/custom_action/custom_action", 11 | "check": "./components/check/check", 12 | "expand": "./components/expand/expand", 13 | "custom-expand": "./components/custom_expand/custom_expand", 14 | "dynamic-value": "./components/dynamic_value/dynamic_value", 15 | "parameter": "./components/parameter/parameter", 16 | "function": "./components/function/function", 17 | "columns": "./components/columns/columns" 18 | } 19 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/index.scss: -------------------------------------------------------------------------------- 1 | @import '../../public/wxss/main'; 2 | 3 | .tip{ 4 | margin: 30rpx; 5 | padding: 30rpx; 6 | font-size: 28rpx; 7 | background-color: $c-main; 8 | border-radius: 30rpx; 9 | color:#fff 10 | } -------------------------------------------------------------------------------- /miniprogram/pages/index/index.ts: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp() 3 | type InitData = { 4 | } 5 | 6 | type InitProperty = {} 7 | 8 | type InitMethod = { 9 | onLoad(options: any): void 10 | onShow(): void 11 | onReady(): void 12 | onShareAppMessage(): void 13 | } 14 | 15 | Component({ 16 | options: { 17 | addGlobalClass: true, 18 | }, 19 | /** 20 | * 组件的属性列表 21 | */ 22 | properties: { 23 | 24 | }, 25 | /** 26 | * 组件的初始数据 27 | */ 28 | data: { 29 | }, 30 | computed: { 31 | 32 | }, 33 | 34 | /** 35 | * 组件的方法列表 36 | */ 37 | methods: { 38 | onLoad(options: any) { 39 | console.log(options) 40 | }, 41 | onShow() { 42 | console.log('onShow') 43 | }, 44 | onReady() { 45 | console.log('onReady') 46 | }, 47 | onShareAppMessage() { 48 | return app.globalData.transmit 49 | } 50 | }, 51 | 52 | lifetimes: { 53 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 54 | attached: function () { }, 55 | moved: function () { }, 56 | detached: function () { }, 57 | }, 58 | 59 | pageLifetimes: { 60 | // 组件所在页面的生命周期函数 61 | show: function () { }, 62 | hide: function () { }, 63 | resize: function () { }, 64 | }, 65 | 66 | }) 67 | 68 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这里将自己编写的table组件展示一下供大家查看。 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /miniprogram/pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | .tip{margin:30rpx;padding:30rpx;font-size:28rpx;background-color:#687CEE;border-radius:30rpx;color:#fff} 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/service.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /miniprogram/pages/index/service.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/index/service.ts -------------------------------------------------------------------------------- /miniprogram/pages/template/component_template/component_template.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: {}, 7 | data: {}, 8 | methods: {}, 9 | lifetimes: { 10 | attached: function () { }, 11 | moved: function () { }, 12 | detached: function () { }, 13 | }, 14 | pageLifetimes: { 15 | show: function () { }, 16 | hide: function () { }, 17 | resize: function () { }, 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /miniprogram/pages/template/component_template/component_template.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/pages/template/component_template/component_template.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/template/component_template/component_template.scss -------------------------------------------------------------------------------- /miniprogram/pages/template/component_template/component_template.ts: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp() 3 | type InitData = { 4 | } 5 | 6 | type InitProperty = {} 7 | 8 | type InitMethod = { 9 | } 10 | 11 | Component({ 12 | options: { 13 | addGlobalClass: true, 14 | }, 15 | /** 16 | * 组件的属性列表 17 | */ 18 | properties: { 19 | 20 | }, 21 | 22 | /** 23 | * 组件的初始数据 24 | */ 25 | data: { 26 | }, 27 | 28 | /** 29 | * 组件的方法列表 30 | */ 31 | methods: { 32 | }, 33 | 34 | lifetimes: { 35 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 36 | attached: function () { }, 37 | moved: function () { }, 38 | detached: function () { }, 39 | }, 40 | 41 | pageLifetimes: { 42 | // 组件所在页面的生命周期函数 43 | show: function () { }, 44 | hide: function () { }, 45 | resize: function () { }, 46 | }, 47 | 48 | }) 49 | 50 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/template/component_template/component_template.wxml: -------------------------------------------------------------------------------- 1 | 123 -------------------------------------------------------------------------------- /miniprogram/pages/template/component_template/component_template.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/data.d.ts: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/page_template.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: {}, 7 | data: {}, 8 | computed: {}, 9 | methods: { 10 | onLoad(options) { 11 | console.log(options); 12 | }, 13 | onShow() { 14 | console.log('onShow'); 15 | }, 16 | onReady() { 17 | console.log('onReady'); 18 | } 19 | }, 20 | lifetimes: { 21 | attached: function () { }, 22 | moved: function () { }, 23 | detached: function () { }, 24 | }, 25 | pageLifetimes: { 26 | show: function () { }, 27 | hide: function () { }, 28 | resize: function () { }, 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/page_template.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | 5 | } 6 | } -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/page_template.scss: -------------------------------------------------------------------------------- 1 | @import '../../public/wxss/main'; 2 | -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/page_template.ts: -------------------------------------------------------------------------------- 1 | // 获取应用实例 2 | const app = getApp() 3 | type InitData = { 4 | } 5 | 6 | type InitProperty = {} 7 | 8 | type InitMethod = { 9 | onLoad(options: any): void 10 | onShow(): void 11 | onReady(): void 12 | } 13 | 14 | Component({ 15 | options: { 16 | addGlobalClass: true, 17 | }, 18 | /** 19 | * 组件的属性列表 20 | */ 21 | properties: { 22 | 23 | }, 24 | /** 25 | * 组件的初始数据 26 | */ 27 | data: { 28 | }, 29 | computed: { 30 | 31 | }, 32 | 33 | /** 34 | * 组件的方法列表 35 | */ 36 | methods: { 37 | onLoad(options: any) { 38 | console.log(options) 39 | }, 40 | onShow() { 41 | console.log('onShow') 42 | }, 43 | onReady() { 44 | console.log('onReady') 45 | } 46 | }, 47 | 48 | lifetimes: { 49 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 50 | attached: function () { }, 51 | moved: function () { }, 52 | detached: function () { }, 53 | }, 54 | 55 | pageLifetimes: { 56 | // 组件所在页面的生命周期函数 57 | show: function () { }, 58 | hide: function () { }, 59 | resize: function () { }, 60 | }, 61 | 62 | }) 63 | 64 | export { } -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/page_template.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 页面名称 4 | -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/page_template.wxss: -------------------------------------------------------------------------------- 1 | /* No CSS */ -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/service.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | -------------------------------------------------------------------------------- /miniprogram/pages/template/page_template/service.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/pages/template/page_template/service.ts -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.js: -------------------------------------------------------------------------------- 1 | const app = getApp(); 2 | Component({ 3 | options: { 4 | addGlobalClass: true, 5 | }, 6 | properties: { 7 | show: { 8 | type: Boolean, 9 | value: false 10 | }, 11 | text: { 12 | type: String, 13 | value: '暂无数据' 14 | }, 15 | subText: { 16 | type: String, 17 | value: '' 18 | } 19 | }, 20 | data: {}, 21 | methods: { 22 | onLoad(options) { 23 | console.log(options); 24 | }, 25 | onShow() { 26 | console.log('onShow'); 27 | }, 28 | onReady() { 29 | console.log('onReady'); 30 | }, 31 | }, 32 | lifetimes: { 33 | attached: function () { }, 34 | moved: function () { }, 35 | detached: function () { }, 36 | }, 37 | pageLifetimes: { 38 | show: function () { }, 39 | hide: function () { }, 40 | resize: function () { }, 41 | }, 42 | }); 43 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {} 4 | } -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.md: -------------------------------------------------------------------------------- 1 | # empty组件相关 2 | 3 | 内容为空的占位组件 4 | | 参数 | 说明 | 类型 | 默认值 | 5 | |-----|-----|-----|-----| 6 | | show | 是否显示 |boolean|false| 7 | |text|提示文本|string| 暂无数据 | 8 | |subText|提示副文本|string| | 9 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.scss: -------------------------------------------------------------------------------- 1 | .no-data{ 2 | padding: 270rpx 0 60rpx; 3 | text-align: center; 4 | .image{ 5 | width:400rpx; 6 | height: 325rpx; 7 | margin-bottom: 60rpx; 8 | } 9 | .text{ 10 | margin-bottom: 30rpx; 11 | font-size: 32rpx; 12 | color: #333; 13 | font-weight: bold; 14 | } 15 | .subtitle{ 16 | font-size: 28rpx; 17 | color: #a2a2a2; 18 | letter-spacing: 4rpx; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.ts: -------------------------------------------------------------------------------- 1 | 2 | type InitData = {} 3 | 4 | type InitProperty = { 5 | show: WechatMiniprogram.Component.FullProperty, 6 | text: WechatMiniprogram.Component.FullProperty, 7 | subText: WechatMiniprogram.Component.FullProperty, 8 | } 9 | 10 | type InitMethod = { 11 | } 12 | // 获取应用实例 13 | const app = getApp() 14 | Component({ 15 | options: { 16 | addGlobalClass: true, 17 | }, 18 | /** 19 | * 组件的属性列表 20 | */ 21 | properties: { 22 | show: { 23 | type: Boolean, 24 | value: false 25 | }, 26 | text: { 27 | type: String, 28 | value: '暂无数据' 29 | }, 30 | subText: { 31 | type: String, 32 | value: '' 33 | } 34 | }, 35 | 36 | /** 37 | * 组件的初始数据 38 | */ 39 | data: { 40 | }, 41 | 42 | /** 43 | * 组件的方法列表 44 | */ 45 | methods: { 46 | onLoad(options: any) { 47 | console.log(options) 48 | }, 49 | onShow() { 50 | console.log('onShow') 51 | }, 52 | onReady() { 53 | console.log('onReady') 54 | }, 55 | }, 56 | 57 | lifetimes: { 58 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 59 | attached: function () { }, 60 | moved: function () { }, 61 | detached: function () { }, 62 | }, 63 | 64 | pageLifetimes: { 65 | // 组件所在页面的生命周期函数 66 | show: function () { }, 67 | hide: function () { }, 68 | resize: function () { }, 69 | }, 70 | 71 | }) 72 | 73 | export { } -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.wxml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty.wxss: -------------------------------------------------------------------------------- 1 | .no-data{padding:270rpx 0 60rpx;text-align:center}.no-data .image{width:400rpx;height:325rpx;margin-bottom:60rpx}.no-data .text{margin-bottom:30rpx;font-size:32rpx;color:#333;font-weight:bold}.no-data .subtitle{font-size:28rpx;color:#a2a2a2;letter-spacing:4rpx} 2 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/empty/empty_tip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mmmml-zhao/table_component/12ac94cd8047848045705142eaf0543cb4fc4202/miniprogram/public/components/public/empty/empty_tip.png -------------------------------------------------------------------------------- /miniprogram/public/components/public/load_more/index.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | externalClasses: ['i-class'], 3 | 4 | properties: { 5 | loading: { 6 | type: Boolean, 7 | value: true 8 | }, 9 | tip: { 10 | type: String, 11 | value: '' 12 | } 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/load_more/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true 3 | } 4 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/load_more/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ tip }} 5 | 正在加载 6 | 7 | 8 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/load_more/index.wxss: -------------------------------------------------------------------------------- 1 | .i-load-more{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.i-load-more-loading{display:inline-block;margin-right:12px;vertical-align:middle;width:14px;height:14px;background:0 0;border-radius:50%;border:2px solid #e9eaec;border-color:#e9eaec #e9eaec #e9eaec #2d8cf0;animation:btn-spin .6s linear;animation-iteration-count:infinite}.i-load-more-tip{display:inline-block;vertical-align:middle;color:#495060}.i-load-more-line{border-top:1px solid #dddee1;display:flex;border-top:0}.i-load-more-line::before{position:relative;top:-1px;-webkit-box-flex:1;-webkit-flex:1;flex:1;content:'';border-top:1px solid #dddee1}.i-load-more-line::after{position:relative;top:-1px;-webkit-box-flex:1;-webkit-flex:1;flex:1;content:'';border-top:1px solid #dddee1}.i-load-more-line .i-load-more-tip{position:relative;top:-.9em;padding:0 .55em}.i-load-more-empty{width:4px;height:4px;border-radius:50%;background-color:#e5e5e5;display:inline-block;position:relative;vertical-align:0;top:-.16em}@keyframes btn-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}} -------------------------------------------------------------------------------- /miniprogram/public/components/public/load_more/load_more.md: -------------------------------------------------------------------------------- 1 | # load_more组件相关 2 | 3 | 拖曳的组件。是drag_list的子组件，每一行的内容放到drag_item的默认slot里。 4 | | 参数 | 说明 | 类型 | 默认值 | 5 | |-----|-----|-----|-----| 6 | |loading| 每一项的编号 |boolean|true| 7 | |tip|提示文本|string| | 8 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/components/tr/tr.js: -------------------------------------------------------------------------------- 1 | Component({ 2 | options: { 3 | addGlobalClass: true, 4 | multipleSlots: true 5 | }, 6 | properties: { 7 | rowKey: { 8 | type: String, 9 | value: 'id' 10 | }, 11 | columns: { 12 | type: Array, 13 | value: [] 14 | }, 15 | item: { 16 | type: Object, 17 | value: {} 18 | }, 19 | index: { 20 | type: Number, 21 | }, 22 | select: { 23 | type: Boolean, 24 | value: false 25 | }, 26 | scrollX: { 27 | type: Boolean, 28 | value: false 29 | }, 30 | checked: { 31 | type: Boolean, 32 | value: false 33 | }, 34 | isExpand: { 35 | type: Boolean, 36 | value: false 37 | }, 38 | expandValueKey: { 39 | type: String, 40 | }, 41 | initExpandValue: { 42 | type: String, 43 | value: '暂无信息' 44 | }, 45 | expandStyle: { 46 | type: String, 47 | }, 48 | dynamicValue: { 49 | type: Object, 50 | optionalTypes: [Array, String, Number, Boolean, null] 51 | }, 52 | }, 53 | data: { 54 | expandAimation: null, 55 | expandAimationData: null, 56 | expanded: false 57 | }, 58 | methods: { 59 | handleClickListItem(e) { 60 | const { index } = e.currentTarget.dataset; 61 | this.setExpand(); 62 | this.triggerEvent('clicklistitem', { 63 | value: { 64 | index, 65 | item: e.currentTarget.dataset.item 66 | } 67 | }); 68 | }, 69 | handleClickAction(e) { 70 | this.triggerEvent('clickaction', { 71 | value: e.detail.value 72 | }); 73 | }, 74 | handleOnActionEvent(e) { 75 | this.triggerEvent('onactionevent', { 76 | value: e.detail.value 77 | }); 78 | }, 79 | handleClickExpand(e) { 80 | this.triggerEvent('clickexpand', { 81 | value: e.detail.value 82 | }); 83 | }, 84 | handleClickCheck(e) { 85 | const { item } = e.currentTarget.dataset; 86 | const { index } = this.data; 87 | this.triggerEvent('checkkey', { 88 | value: { 89 | item, 90 | index 91 | } 92 | }); 93 | }, 94 | setExpand() { 95 | const { isExpand, expanded, expandAimation } = this.data; 96 | if (isExpand && expandAimation) { 97 | if (expanded) { 98 | expandAimation.opacity(0).height(0).step(); 99 | } 100 | else { 101 | expandAimation.opacity(1).height('auto').step(); 102 | } 103 | this.setData({ 104 | expandAimationData: expandAimation.export(), 105 | expanded: !expanded 106 | }); 107 | } 108 | }, 109 | initAnimate() { 110 | const { isExpand } = this.data; 111 | if (!isExpand) 112 | return; 113 | const expandAimation = wx.createAnimation({ 114 | duration: 500, 115 | timingFunction: 'ease', 116 | }); 117 | this.data.expandAimation = expandAimation; 118 | }, 119 | }, 120 | lifetimes: { 121 | attached: function () { }, 122 | ready: function () { 123 | this.initAnimate(); 124 | }, 125 | moved: function () { }, 126 | detached: function () { }, 127 | }, 128 | pageLifetimes: { 129 | show: function () { }, 130 | hide: function () { }, 131 | resize: function () { }, 132 | }, 133 | }); 134 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/components/tr/tr.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": {}, 4 | "componentGenerics": { 5 | "action-td": true, 6 | "expand-component": true 7 | } 8 | } -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/components/tr/tr.scss: -------------------------------------------------------------------------------- 1 | 2 | .table-line{ 3 | border-bottom: 2rpx solid #DDDDDD; 4 | // 表格数据 5 | .tr{ 6 | display: flex; 7 | min-height: 120rpx; 8 | .td{ 9 | padding: 35rpx 10rpx; 10 | text-align: center; 11 | white-space:normal; 12 | word-break:break-all; 13 | font-size: 24rpx; 14 | color: #333; 15 | word-break:break-all; 16 | display: flex; 17 | -ms-flex-flow: wrap; 18 | flex-flow: wrap; 19 | -webkit-box-pack: center; 20 | -ms-flex-pack: center; 21 | justify-content: center; 22 | -webkit-box-align: center; 23 | -ms-flex-align: center; 24 | align-items: center; 25 | &.select{ 26 | width: 60rpx; 27 | padding: 0 1rpx; 28 | } 29 | } 30 | } 31 | .expand{ 32 | height: 0; 33 | font-size: 24rpx; 34 | color: #A2A2A2; 35 | line-height: 54rpx; 36 | word-wrap: break-word; 37 | word-break: break-all; 38 | overflow: hidden; 39 | opacity: 0; 40 | .expand-box{ 41 | padding: 0 50rpx 35rpx; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/components/tr/tr.ts: -------------------------------------------------------------------------------- 1 | 2 | // 获取应用实例 3 | type InitData = { 4 | expandAimation: WechatMiniprogram.Animation | null, 5 | expandAimationData: WechatMiniprogram.AnimationExportResult | null, 6 | expanded: boolean, 7 | } 8 | 9 | type InitProperty = { 10 | rowKey: WechatMiniprogram.Component.FullProperty, 11 | columns: WechatMiniprogram.Component.FullProperty, 12 | item: WechatMiniprogram.Component.FullProperty, 13 | index: WechatMiniprogram.Component.FullProperty, 14 | select: WechatMiniprogram.Component.FullProperty, 15 | scrollX: WechatMiniprogram.Component.FullProperty, 16 | checked: WechatMiniprogram.Component.FullProperty 17 | isExpand: WechatMiniprogram.Component.FullProperty, 18 | expandValueKey: WechatMiniprogram.Component.FullProperty, 19 | initExpandValue: WechatMiniprogram.Component.FullProperty, 20 | expandStyle: WechatMiniprogram.Component.FullProperty, 21 | dynamicValue: WechatMiniprogram.Component.FullProperty, 22 | } 23 | 24 | type InitMethod = { 25 | handleClickListItem(e: GlobalData.WxAppletsEvent): void, 26 | handleClickAction(e: GlobalData.WxAppletsEvent): void, 27 | handleOnActionEvent(e: GlobalData.WxAppletsEvent): void, 28 | handleClickExpand(e: GlobalData.WxAppletsEvent): void, 29 | handleClickCheck(e: GlobalData.WxAppletsEvent): void, 30 | setExpand(): void, 31 | initAnimate(): void 32 | } 33 | 34 | Component({ 35 | options: { 36 | addGlobalClass: true, 37 | multipleSlots: true // 在组件定义时的选项中启用多slot支持 38 | }, 39 | /** 40 | * 组件的属性列表 41 | */ 42 | properties: { 43 | rowKey: { 44 | type: String, 45 | value: 'id' 46 | }, // 指明datalist里item的哪一项可以用作是key 47 | columns: { 48 | type: Array, 49 | value: [] 50 | }, // 表头 51 | item: { 52 | type: Object, 53 | value: {} 54 | }, // 数据 55 | index: { 56 | type: Number, 57 | },// 当前数据的序号 58 | select: { 59 | type: Boolean, 60 | value: false 61 | }, // 是否开启勾选 62 | scrollX: { 63 | type: Boolean, 64 | value: false 65 | }, // 是否开启勾选 66 | checked: { 67 | type: Boolean, 68 | value: false 69 | }, // 勾选的初始rowKey列表 70 | isExpand: { 71 | type: Boolean, 72 | value: false 73 | },// 是否需要展开 74 | expandValueKey: { 75 | type: String, 76 | },// 展开的内容的key 77 | initExpandValue: { 78 | type: String, 79 | value: '暂无信息' 80 | },// 无展开内容的显示文本 81 | expandStyle: { 82 | type: String, 83 | },// 展开区域的样式字符串 84 | dynamicValue: { 85 | type: Object, 86 | optionalTypes: [Array, String, Number, Boolean, null] 87 | },// 给action-td传动态值 88 | }, 89 | 90 | /** 91 | * 组件的初始数据 92 | */ 93 | data: { 94 | expandAimation: null,// expand展开动画 95 | expandAimationData: null,// expand展开动画 96 | expanded: false // 是否已经展开 97 | }, 98 | 99 | /** 100 | * 组件的方法列表 101 | */ 102 | methods: { 103 | // 点击表格中一项触发 104 | handleClickListItem(e) { 105 | const { index } = e.currentTarget.dataset 106 | this.setExpand() 107 | this.triggerEvent('clicklistitem', { 108 | value: { 109 | index, 110 | item: e.currentTarget.dataset.item 111 | } 112 | }) 113 | }, 114 | // 如果有action 里面有点击事件 触发该事件 115 | handleClickAction(e) { 116 | this.triggerEvent('clickaction', { 117 | value: e.detail.value 118 | }) 119 | }, 120 | // 如果有action 里面有对数据的操作 触发该事件 121 | handleOnActionEvent(e) { 122 | this.triggerEvent('onactionevent', { 123 | value: e.detail.value 124 | }) 125 | }, 126 | // 如果有expand 里面有点击事件 怎触发该事件 127 | handleClickExpand(e) { 128 | this.triggerEvent('clickexpand', { 129 | value: e.detail.value 130 | }) 131 | }, 132 | handleClickCheck(e) { 133 | const { item } = e.currentTarget.dataset 134 | const { index } = this.data 135 | this.triggerEvent('checkkey', { 136 | value: { 137 | item, 138 | index 139 | } 140 | }) 141 | }, 142 | // 设置额外信息展开 143 | setExpand() { 144 | const { isExpand, expanded, expandAimation } = this.data 145 | if (isExpand && expandAimation) { 146 | if (expanded) { 147 | expandAimation.opacity(0).height(0).step() 148 | } else { 149 | expandAimation.opacity(1).height('auto').step() 150 | } 151 | this.setData({ 152 | expandAimationData: expandAimation.export(), 153 | expanded: !expanded 154 | }) 155 | } 156 | }, 157 | 158 | // 初始化动画 159 | initAnimate() { 160 | const { isExpand } = this.data 161 | if (!isExpand) return 162 | // 展开行动画初始化 163 | const expandAimation = wx.createAnimation({ 164 | duration: 500, 165 | timingFunction: 'ease', 166 | }) 167 | this.data.expandAimation = expandAimation 168 | }, 169 | }, 170 | 171 | lifetimes: { 172 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 173 | attached: function () { }, 174 | ready: function () { 175 | this.initAnimate() 176 | }, 177 | moved: function () { }, 178 | detached: function () { }, 179 | }, 180 | 181 | pageLifetimes: { 182 | // 组件所在页面的生命周期函数 183 | show: function () { }, 184 | hide: function () { }, 185 | resize: function () { }, 186 | }, 187 | 188 | }) 189 | 190 | export { } -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/components/tr/tr.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{item[cItem.key]}} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | {{item[expandValueKey]||initExpandValue}} 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/components/tr/tr.wxss: -------------------------------------------------------------------------------- 1 | .table-line{border-bottom:2rpx solid #DDDDDD}.table-line .tr{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:120rpx}.table-line .tr .td{padding:35rpx 10rpx;text-align:center;white-space:normal;word-break:break-all;font-size:24rpx;color:#333;word-break:break-all;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.table-line .tr .td.select{width:60rpx;padding:0 1rpx}.table-line .expand{height:0;font-size:24rpx;color:#A2A2A2;line-height:54rpx;word-wrap:break-word;word-break:break-all;overflow:hidden;opacity:0}.table-line .expand .expand-box{padding:0 50rpx 35rpx} 2 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/data.d.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface Columns { 3 | title: string,// 表头 4 | key: string,// 字段名 5 | width?: string,// 宽度 6 | type?: 'action',// 是否是自定义内容 7 | render?: (value: any, item: any, index: number, data: any) => any,// 设置内容 8 | } 9 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.js: -------------------------------------------------------------------------------- 1 | const getNowPage = () => { 2 | const pages = getCurrentPages(); 3 | return pages[pages.length - 1]; 4 | }; 5 | function debounce(fun, delay) { 6 | let timer = null; 7 | return function (...args) { 8 | let _this = this; 9 | let _args = args; 10 | if (timer) { 11 | clearTimeout(timer); 12 | } 13 | timer = setTimeout(function () { 14 | fun.call(_this, ..._args); 15 | }, delay); 16 | }; 17 | } 18 | Component({ 19 | options: { 20 | addGlobalClass: true, 21 | }, 22 | properties: { 23 | rowKey: { 24 | type: String, 25 | value: 'id' 26 | }, 27 | tableHeight: { 28 | type: String, 29 | value: '600rpx', 30 | }, 31 | scrollX: { 32 | type: Boolean, 33 | value: false 34 | }, 35 | columns: { 36 | type: Array, 37 | value: [] 38 | }, 39 | dataList: { 40 | type: Array, 41 | value: [] 42 | }, 43 | getListLoading: { 44 | type: Boolean, 45 | value: false 46 | }, 47 | showTipImage: { 48 | type: Boolean, 49 | value: false 50 | }, 51 | tipTitle: { 52 | type: String, 53 | value: '提示' 54 | }, 55 | tipSubtitle: { 56 | type: String, 57 | value: '暂无数据' 58 | }, 59 | select: { 60 | type: Boolean, 61 | value: false 62 | }, 63 | selectKeys: { 64 | type: Array, 65 | value: [] 66 | }, 67 | isExpand: { 68 | type: Boolean, 69 | value: false 70 | }, 71 | expandValueKey: { 72 | type: String, 73 | }, 74 | initExpandValue: { 75 | type: String, 76 | }, 77 | expandStyle: { 78 | type: String, 79 | }, 80 | dynamicValue: { 81 | type: Object, 82 | optionalTypes: [Array, String, Number, Boolean, null], 83 | value: {} 84 | }, 85 | }, 86 | data: { 87 | tableScrollViewHeight: '0rpx', 88 | scrollTop: 0, 89 | scrollLeftHeader: 0, 90 | scrollLeftContent: 0, 91 | scrollTag: null, 92 | touchStatus: 'end', 93 | checkObj: {}, 94 | }, 95 | observers: { 96 | 'dataList': function (dataList) { 97 | if (dataList && dataList.length > 0) { 98 | this.createShowDataList(); 99 | } 100 | else { 101 | this.setScrollTop(); 102 | } 103 | }, 104 | 'selectKeys': function (selectKeys) { 105 | const newCheckObj = {}; 106 | selectKeys.forEach(item => { 107 | newCheckObj[item] = true; 108 | }); 109 | this.setData({ 110 | checkObj: newCheckObj 111 | }); 112 | }, 113 | 'tableHeight': function () { 114 | this.getTableScrollViewHeight(); 115 | } 116 | }, 117 | methods: { 118 | createShowDataList() { 119 | const { columns, dataList, rowKey } = this.data; 120 | const needReaderColums = columns.filter(item => item.render); 121 | this.setData({ 122 | showDataList: dataList.map((item, index) => { 123 | let newItem = Object.assign({}, item, { row_key: `${item[rowKey]}` }); 124 | needReaderColums.forEach((item1) => { 125 | newItem[item1.key] = item1.render(newItem[item1.key], item, index, getNowPage().data); 126 | }); 127 | return newItem; 128 | }) 129 | }); 130 | }, 131 | setScrollTop() { 132 | this.setData({ 133 | scrollTop: 0 134 | }); 135 | }, 136 | setScrollLeft(e) { 137 | const { tag } = e.currentTarget.dataset; 138 | const { scrollLeft } = e.detail; 139 | const { scrollTag } = this.data; 140 | if (tag !== scrollTag) 141 | return; 142 | if (tag === 'header') { 143 | this.setData({ 144 | scrollLeftContent: scrollLeft 145 | }); 146 | } 147 | else if (tag === 'content') { 148 | this.setData({ 149 | scrollLeftHeader: scrollLeft 150 | }); 151 | } 152 | }, 153 | clearScrollTag: debounce(function (e) { 154 | const { touchStatus } = this.data; 155 | if (touchStatus === 'start') 156 | return; 157 | this.setData({ 158 | scrollTag: null 159 | }); 160 | }, 100), 161 | handleScroll(e) { 162 | const { scrollX, touchStatus } = this.data; 163 | if (!scrollX) 164 | return; 165 | this.setScrollLeft(e); 166 | if (touchStatus === 'end') { 167 | this.clearScrollTag(e); 168 | } 169 | }, 170 | handleTouchStart(e) { 171 | const { scrollX, scrollTag, touchStatus } = this.data; 172 | if (!scrollX) 173 | return; 174 | if (scrollTag || touchStatus === 'start') 175 | return; 176 | const { tag } = e.currentTarget.dataset; 177 | this.setData({ 178 | touchStatus: 'start', 179 | scrollTag: tag, 180 | }); 181 | }, 182 | handleTouchEnd(e) { 183 | const { scrollX, scrollTag } = this.data; 184 | if (!scrollX) 185 | return; 186 | const { tag } = e.currentTarget.dataset; 187 | if (tag !== scrollTag) 188 | return; 189 | this.setData({ 190 | touchStatus: 'end' 191 | }); 192 | }, 193 | handleScrolltolower() { 194 | const { showTipImage } = this.data; 195 | if (showTipImage) 196 | return; 197 | this.triggerEvent('scrolltolower'); 198 | }, 199 | handleScrolltoupper() { 200 | this.triggerEvent('scrolltoupper'); 201 | }, 202 | handleClickListItem(e) { 203 | this.triggerEvent('clicklistitem', { 204 | value: e.detail.value 205 | }); 206 | }, 207 | handleClickAction(e) { 208 | this.triggerEvent('clickaction', { 209 | value: e.detail.value 210 | }); 211 | }, 212 | handleOnActionEvent(e) { 213 | this.triggerEvent('onactionevent', { 214 | value: e.detail.value 215 | }); 216 | }, 217 | handleClickExpand(e) { 218 | this.triggerEvent('clickexpand', { 219 | value: e.detail.value 220 | }); 221 | }, 222 | handleClickCheck(e) { 223 | const { item } = e.detail.value; 224 | const { checkObj, rowKey } = this.data; 225 | const newCheckObj = Object.assign({}, checkObj); 226 | newCheckObj[item[rowKey]] = !newCheckObj[item[rowKey]]; 227 | this.setData({ 228 | checkObj: newCheckObj 229 | }, () => { 230 | const value = []; 231 | for (let i in newCheckObj) { 232 | if (newCheckObj[i]) { 233 | value.push(i); 234 | } 235 | } 236 | this.triggerEvent('checkkey', { 237 | value 238 | }); 239 | }); 240 | }, 241 | getTableScrollViewHeight: function () { 242 | try { 243 | const { tableHeight } = this.data; 244 | const pageConfig = wx.getSystemInfoSync(); 245 | const node = this.createSelectorQuery().select('.tr-th'); 246 | node.boundingClientRect((rect) => { 247 | this.setData({ 248 | tableScrollViewHeight: `calc(${tableHeight} - ${rect.height * pageConfig.pixelRatio}rpx)` 249 | }); 250 | }).exec(); 251 | } 252 | catch (e) { 253 | console.log(e); 254 | } 255 | }, 256 | tipFc() { 257 | const { rowKey, columns } = this.data; 258 | if (!rowKey) { 259 | console.error('table组件必须指明每一行的唯一标识的字段名，且必须为字符串，数字将会被转为字符串,for循环中的wx:key不使用该字段，用的是createShowDataList中设置的row_key字段'); 260 | } 261 | if (!columns) { 262 | console.error('table组件必须指明columns'); 263 | } 264 | } 265 | }, 266 | lifetimes: { 267 | attached: function () { 268 | this.tipFc(); 269 | }, 270 | ready: function () { 271 | this.getTableScrollViewHeight(); 272 | }, 273 | moved: function () { }, 274 | detached: function () { }, 275 | }, 276 | pageLifetimes: { 277 | show: function () { }, 278 | hide: function () { }, 279 | resize: function () { }, 280 | }, 281 | }); 282 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": true, 3 | "usingComponents": { 4 | "zml-tr": "./components/tr/tr", 5 | "zml-empty": "../empty/empty", 6 | "zml-load-more": "../load_more/index" 7 | }, 8 | "componentGenerics": { 9 | "action-td": true, 10 | "expand-component": true 11 | } 12 | } -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.md: -------------------------------------------------------------------------------- 1 | # 使用说明 2 | 3 | 该组件具有 列表展示模式，勾选模式，展开行模式。 4 | 1. 复制`/miniprogram/public/components/public`下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中） 5 | 2. 在需要使用的页面引入table组件即可。 6 | 7 | # 示例小程序 8 | ![小程序图片](https://mmbiz.qpic.cn/mmbiz_jpg/NNDgcXA2O90eRXGPicjGqcvetdnNgk8icDpnBcxoEtEwSQgibXmib0LnB2icLYGtGlW5NE30N1fn4M0f165MkxcicoOg/0?wx_fmt=jpeg) 9 | 10 | # API 11 | 12 | ## prop 13 | 14 | | 参数 | 说明 | 类型 | 默认值 | 是否必填 | 15 | |-----|-----|-----|-----|-----| 16 | |columns| 表格的配置 | Columns[] | [] | true | 17 | |dataList| 数据 | any[] | [] | true | 18 | |getListLoading| 请求列表的loading | boolean | false| true | 19 | |showTipImage| 无数据时的提示文本图片 | boolean | false| true | 20 | |rowKey| 用于指明行的唯一标识符，在勾选中有使用 | string | id | false | 21 | | tableHeight | table高度。|string| 600rpx |false | 22 | |tipTitle| 无数据时的提示文本主标题 | string | 提示 | false | 23 | |tipSubtitle| 无数据时的提示文本副标题 | string | 暂无数据| false | 24 | |scrollX| 是否需要X轴滚动。 | boolean | false| false | 25 | |select| 控制是否出现勾选。 | boolean | false| false | 26 | |selectKeys| 勾选的初始值 | any[] | []| false | 27 | |generic:action-td| 当列表项内具有操作列，需要在`columns`内添加`type:action`的一项，操作列的内容往往需要自定义，小程序不提供react,vue的`rander函数`，所以使用到了抽象节点，该属性指明抽象节点的组件。操作列位置可以不固定，点击事件由`bindclickaction`触发 | component |undefined | false | 28 | |isExpand| 控制是否点击展开。 | boolean | false|false | 29 | |expandValueKey| 展开信息的key值 | string | false | 30 | |initExpandValue| 当展开信息为空时的默认提示语 | string | '暂无信息' |false | 31 | |expandStyle| 展开信息的最外层的样式 | string | ''|false | 32 | |generic:expand-component| 如果展开区域的内容需要自定义，`expandValueKey`设置为空字符串，则切换到组件模式，传一个组件进来，展开区域的点击事件由`bindclickexpand`触发 | component | undefined |false | 33 | |dynamicValue| 给自定义内容的动态值，用于改变状态 ，建议{value:放的数据} | object | {} |false | 34 | 35 | 36 | ## event 37 | 38 | |事件 | 解释| 类型| 39 | |-----|-----|-----| 40 | |bindclicklistitem| 点击列表行事件 |Function(e); e.detail.value = {index:number（当前行序号）,item: any（当前行的内容）}| 41 | |bindclickexpand| 点击展开内容事件 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在expand-component里)}| 42 | |bindclickaction| 点击抽象节点事件 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}| 43 | |bindonactionevent| 抽象节点内的业务事件触发 |Function(e); e.detail.value = {type:(这个按钮的含义字段，如‘close’),index:(当前的行),item:(当前行的数据)};(这是我这里定义的结构，具体可以自己定义在action-td里)}| 44 | |bindcheckkey| 勾选事件 返回被勾选项的rowKey数组 |Function(e); e.detail.value = any[]//(数组内每一项是rowKey字段定义的数据的toString()结果)| 45 | |bindscrolltolower| 滚动触底 | Function() | 46 | |bindscrolltoupper| 滚动触顶 | Function() | 47 | 48 | ## column 49 | 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 50 | 51 | |事件 | 解释| 类型| 必填| 52 | |-----|-----|-----|-----| 53 | |title|字段名中文含义|string| true| 54 | |key|字段名|string| true| 55 | |width|单元格宽度|string| false| 56 | |type|判断字段是否是自定义组件|'action'/undefined | false| 57 | |render|td内内容由函数返回 (value: any, item: any, index: number, data?: 当前页面的this.data) => any,// 设置内容|function| false| -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.scss: -------------------------------------------------------------------------------- 1 | page, view, scroll-view, swiper, movable-area, cover-view, text, icon, rich-text, 2 | progress, button, checkbox-group, checkbox, form, input, label, picker, 3 | picker-view, radio-group, slider, switch, textarea, navigator, audio, image, 4 | video, live-player, live-pusher, open-data, web-view { 5 | box-sizing: border-box; 6 | } 7 | .list{ 8 | position: relative; 9 | background-color: #fff; 10 | overflow: hidden; 11 | .tip-image-block{ 12 | width: 100%; 13 | height: 100%; 14 | .icon{ 15 | width: 270rpx; 16 | height: 209rpx; 17 | margin-bottom: 40rpx; 18 | } 19 | .title{ 20 | margin-bottom: 30rpx; 21 | font-size: 32rpx; 22 | color: #333; 23 | font-weight: bold; 24 | } 25 | .subtitle{ 26 | font-size: 28rpx; 27 | color: #a2a2a2; 28 | letter-spacing: 4rpx; 29 | } 30 | } 31 | 32 | } 33 | 34 | // 表格数据 35 | .table-header{ 36 | overflow: hidden; 37 | white-space: nowrap; 38 | .inline-block{ 39 | display: inline-block; 40 | min-width: 100%; 41 | } 42 | .tr{ 43 | display: flex; 44 | border-bottom: 2rpx solid #DDDDDD; 45 | .th{ 46 | display: flex; 47 | flex-flow: wrap; 48 | justify-content: center; 49 | align-items: center; 50 | padding: 35rpx 10rpx; 51 | font-size: 28rpx; 52 | white-space:normal; 53 | word-break:break-all; 54 | color: #333; 55 | font-weight: bold; 56 | 57 | &.select{ 58 | width: 60rpx; 59 | padding: 0 1rpx; 60 | } 61 | } 62 | } 63 | 64 | } 65 | 66 | .scroll-view{ 67 | overflow: hidden; 68 | white-space: nowrap; 69 | .table-content{ 70 | display: inline-block; 71 | min-width: 100%; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.ts: -------------------------------------------------------------------------------- 1 | const getNowPage = () => { 2 | const pages = getCurrentPages() 3 | return pages[pages.length - 1] 4 | } 5 | 6 | function debounce(fun: (...args: any) => void, delay: number) { 7 | let timer: number | null = null 8 | return function (this: WechatMiniprogram.Component.Instance, ...args: any) { 9 | let _this = this 10 | let _args = args 11 | if (timer) { 12 | clearTimeout(timer) 13 | } 14 | timer = setTimeout(function () { 15 | fun.call(_this, ..._args) 16 | }, delay) 17 | } 18 | } 19 | 20 | type InitData = { 21 | tableScrollViewHeight: string 22 | scrollTop: number, 23 | scrollLeftHeader: number, 24 | scrollLeftContent: number, 25 | scrollTag: 'content' | 'header' | null, 26 | touchStatus: 'start' | 'end' 27 | checkObj: { 28 | [key: string]: boolean, 29 | } // 用于存储勾选信息 30 | } 31 | 32 | type InitProperty = { 33 | rowKey: WechatMiniprogram.Component.FullProperty, 34 | tableHeight: WechatMiniprogram.Component.FullProperty, 35 | scrollX: WechatMiniprogram.Component.FullProperty, 36 | columns: WechatMiniprogram.Component.FullProperty, 37 | dataList: WechatMiniprogram.Component.FullProperty, 38 | getListLoading: WechatMiniprogram.Component.FullProperty, 39 | showTipImage: WechatMiniprogram.Component.FullProperty, 40 | tipTitle: WechatMiniprogram.Component.FullProperty, 41 | tipSubtitle: WechatMiniprogram.Component.FullProperty, 42 | select: WechatMiniprogram.Component.FullProperty, 43 | selectKeys: WechatMiniprogram.Component.FullProperty, 44 | isExpand: WechatMiniprogram.Component.FullProperty, 45 | expandValueKey: WechatMiniprogram.Component.FullProperty, 46 | initExpandValue: WechatMiniprogram.Component.FullProperty, 47 | expandStyle: WechatMiniprogram.Component.FullProperty, 48 | dynamicValue: WechatMiniprogram.Component.FullProperty, 49 | } 50 | 51 | type InitMethod = { 52 | createShowDataList(): void 53 | setScrollTop(): void, 54 | setScrollLeft(e: GlobalData.WxAppletsEvent): void, 55 | clearScrollTag(e: GlobalData.WxAppletsEvent): void, 56 | handleScroll(e: GlobalData.WxAppletsEvent): void 57 | handleTouchStart(e: GlobalData.WxAppletsEvent): void 58 | handleTouchEnd(e: GlobalData.WxAppletsEvent): void 59 | handleScrolltolower(): void, 60 | handleScrolltoupper(): void, 61 | handleClickListItem(e: GlobalData.WxAppletsEvent): void, 62 | handleClickAction(e: GlobalData.WxAppletsEvent): void, 63 | handleOnActionEvent(e: GlobalData.WxAppletsEvent): void, 64 | handleClickExpand(e: GlobalData.WxAppletsEvent): void, 65 | handleClickCheck(e: GlobalData.WxAppletsEvent): void 66 | getTableScrollViewHeight(): void, 67 | tipFc(): void 68 | } 69 | 70 | Component({ 71 | options: { 72 | addGlobalClass: true, 73 | }, 74 | /** 75 | * 组件的属性列表 76 | */ 77 | properties: { 78 | rowKey: { 79 | type: String, 80 | value: 'id' 81 | }, // 指明datalist里item的哪一项可以用作是key 82 | tableHeight: { 83 | type: String, 84 | value: '600rpx', 85 | }, // 表格高度 86 | scrollX: { 87 | type: Boolean, 88 | value: false 89 | }, // 指明datalist里item的哪一项可以用作是key 90 | columns: { 91 | type: Array, 92 | value: [] 93 | }, // 表头 94 | dataList: { 95 | type: Array, 96 | value: [] 97 | }, // 数据 98 | getListLoading: { 99 | type: Boolean, 100 | value: false 101 | }, // 数据请求 102 | showTipImage: { 103 | type: Boolean, 104 | value: false 105 | }, // 是否出现提示块 106 | tipTitle: { 107 | type: String, 108 | value: '提示' 109 | },// 提示块内的标题文字 110 | tipSubtitle: { 111 | type: String, 112 | value: '暂无数据' 113 | },// 提示块内的副标题文字 114 | select: { 115 | type: Boolean, 116 | value: false 117 | }, // 是否开启勾选 118 | selectKeys: { 119 | type: Array, 120 | value: [] 121 | }, // 勾选的初始rowKey列表 122 | isExpand: { 123 | type: Boolean, 124 | value: false 125 | },// 是否需要展开 126 | expandValueKey: { 127 | type: String, 128 | },// 展开的内容的key 129 | initExpandValue: { 130 | type: String, 131 | },// 展开内容为空时 显示的文字 132 | expandStyle: { 133 | type: String, 134 | },// 展开信息的div的样式 135 | dynamicValue: { 136 | type: Object, 137 | optionalTypes: [Array, String, Number, Boolean, null], 138 | value: {} 139 | },// 给action-td/expand-component传动态值 140 | }, 141 | /** 142 | * 组件的初始数据 143 | */ 144 | data: { 145 | tableScrollViewHeight: '0rpx',//表格滚动区域高度 146 | scrollTop: 0,// 设置回到顶部 147 | scrollLeftHeader: 0, 148 | scrollLeftContent: 0, 149 | scrollTag: null, 150 | touchStatus: 'end', 151 | checkObj: {},// 勾选的项的存储对象 152 | }, 153 | observers: { 154 | 'dataList': function (dataList: any[]) { 155 | if (dataList && dataList.length > 0) { 156 | this.createShowDataList() 157 | } else { 158 | this.setScrollTop() 159 | } 160 | }, 161 | // selectKeys用于初始化勾选 每次改变都会更新勾选 162 | 'selectKeys': function (selectKeys: any[]) { 163 | const newCheckObj: { [key: string]: boolean } = {} 164 | selectKeys.forEach(item => { 165 | newCheckObj[item] = true 166 | }) 167 | this.setData({ 168 | checkObj: newCheckObj 169 | }) 170 | }, 171 | // 当表格高度修改，则修改滚动区域高度 172 | 'tableHeight': function () { 173 | this.getTableScrollViewHeight() 174 | } 175 | }, 176 | 177 | /** 178 | * 组件的方法列表 179 | */ 180 | methods: { 181 | // 创建展示列表 182 | createShowDataList() { 183 | const { columns, dataList, rowKey } = this.data 184 | const needReaderColums = columns.filter(item => item.render) 185 | this.setData({ 186 | showDataList: dataList.map((item, index) => { 187 | let newItem = { ...item, row_key: `${item[rowKey]}` } 188 | needReaderColums.forEach((item1) => { 189 | newItem[item1.key] = item1.render(newItem[item1.key], item, index, getNowPage().data) 190 | }) 191 | return newItem 192 | }) 193 | }) 194 | }, 195 | // 设置当列表清空 滚回顶部 196 | setScrollTop() { 197 | this.setData({ 198 | scrollTop: 0 199 | }) 200 | }, 201 | // 主要是为了监听横向滚动 202 | setScrollLeft(this: WechatMiniprogram.Component.Instance, e: GlobalData.WxAppletsEvent) { 203 | // console.log(`setScrollLeft`, e) 204 | const { tag } = e.currentTarget.dataset 205 | const { scrollLeft } = e.detail 206 | const { scrollTag } = this.data 207 | if (tag !== scrollTag) return 208 | if (tag === 'header') { 209 | this.setData({ 210 | scrollLeftContent: scrollLeft 211 | }) 212 | } else if (tag === 'content') { 213 | this.setData({ 214 | scrollLeftHeader: scrollLeft 215 | }) 216 | } 217 | }, 218 | // 主要是为了监听横向滚动 当手指离开屏幕，处于最后的滑动时 触发防抖 监听最后一次清除滚动对象 219 | clearScrollTag: debounce(function (this: WechatMiniprogram.Component.Instance, e) { 220 | const { touchStatus } = this.data 221 | // 也许用户又开始下一次的滚动了 所以要清除这个命令 只有在用户手指离开屏幕才会清除滚动对象 222 | if (touchStatus === 'start') return 223 | this.setData({ 224 | scrollTag: null 225 | }) 226 | }, 100), 227 | // 主要是为了监听横向滚动 228 | handleScroll(e) { 229 | // console.log(`handleScroll`, e) 230 | const { scrollX, touchStatus } = this.data 231 | if (!scrollX) return 232 | this.setScrollLeft(e) 233 | if (touchStatus === 'end') { 234 | this.clearScrollTag(e) 235 | } 236 | }, 237 | // 主要是为了监听横向滚动 238 | handleTouchStart(e) { 239 | const { scrollX, scrollTag, touchStatus } = this.data 240 | if (!scrollX) return 241 | if (scrollTag || touchStatus === 'start') return 242 | const { tag } = e.currentTarget.dataset 243 | this.setData({ 244 | touchStatus: 'start', 245 | scrollTag: tag, 246 | }) 247 | }, 248 | // 主要是为了监听横向滚动 249 | handleTouchEnd(e) { 250 | // console.log(e) 251 | const { scrollX, scrollTag } = this.data 252 | if (!scrollX) return 253 | const { tag } = e.currentTarget.dataset 254 | if (tag !== scrollTag) return 255 | this.setData({ 256 | touchStatus: 'end' 257 | }) 258 | }, 259 | // 滚动到底部触发 260 | handleScrolltolower() { 261 | const { showTipImage } = this.data 262 | if (showTipImage) return 263 | this.triggerEvent('scrolltolower') 264 | }, 265 | // 滚动到顶部触发 266 | handleScrolltoupper() { 267 | this.triggerEvent('scrolltoupper') 268 | }, 269 | // 点击表格中一项触发 270 | handleClickListItem(e) { 271 | this.triggerEvent('clicklistitem', { 272 | value: e.detail.value 273 | }) 274 | }, 275 | // 如果有action 里面有点击事件 怎触发该事件 276 | handleClickAction(e) { 277 | this.triggerEvent('clickaction', { 278 | value: e.detail.value 279 | }) 280 | }, 281 | // 如果有action 里面有对数据的操作 触发该事件 282 | handleOnActionEvent(e) { 283 | this.triggerEvent('onactionevent', { 284 | value: e.detail.value 285 | }) 286 | }, 287 | // 如果有expand 里面有点击事件 怎触发该事件 288 | handleClickExpand(e) { 289 | this.triggerEvent('clickexpand', { 290 | value: e.detail.value 291 | }) 292 | }, 293 | // 勾选事件 294 | // 只记录勾选的rowKey 因为index和item在初始化的时候是无法获取的 295 | handleClickCheck(e) { 296 | const { item } = e.detail.value 297 | const { checkObj, rowKey } = this.data 298 | const newCheckObj = { ...checkObj } 299 | newCheckObj[item[rowKey]] = !newCheckObj[item[rowKey]] 300 | this.setData({ 301 | checkObj: newCheckObj 302 | }, () => { 303 | const value = [] 304 | for (let i in newCheckObj) { 305 | if (newCheckObj[i]) { 306 | value.push(i) 307 | } 308 | } 309 | this.triggerEvent('checkkey', { 310 | value 311 | }) 312 | }) 313 | }, 314 | // 设置table高度 315 | getTableScrollViewHeight: function (this: WechatMiniprogram.Component.Instance) { 316 | try { 317 | const { tableHeight } = this.data 318 | const pageConfig = wx.getSystemInfoSync() 319 | const node = this.createSelectorQuery().select('.tr-th') 320 | node.boundingClientRect((rect) => { 321 | this.setData({ 322 | tableScrollViewHeight: `calc(${tableHeight} - ${rect.height * pageConfig.pixelRatio}rpx)` 323 | }) 324 | }).exec() 325 | } catch (e) { 326 | console.log(e) 327 | } 328 | }, 329 | tipFc() { 330 | const { rowKey, columns } = this.data 331 | if (!rowKey) { 332 | console.error('table组件必须指明每一行的唯一标识的字段名，且必须为字符串，数字将会被转为字符串,for循环中的wx:key不使用该字段，用的是createShowDataList中设置的row_key字段') 333 | } 334 | if (!columns) { 335 | console.error('table组件必须指明columns') 336 | } 337 | } 338 | }, 339 | 340 | lifetimes: { 341 | // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 342 | attached: function () { 343 | this.tipFc() 344 | }, 345 | ready: function () { 346 | this.getTableScrollViewHeight() 347 | }, 348 | moved: function () { }, 349 | detached: function () { }, 350 | }, 351 | 352 | pageLifetimes: { 353 | // 组件所在页面的生命周期函数 354 | show: function () { }, 355 | hide: function () { }, 356 | resize: function () { }, 357 | }, 358 | 359 | }) 360 | 361 | export { } -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{item.title}} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.wxs: -------------------------------------------------------------------------------- 1 | function computedTdWidth(columns, column, select, scrollX) { 2 | if (column.width) { 3 | return column.width 4 | } else if (scrollX) { 5 | return '200rpx' 6 | } else { 7 | if (select) { 8 | return 'calc( (calc(100% - 60rpx)) / ' + columns.length + ')' 9 | } else { 10 | return 'calc( 100% / ' + columns.length + ')' 11 | } 12 | } 13 | } 14 | 15 | module.exports = { 16 | computedTdWidth: computedTdWidth 17 | } -------------------------------------------------------------------------------- /miniprogram/public/components/public/table/table.wxss: -------------------------------------------------------------------------------- 1 | page,view,scroll-view,swiper,movable-area,cover-view,text,icon,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,slider,switch,textarea,navigator,audio,image,video,live-player,live-pusher,open-data,web-view{-webkit-box-sizing:border-box;box-sizing:border-box}.list{position:relative;background-color:#fff;overflow:hidden}.list .tip-image-block{width:100%;height:100%}.list .tip-image-block .icon{width:270rpx;height:209rpx;margin-bottom:40rpx}.list .tip-image-block .title{margin-bottom:30rpx;font-size:32rpx;color:#333;font-weight:bold}.list .tip-image-block .subtitle{font-size:28rpx;color:#a2a2a2;letter-spacing:4rpx}.table-header{overflow:hidden;white-space:nowrap}.table-header .inline-block{display:inline-block;min-width:100%}.table-header .tr{display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:2rpx solid #DDDDDD}.table-header .tr .th{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:35rpx 10rpx;font-size:28rpx;white-space:normal;word-break:break-all;color:#333;font-weight:bold}.table-header .tr .th.select{width:60rpx;padding:0 1rpx}.scroll-view{overflow:hidden;white-space:nowrap}.scroll-view .table-content{display:inline-block;min-width:100%} 2 | -------------------------------------------------------------------------------- /miniprogram/public/utils/util.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | export const getNowPage = () => { 10 | const pages = getCurrentPages(); 11 | return pages[pages.length - 1]; 12 | }; 13 | export const setNavStyle = () => { 14 | const config = { 15 | pixelRate: 0.5, 16 | platform: 'ios', 17 | capsuleHeight: 44, 18 | statusBarHeight: 20, 19 | titleHeight: 136, 20 | systemHeight: 0, 21 | isAllScreen: false, 22 | isHighHead: false, 23 | phoneSystem: undefined 24 | }; 25 | let res = wx.getSystemInfoSync(); 26 | console.log(res); 27 | config.phoneSystem = res.platform.toLowerCase(); 28 | config.pixelRate = res.windowWidth / 750; 29 | config.platform = res.platform; 30 | config.statusBarHeight = res.statusBarHeight; 31 | if (res.platform.toLowerCase() == 'android') { 32 | config.capsuleHeight += 4; 33 | } 34 | config.titleHeight = (config.capsuleHeight + config.statusBarHeight) / config.pixelRate; 35 | if (res.statusBarHeight >= 44) { 36 | config.isHighHead = true; 37 | } 38 | if (res.windowHeight > 750) 39 | config.isAllScreen = true; 40 | config.systemHeight = res.windowHeight; 41 | console.log(config); 42 | return config; 43 | }; 44 | export const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms)); 45 | export function mockData(type, item, title, pageIndex, pageSize) { 46 | if (type === 'data') { 47 | return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () { 48 | yield delay(1000); 49 | resolve({ 50 | data: item, 51 | status: 1 52 | }); 53 | })); 54 | } 55 | else { 56 | const dataList = []; 57 | for (let i = 0; i < pageSize; i++) { 58 | dataList.push(Object.assign({}, item, { id: i + 1 + (pageIndex - 1) * pageSize, [title]: `${i + 1 + (pageIndex - 1) * pageSize}条数据` })); 59 | } 60 | return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () { 61 | yield delay(1000); 62 | resolve({ 63 | data: { 64 | list: dataList, 65 | pageCount: 2 66 | }, 67 | status: 1 68 | }); 69 | })); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /miniprogram/public/utils/util.ts: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * @desc 获取当前页面 4 | */ 5 | export const getNowPage = () => { 6 | const pages = getCurrentPages() 7 | return pages[pages.length - 1] 8 | } 9 | 10 | /** 11 | * @returns {String} 获取系统屏幕相关参数 12 | */ 13 | export const setNavStyle = () => { 14 | const config: GlobalData.PageConfig = { 15 | pixelRate: 0.5, //px与rpx换算关系 16 | platform: 'ios', //操作平台 用于适配胶囊高度 17 | capsuleHeight: 44, //胶囊高度 18 | statusBarHeight: 20, //手机顶部状态栏高度 19 | titleHeight: 136, //整个导航头高度 20 | systemHeight: 0, //手机屏幕高度 21 | isAllScreen: false, //是否是全面屏手机 22 | isHighHead: false, //是否是刘海屏手机 23 | phoneSystem: undefined //系统版本 24 | } 25 | let res = wx.getSystemInfoSync(); 26 | console.log(res) 27 | // 设置系统 28 | config.phoneSystem = res.platform.toLowerCase() as "ios" | "android"; 29 | config.pixelRate = res.windowWidth / 750; 30 | config.platform = res.platform; 31 | config.statusBarHeight = res.statusBarHeight; 32 | if (res.platform.toLowerCase() == 'android') { 33 | config.capsuleHeight += 4; 34 | } 35 | config.titleHeight = (config.capsuleHeight + config.statusBarHeight) / config.pixelRate; 36 | if (res.statusBarHeight >= 44) { 37 | config.isHighHead = true; 38 | } 39 | if (res.windowHeight > 750) config.isAllScreen = true; 40 | config.systemHeight = res.windowHeight; 41 | console.log(config) 42 | return config 43 | } 44 | 45 | /** 46 | * @param {Number|null} ms 需要延时的毫秒数 47 | * @returns {String} 延时函数 48 | */ 49 | export const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)) 50 | 51 | export interface IRes { 52 | status: number, 53 | errorMsg?: string, 54 | data: T 55 | } 56 | 57 | /** 58 | * @param {Number|null} ms 需要延时的毫秒数 59 | * @returns {String} 延时函数 60 | */ 61 | export function mockData(type: 'data', item: T): Promise>; 62 | export function mockData(type: 'list', item: T, title: string, pageIndex: number, pageSize: number): Promise>; 66 | export function mockData(type: 'data' | 'list', item: T, title?: string, pageIndex?: number, pageSize?: number): any { 67 | if (type === 'data') { 68 | return new Promise(async (resolve) => { 69 | await delay(1000) 70 | resolve({ 71 | data: item, 72 | status: 1 73 | } as IRes) 74 | }) 75 | } else { 76 | const dataList: T[] = [] 77 | for (let i = 0; i < pageSize!; i++) { 78 | dataList.push({ 79 | ...item, 80 | id: i + 1 + (pageIndex! - 1) * pageSize!, 81 | [title!]: `${i + 1 + (pageIndex! - 1) * pageSize!}条数据` 82 | }) 83 | } 84 | return new Promise(async (resolve) => { 85 | await delay(1000) 86 | resolve({ 87 | data: { 88 | list: dataList, 89 | pageCount: 2 90 | }, 91 | status: 1 92 | } as IRes<{ 93 | list: T[]; 94 | pageCount: number; 95 | }>) 96 | }) 97 | } 98 | } -------------------------------------------------------------------------------- /miniprogram/public/wxss/_common.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*盒子*/ 4 | 5 | page, view, scroll-view, swiper, movable-area, cover-view, text, icon, rich-text, 6 | progress, button, checkbox-group, checkbox, form, input, label, picker, 7 | picker-view, radio-group, slider, switch, textarea, navigator, audio, image, 8 | video, live-player, live-pusher, open-data, web-view { 9 | box-sizing: border-box; 10 | } 11 | button{ 12 | outline: none; 13 | } 14 | button::after{ 15 | border: none; 16 | outline: none; 17 | } 18 | 19 | // button[] 20 | 21 | // 两行... 22 | .text-collapse{ 23 | display:-webkit-box; 24 | -webkit-box-orient:vertical; 25 | -webkit-line-clamp:2; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | } 29 | 30 | //字体加粗 31 | .f-bold { 32 | font-weight: bold; 33 | } 34 | 35 | //清除浮动 36 | .clear { 37 | clear: both; 38 | overflow: hidden; 39 | } 40 | 41 | //禁止换行 42 | .no-wrap { 43 | white-space: nowrap; 44 | overflow: hidden; 45 | text-overflow: ellipsis; 46 | } 47 | 48 | //添加position 49 | .add-position { 50 | position: relative; 51 | } 52 | 53 | //宽度高度布局 54 | $wh: 100, 50, 25; 55 | @each $h in $wh { 56 | .w-#{$h} { 57 | width: #{$h+'%'}; 58 | } 59 | .h-#{$h} { 60 | height: #{$h+'%'}; 61 | } 62 | } 63 | 64 | 65 | //生成内边距 与外边距工具类 66 | .mx-auto { 67 | margin-left: auto; 68 | margin-right: auto; 69 | } 70 | 71 | $mpSize: 5rpx 10rpx 20rpx 30rpx 40rpx 60rpx; 72 | @for $a from 1 through length($mpSize) { 73 | .pt-#{$a} { 74 | padding-top: nth($mpSize, $a); 75 | } 76 | .pb-#{$a} { 77 | padding-bottom: nth($mpSize, $a); 78 | } 79 | .pl-#{$a} { 80 | padding-left: nth($mpSize, $a); 81 | } 82 | .pr-#{$a} { 83 | padding-right: nth($mpSize, $a); 84 | } 85 | 86 | .mt-#{$a} { 87 | margin-top: nth($mpSize, $a); 88 | } 89 | .mb-#{$a} { 90 | margin-bottom: nth($mpSize, $a); 91 | } 92 | .ml-#{$a} { 93 | margin-left: nth($mpSize, $a); 94 | } 95 | .mr-#{$a} { 96 | margin-right: nth($mpSize, $a); 97 | } 98 | } 99 | 100 | //文字布局 101 | $text: left, right, center; 102 | @each $f in $text { 103 | .text-#{$f} { 104 | text-align: #{$f} 105 | } 106 | } 107 | 108 | //生成字体大小工具类 109 | $fontSize: 12 14 16 18 20 22 24 26 28 30 32 36 40; 110 | @each $b in $fontSize { 111 | .f-#{$b} { 112 | font-size: $b+rpx 113 | } 114 | } 115 | 116 | //flex布局 117 | .box { 118 | display: flex; 119 | } 120 | 121 | .box-tag-big { 122 | flex-grow: 1; 123 | } 124 | 125 | $principalAxis: start, between, center, around, end; 126 | $rowOrCol: row, col; 127 | $wrap: -wrap, '', -start, -end; 128 | @each $c in $principalAxis { 129 | @each $d in $rowOrCol { 130 | @each $e in $wrap { 131 | .box-#{$d}-#{$c}#{$e} { 132 | //控制主轴及是否换行 133 | @if $d == row { 134 | @if $e == -wrap { 135 | flex-flow: wrap; 136 | } @else { 137 | flex-flow: nowrap; 138 | } 139 | } @else { 140 | @if $e == -wrap { 141 | flex-flow: column wrap; 142 | } @else { 143 | flex-flow: column nowrap; 144 | } 145 | } 146 | 147 | //主轴类型 148 | @if $c == start { 149 | justify-content: flex-start 150 | } @else if $c == between { 151 | justify-content: space-between 152 | } @else if $c == center { 153 | justify-content: center 154 | } @else if $c == around { 155 | justify-content: space-around 156 | } @else if $c == end { 157 | justify-content: flex-end 158 | } 159 | 160 | //交叉轴类型 161 | @if $e == -start { 162 | align-items: flex-start; 163 | } @else if $e == -end { 164 | align-items: flex-end; 165 | } @else { 166 | align-items: center; 167 | } 168 | } 169 | } 170 | } 171 | } 172 | 173 | .box-tg { 174 | align-items: stretch 175 | } 176 | 177 | 178 | -------------------------------------------------------------------------------- /miniprogram/public/wxss/_main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*全局参数*/ 4 | $c-main: #687CEE; 5 | 6 | @mixin bg-img-cover { 7 | background-size: cover; 8 | background-repeat: no-repeat; 9 | background-position: center; 10 | } 11 | 12 | @mixin bg-img-contain { 13 | background-size: contain; 14 | background-repeat: no-repeat; 15 | background-position: center; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /miniprogram/sitemap.json: -------------------------------------------------------------------------------- 1 | { 2 | "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html", 3 | "rules": [{ 4 | "action": "allow", 5 | "page": "*" 6 | }] 7 | } -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "miniprogram-ts-quickstart", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "@types/wechat-miniprogram": { 8 | "version": "3.2.0", 9 | "resolved": "https://registry.npm.taobao.org/@types/wechat-miniprogram/download/@types/wechat-miniprogram-3.2.0.tgz", 10 | "integrity": "sha1-a0A0FVhW0xzZ80Lv0hfbwn6oD7k=" 11 | }, 12 | "miniprogram-api-typings": { 13 | "version": "2.12.0", 14 | "resolved": "https://registry.npm.taobao.org/miniprogram-api-typings/download/miniprogram-api-typings-2.12.0.tgz", 15 | "integrity": "sha1-einJDz5e+jZYhCLR8B4i0zlKqqE=", 16 | "dev": true 17 | }, 18 | "typescript": { 19 | "version": "3.3.3333", 20 | "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.3.3333.tgz", 21 | "integrity": "sha512-JjSKsAfuHBE/fB2oZ8NxtRTk5iGcg6hkYXMnZ3Wc+b2RSqejEqTaem11mHASMnFilHrax3sLK0GDzcJrekZYLw==", 22 | "dev": true 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "miniprogram-ts-quickstart", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "compile": "./node_modules/typescript/bin/tsc", 7 | "tsc": "node ./node_modules/typescript/lib/tsc.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "", 12 | "dependencies": { 13 | "@types/wechat-miniprogram": "^3.2.0" 14 | }, 15 | "devDependencies": { 16 | "miniprogram-api-typings": "^2.12.0", 17 | "typescript": "^3.3.3333" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /project.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "项目配置文件", 3 | "packOptions": { 4 | "ignore": [] 5 | }, 6 | "miniprogramRoot": "miniprogram/", 7 | "compileType": "miniprogram", 8 | "libVersion": "2.9.1", 9 | "projectname": "%E5%B0%8F%E7%A8%8B%E5%BA%8Ftable%E7%BB%84%E4%BB%B6", 10 | "scripts": { 11 | "beforeCompile": "npm run tsc", 12 | "beforePreview": "npm run tsc", 13 | "beforeUpload": "npm run tsc" 14 | }, 15 | "setting": { 16 | "urlCheck": false, 17 | "es6": true, 18 | "enhance": true, 19 | "postcss": true, 20 | "preloadBackgroundData": false, 21 | "minified": true, 22 | "newFeature": false, 23 | "coverView": true, 24 | "nodeModules": false, 25 | "autoAudits": false, 26 | "showShadowRootInWxmlPanel": true, 27 | "scopeDataCheck": false, 28 | "uglifyFileName": false, 29 | "checkInvalidKey": true, 30 | "checkSiteMap": true, 31 | "uploadWithSourceMap": true, 32 | "compileHotReLoad": false, 33 | "useMultiFrameRuntime": true, 34 | "useApiHook": true, 35 | "useApiHostProcess": true, 36 | "babelSetting": { 37 | "ignore": [], 38 | "disablePlugins": [], 39 | "outputPath": "" 40 | }, 41 | "enableEngineNative": false, 42 | "bundle": false, 43 | "useIsolateContext": true, 44 | "useCompilerModule": true, 45 | "userConfirmedUseCompilerModuleSwitch": false, 46 | "userConfirmedBundleSwitch": false, 47 | "packNpmManually": false, 48 | "packNpmRelationList": [], 49 | "minifyWXSS": true 50 | }, 51 | "simulatorType": "wechat", 52 | "simulatorPluginLibVersion": {}, 53 | "appid": "wxef6ecf38055467f6", 54 | "condition": {} 55 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strictNullChecks": true, 4 | "noImplicitAny": true, 5 | "module": "ES2015", 6 | "target": "ES2015", 7 | "allowJs": false, 8 | "experimentalDecorators": true, 9 | "noImplicitThis": true, 10 | "noImplicitReturns": true, 11 | "alwaysStrict": true, 12 | "inlineSourceMap": false, 13 | "inlineSources": false, 14 | "noFallthroughCasesInSwitch": true, 15 | "noUnusedLocals": true, 16 | "noUnusedParameters": true, 17 | "strict": true, 18 | "removeComments": true, 19 | "pretty": true, 20 | "strictPropertyInitialization": true, 21 | "sourceMap": false, 22 | "allowSyntheticDefaultImports": true, 23 | "lib": [ 24 | "ES2018" 25 | ], 26 | "typeRoots": [ 27 | "./typings", 28 | "./node_modules/@types" 29 | ], 30 | }, 31 | "include": [ 32 | "./**/*.ts" 33 | ], 34 | "exclude": [ 35 | "node_modules" 36 | ] 37 | } -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | interface IAppOption { 4 | globalData: GlobalData.GlobalData, 5 | } 6 | -------------------------------------------------------------------------------- /typings/types/component.d.ts: -------------------------------------------------------------------------------- 1 | 2 | declare namespace WechatMiniprogram { 3 | namespace Component { 4 | interface OtherOption { 5 | storeBindings: { 6 | store: any, 7 | fields?: { 8 | [key: string]: (store: T) => any 9 | }, 10 | actions?: string[] 11 | }, 12 | computed: { 13 | [key: string]: (...data: any[]) => any 14 | }, 15 | watch: any, 16 | } 17 | 18 | // 因为component的wx定义里 methods 是 Partial any>>> ，而我从 Partial 的 （type Partial = { [P in keyof T]?: T[P] | undefined; }）带有undefined类型 19 | type ComponentLifeCycle = Partial 20 | } 21 | } -------------------------------------------------------------------------------- /typings/types/global.d.ts: -------------------------------------------------------------------------------- 1 | declare namespace GlobalData { 2 | 3 | // 小程序事件对象 4 | interface WxAppletsEvent { 5 | detail: { 6 | value: any, 7 | current: number, 8 | source: string, 9 | [key: string]: any 10 | }, 11 | traget: { 12 | dataset: { 13 | [key: string]: any 14 | } 15 | }, 16 | currentTarget: { 17 | dataset: { 18 | [key: string]: any 19 | } 20 | }, 21 | type: string 22 | } 23 | 24 | // 全局屏幕 25 | interface PageConfig { 26 | pixelRate: number,//px与rpx换算关系 27 | platform: string,//操作平台 用于适配胶囊高度 28 | capsuleHeight: number,//胶囊高度 29 | statusBarHeight: number,//手机顶部状态栏高度 30 | titleHeight: number,//整个导航头高度 31 | systemHeight: number,//手机屏幕高度 32 | isAllScreen: boolean,//是否是全面屏手机 33 | isHighHead: boolean,//是否是刘海屏手机 34 | phoneSystem: 'ios' | 'android' | undefined // 系统类型 35 | } 36 | 37 | // 转发 38 | interface Transmit { 39 | title?: string, 40 | path?: string, 41 | imageUrl: string, 42 | success: (res: any) => void, 43 | fail: (res: any) => void, 44 | } 45 | 46 | // 全局的globalData参数设置 47 | interface GlobalData { 48 | pageConfig: PageConfig, 49 | transmit: Transmit 50 | } 51 | 52 | } 53 | 54 | // 初始化lodash 需要使用global 55 | declare const global: any 56 | -------------------------------------------------------------------------------- /typings/types/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | --------------------------------------------------------------------------------