小程序表格指南

发布时间：2023-05-19

一、小程序表格形式

小程序表格是一种用于展示数据和收集信息的工具，在小程序中形式多样化，可以是固定表头的表格、自适应宽度的表格、可编辑的表格等多种形式。 在小程序中表格通常用于展示类似于课程表、排班表、订单表、费用明细表等多种信息，帮助用户快速查看信息和进行操作。 下面是一个展示固定表头的表格的完整代码示例：

<view class="table">
  <view class="thead">
    <view class="tr">
      <view class="th">日期</view>
      <view class="th">开始时间</view>
      <view class="th">结束时间</view>
    </view>
  </view>
  <view class="tbody">
    <view class="tr" wx:for="{{ list }}" wx:key="{{ index }}">
      <view class="td">{{ item.date }}</view>
      <view class="td">{{ item.startTime }}</view>
      <view class="td">{{ item.endTime }}</view>
    </view>
  </view>
</view>

二、小程序里面怎么导出表格

小程序中可以通过使用第三方组件或者自己编写代码来实现导出表格的功能，在实现导出表格的过程中需要注意以下几点：

  1. 需要调用小程序的API导出文件，文件的格式通常为.xlsx或者.csv
  2. 需要将数据格式化并存储在文件中，以保证导出的表格数据格式正确 下面是一个使用第三方组件实现导出表格的完整代码示例：
// 导入第三方组件
import wxExportTable from '../../components/wx-export-table/wx-export-table.js';
Page({
  data: {
    list: [
      { date: '2021-01-01', startTime: '09:00', endTime: '15:00' },
      { date: '2021-01-02', startTime: '10:00', endTime: '14:00' }
    ]
  },
  // 导出表格事件
  exportTable() {
    wxExportTable.exportTable({
      fileName: 'myTable', // 文件名
      columns: ['日期', '开始时间', '结束时间'], // 列名
      rows: this.data.list, // 数据
      multiHeader: [], // 多级表头
      merges: [], // 合并单元格
      sheetFilter: [], // 过滤函数
      isHeaderBolder: true, // 是否加粗表头
      exportFileType: 'xlsx' // 导出文件类型
    });
  }
});

三、小程序表格填写

小程序表格的填写通常需要用户输入数据并保存，可以使用小程序提供的表单组件实现，需要注意以下几点：

  1. 表格需要设置可编辑属性，以便用户进行编辑
  2. 需要监听用户的输入事件并同步数据到表格数据中
  3. 需要设计保存数据的方法并在用户填写完数据后调用保存方法 下面是一个用户填写打卡表格并保存的完整代码示例：
<view class="table">
  <view class="thead">
    <view class="tr">
      <view class="th">日期</view>
      <view class="th">上班打卡时间</view>
      <view class="th">下班打卡时间</view>
    </view>
  </view>
  <view class="tbody">
    <view class="tr" wx:for="{{ list }}" wx:key="{{ index }}" data-index="{{ index }}">
      <view class="td">{{ item.date }}</view>
      <view class="td">
        <input type="time" value="{{ item.startTime }}" bindinput="handleInput" data-type="start" data-index="{{ index }}" />
      </view>
      <view class="td">
        <input type="time" value="{{ item.endTime }}" bindinput="handleInput" data-type="end" data-index="{{ index }}" />
      </view>
    </view>
  </view>
</view>
<button bindtap="handleSubmit">保存</button>

Page({
  data: {
    list: [
      { date: '2021-01-01', startTime: '', endTime: '' },
      { date: '2021-01-02', startTime: '', endTime: '' }
    ]
  },
  // 处理用户输入事件
  handleInput(e) {
    let { index, type } = e.currentTarget.dataset;
    let value = e.detail.value;
    let list = this.data.list;
    if (type === 'start') {
      list[index].startTime = value;
    } else {
      list[index].endTime = value;
    }
    this.setData({
      list: list
    });
  },
  // 保存数据
  handleSubmit() {
    let list = this.data.list;
    // 将数据提交到后台
    // ...
    wx.showToast({
      title: '保存成功',
      icon: 'success'
    });
  }
});

四、手机表格制作小程序

制作手机表格的小程序需要注意以下几点：

  1. 需要设计美观、易用的表格界面，便于用户浏览和操作
  2. 需要考虑不同尺寸的手机屏幕对表格的显示和操作的影响，保证表格在不同手机上的兼容性 下面是一个展示手机表格的完整代码示例：
<view class="page">
  <view class="table">
    <view class="thead">
      <view class="tr">
        <view class="th">日期</view>
        <view class="th">上班打卡时间</view>
        <view class="th">下班打卡时间</view>
      </view>
    </view>
    <view class="tbody">
      <view class="tr" wx:for="{{ list }}" wx:key="{{ index }}">
        <view class="td">{{ item.date }}</view>
        <view class="td">{{ item.startTime }}</view>
        <view class="td">{{ item.endTime }}</view>
      </view>
    </view>
  </view>
