微信小程序做表格

微信小程序可以使用WXML和WXSS来实现表格的布局和样式，同时使用JavaScript来动态渲染表格数据。

以下是一个简单的表格示例：

WXML代码：

<view class="table">
  <view class="row header">
    <view class="cell">姓名</view>
    <view class="cell">年龄</view>
    <view class="cell">性别</view>
  </view>
  <view wx:for="{{students}}" wx:key="index" class="row">
    <view class="cell">{{item.name}}</view>
    <view class="cell">{{item.age}}</view>
    <view class="cell">{{item.gender}}</view>
  </view>
</view>

WXSS代码：

.table {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 10px;
}

.row {
  display: flex;
  flex-direction: row;
  border: 1px solid #ccc;
}

.header {
  font-weight: bold;
  background-color: #f5f5f5;
}

.cell {
  flex: 1;
  padding: 5px;
  text-align: center;
}

JavaScript代码：

Page({
  data: {
    students: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 22, gender: '男' }
    ]
  }
})

在这个示例中，我们使用了flex布局来实现表格的排列，使用了border属性来设置表格和单元格的边框，使用了background-color属性来设置表头的背景色，使用了wx:for指令来循环渲染表格数据。同时，我们还可以根据需要添加其他样式属性来美化表格的外观。

除了基本的表格布局和样式，我们还可以通过一些技巧来实现更复杂的表格功能，例如：

合并单元格

在表格中，有时需要将多个单元格合并成一个单元格，可以使用colspan和rowspan属性来实现。例如，将第一行的前两个单元格合并成一个单元格：

<view class="row header">
  <view class="cell" colspan="2">姓名</view>
  <view class="cell">年龄</view>
  <view class="cell">性别</view>
</view>

排序功能

在表格中，可以添加排序功能，让用户可以根据某一列的值进行升序或降序排列。可以使用JavaScript来实现排序功能，例如：

Page({
  data: {
    students: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 22, gender: '男' }
    ],
    sortColumn: '', // 排序列
    sortOrder: '' // 排序方式
  },
  sortTable: function (e) {
    var column = e.currentTarget.dataset.column;
    var order = this.data.sortOrder === 'asc' ? 'desc' : 'asc';
    var data = this.data.students.slice();
    data.sort(function (a, b) {
      if (order === 'asc') {
        return a[column] > b[column] ? 1 : -1;
      } else {
        return a[column] < b[column] ? 1 : -1;
      }
    });
    this.setData({
      students: data,
      sortColumn: column,
      sortOrder: order
    });
  }
})

在WXML中，可以为每一列添加一个点击事件，当用户点击某一列时，调用sortTable函数进行排序。在sortTable函数中，使用slice方法复制一份原始数据，然后根据排序列和排序方式进行排序，最后更新数据。

分页功能

在表格中，如果数据量很大，可以添加分页功能，让用户可以翻页查看数据。可以使用wx:for和slice方法来实现分页功能，例如：

Page({
  data: {
    students: [
      { name: '张三', age: 18, gender: '男' },
      { name: '李四', age: 20, gender: '女' },
      { name: '王五', age: 22, gender: '男' },
      // ... 其他数据
    ],
    currentPage: 1, // 当前页码
    pageSize: 10 // 每页显示的数据量
  },
  getPageData: function () {
    var start = (this.data.currentPage - 1) * this.data.pageSize;
    var end = start + this.data.pageSize;
    var data = this.data.students.slice(start, end);
    return data;
  },
  prevPage: function () {
    if (this.data.currentPage > 1) {
      this.setData({
        currentPage: this.data.currentPage - 1
      });
    }
  },
  nextPage: function () {
    var totalPage = Math.ceil(this.data.students.length / this.data.pageSize);
    if (this.data.currentPage < totalPage) {
      this.setData({
        currentPage: this.data.currentPage + 1
      });
    }
  }
})

在WXML中，可以使用wx:for循环渲染当前页的数据，getPageData函数根据当前页码和每页显示的数据量来获取当前页的数据。在JavaScript中，可以使用prevPage和nextPage函数来切换页码，更新数据。