微信小程序云数据查询表格展示 - 图片缩略图

微信小程序云数据查询表格展示 - 图片缩略图

本示例展示如何在微信小程序中使用云函数查询数据并展示在表格中。表格包含邮件编号、图片缩略图、描述和日期等信息。

数据结构：

data: {
    mailNumber: '', // 邮件编号
    images: [], // 保存的图片列表
    describe: '',
    date: '',
    startDate: '',
    endDate: '',
    searchData: {} // 存储查找到的数据
},

云函数调用：

search: async function () {
    wx.cloud.callFunction({
        name: 'searchData',
        data: {
            mailNumber: this.data.mailNumber,
            startDate: this.data.startDate,
            endDate: this.data.endDate
        },
        success: res => {
            const searchData = res.result;
            if (searchData.error) {
                wx.showToast({
                    title: '未找到相关数据',
                    icon: 'none'
                });
            } else {
                this.setData({
                    searchData: searchData.searchData,
                    // images: searchData.images,
                    // describe: searchData.describe,
                    // date: searchData.date
                });
            }
        },
        fail: err => {
            console.error(err);
        }
    });
},

表格展示：

为了以表格形式显示数据，可以使用 <table> HTML 元素以及相应的表头和表行。以下是如何修改代码以表格形式显示数据的示例：

HTML：

<table>
  <thead>
    <tr>
      <th>邮件编号</th>
      <th>图片</th>
      <th>描述</th>
      <th>日期</th>
    </tr>
  </thead>
  <tbody>
    <template wx:for='{{ searchData }}' wx:key='index'>
      <tr>
        <td>{{ item.mailNumber }}</td>
        <td>
          <template wx:for='{{ item.images }}' wx:key='index'>
            <img src='{{ item }}' width='50' height='50'>
          </template>
        </td>
        <td>{{ item.describe }}</td>
        <td>{{ item.date }}</td>
      </tr>
    </template>
  </tbody>
</table>

在这个示例中，我们使用 <table> 元素创建了一个表格结构。<thead> 元素包含表头，<tbody> 元素包含表行。我们使用 wx:for 指令遍历 searchData 数组中的每个项，并在每个表格单元格中显示相应的数据。

对于 图片 列，我们使用另一个 wx:for 指令遍历 item.images 数组中的每张图片，并使用 <img> 元素显示每张图片的缩略图。

请注意，此代码假设您使用的是微信小程序的 WXML 模板语法。如果您使用的是其他框架或模板引擎，则可能需要调整语法。