</view>

五、小程序表格制作流程

制作小程序表格的流程大致分为以下几步：

  1. 确定表格所要展示的数据和功能
  2. 设计表格的外观和交互界面
  3. 编写表格组件或使用第三方组件
  4. 获取数据并渲染表格
  5. 如果需要，添加表格的编辑、添加、删除等功能
  6. 如果需要，添加表格的导出、导入等功能 下面是一个制作小程序表格的完整代码示例：
<!-- 表格组件 -->
<template name="myTable">
  <view class="table">
    <view class="thead">
      <view class="tr">
        <view class="th">姓名</view>
        <view class="th">年龄</view>
        <view class="th">性别</view>
      </view>
    </view>
    <view class="tbody">
      <view class="tr" wx:for="{{ list }}" wx:key="{{ index }}">
        <view class="td">{{ item.name }}</view>
        <view class="td">{{ item.age }}</view>
        <view class="td">{{ item.gender }}</view>
      </view>
    </view>
  </view>
</template>
<!-- 页面 -->
<import src="../../components/my-table/my-table.wxml" />
<view class="page">
  <mytable list="{{ list }}" />
</view>

// JS代码
Page({
  data: {
    list: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 21, gender: '女' },
      { name: '王五', age: 25, gender: '男' }
    ]
  }
});

六、资料员小程序

资料员小程序中通常会用到表格来展示和收集数据，需要注意以下几点：

  1. 表格需要根据实际需求进行定制，包括表格的列数、行数、数据类型以及数据校验等
  2. 表格需要支持导入和导出，以方便资料员进行数据的批量操作 下面是一个展示资料员小程序中使用表格的完整代码示例：
<view class="page">
  <button bindtap="handleImport">导入</button>
  <button bindtap="handleExport">导出</button>
  <view class="table">
    <view class="thead">
      <view class="tr">
        <view class="th">姓名</view>
        <view class="th">身份证号</view>
        <view class="th">电话号码</view>
      </view>
    </view>
    <view class="tbody">
      <view class="tr" wx:for="{{ list }}" wx:key="{{ index }}">
        <view class="td">{{ item.name }}</view>
        <view class="td">{{ item.idCard }}</view>
        <view class="td">{{ item.phoneNumber }}</view>
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    list: []
  },
  // 导入表格数据
  handleImport() {
    wx.chooseExcel({
      success: (res) => {
        let filePath = res.tempFilePath;
        // 将文件数据解析成表格数据
        let list = parseExcelData(filePath);
        this.setData({
          list: list
        });
      },
      fail: () => {
        wx.showToast({
          title: '未选择文件',
          icon: 'none'
        });
      }
    });
  },
  // 导出表格数据
  handleExport() {
    wxExportTable.exportTable({
      fileName: 'myTable',
      columns: ['姓名', '身份证号', '电话号码'],
      rows: this.data.list,
      multiHeader: [],
      merges: [],
      sheetFilter: [],
      isHeaderBolder: true,
      exportFileType: 'xlsx'
    });
  }
});

七、小程序表格代码

小程序表格通常由HTML、CSS和JavaScript代码组成，需要注意以下几点：

  1. 表格的HTML需要根据实际需求进行定制，包括表格的列数、行数、表头和表体等
  2. 表格的CSS需要根据实际需求进行样式设计，包括表格的宽度、高度、边框、字体等
  3. 表格的JavaScript代码需要包括数据处理和渲染两部分，包括获取数据、数据格式化、数据渲染等 下面是一个包含HTML、CSS和JavaScript代码的完整小程序表格代码示例：
<view class="page">
  <view class="table">
    <view class="thead">
      <view class="tr">
        <view class="th">姓名</view>
        <view class="th">年龄</view>
        <view class="th">性别</view>
      </view>
    </view>
    <view class="tbody">
      <view class="tr" wx:for="{{ list }}" wx:key="{{ index }}">
        <view class="td">{{ item.name }}</view>
        <view class="td">{{ item.age }}</view>
        <view class="td">{{ item.gender }}</view>
      </view>
    </view>
  </view>
</view>

.page {
  padding: 20px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  text-align: center;
}
.thead .tr {
  background-color: #f5f5f5;
}
.th, .td {
  padding: 10px;
  border: 1px solid #ddd;
}
.th {
  font-weight: bold;
}

Page({
  data: {
    list: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 21, gender: '女' },
      { name: '王五', age: 25, gender: '男' }
    ]
  }
});
推荐文章