【愚公系列】2022年11月 微信小程序-表格组件使用_微信小程序 表格组件

---

前言

移动端的页面本应该很少有table表格这样的展示、操作，但总归有这样的需求，然而平时用的vant和iview的小程序组件库都没有table组件，这下面讲解表格组件封装的案例。

github网址：https://github.com/kawaiiz/table_component

使用说明

该组件具有 列表展示模式，勾选模式，展开行模式。

1. 复制/miniprogram/public/components/public下面的三个组件，到你的公共组件文件夹下（其实这三个组件也是也可以合为一体，因为empty与load_more组件是可以单独使用的，所以没有放到table组件中）
2. 在需要使用的页面引入table组件即可。

1、相关接口

属性：

事件：

列配置：
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。

一、表格组件使用

1.基础用法

1.1 代码

{
  "component": true,
  "usingComponents": {
    "table": "/public/components/public/table/table"
  }
}
1
2
3
4
5
6

<table class="basic-table" columns="{{tableColumns}}" dataList="{{dataList}}" getListLoading="{{getListLoading}}" showTipImage="{{dataList.length===0&!getListLoading}}" bindclicklistitem="handleClickItem" />
1

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { mockData } from '../../../../public/utils/util';
const app = getApp();
Component({
    options: {
        addGlobalClass: true,
    },
    properties: {},
    data: {
        tableColumns: [{
                title: "姓名",
                key: "name",
            }, {
                title: "年龄",
                key: "age",
            }, {
                title: "性别",
                key: "sex",
            }],
        dataList: [],
        pageNum: 1,
        pageSize: 10,
        pageCount: 1,
        getListLoading: false,
    },
    methods: {
        options: {},
        handleClickItem(e) {
            console.log(e);
            const { index, item } = e.detail.value;
            wx.showToast({
                title: `点击第${index + 1}行`
            });
        },
        getList() {
            return __awaiter(this, void 0, void 0, function* () {
                try {
                    const { pageNum, pageSize, pageCount, dataList, getListLoading } = this.data;
                    if (pageNum > pageCount)
                        return;
                    if (getListLoading)
                        return;
                    this.setData({
                        getListLoading: true,
                    });
                    const res = yield mockData('list', {
                        id: 1,
                        name: '兼职人员',
                        age: 10,
                        sex: '男',
                    }, "name", pageNum, pageSize);
                    this.setData({
                        dataList: dataList.concat(res.data.list),
                        pageCount: res.data.pageCount,
                        getListLoading: false,
                        pageNum: res.data.list.length > 0 ? pageNum + 1 : pageNum,
                    });
                }
                catch (e) {
                    this.setData({
                        getListLoading: false,
                    });
                    console.log(e);
                }
            });
        },
        initComponent() {
            this.getList();
        },
    },
    lifetimes: {
        attached: function () { },
        ready: function () { this.initComponent(); },
        moved: function () { },
        detached: function () { },
    },
    pageLifetimes: {
        show: function () { },
        hide: function () { },
        resize: function () { },
    },
});
1
2
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

1.2 效果

总结

本表格组件还可支持

• 设置滚动区域高度
• 横向滚动
• 上拉加载和下拉重置刷新
• 自定义TD内容和
• 多选
• 展开
• 批量修改和单元格监听等等功能