uni-table分页保存单选

uni-table中的分页功能通常用于展示大量数据，当需要对每一项进行单选操作并且还要支持分页保存用户的选择时，你可以按照以下步骤操作：

1. **初始化uni-table组件**：首先，在表格组件`uni-table`上配置好列宽、行数据以及分页插件，如`data-source`、`row-key`等。

<template>
  <uni-table :data-source="tableData" :row-key="item => item.id" :column-head-template="columnHeadTemplate" :cell-template="cellTemplate" @on-load-more="loadMore">
    <!-- 其他配置 -->
  </uni-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始化数据源
      currentPage: 1, // 当前页数
    };
  },
  methods: {
    loadMore() {
      this.loadPage(this.currentPage + 1);
    },
    loadPage(page) {
      // 加载指定页的数据，并处理选择状态
    }
  },
  // ...其他方法
};
</script>

2. **cell-template和column-header-template**：在单元格模板`cell-template`中添加单选框和保存按钮。在头部模板`column-head-template`中可以添加复选框或计数显示已选的数量。

<!-- cell-template 示例 -->
<template slot-scope="{ item }">
  <view class="select-item">
    <input type="radio" value="{{ item.id }}" v-model="selectedIds" @change="onChangeItem(item.id)">
    <span>{{ item.title }}</span>
    <button @click="saveSelection">保存选择</button>
  </view>
</template>

<!-- column-head-template 示例 -->
<template slot="head">
  <div>
    <input type="checkbox" v-model="selectAll" @change="toggleAllSelections">
    <span>选择所有</span>
    <span>已选择: {{ selectedCount }}</span>
  </div>
</template>

3. **保存单选状态**：在`loadPage`方法中，检查当前页的`selectedIds`数组，并将单选的状态同步到服务器或本地存储，比如使用Vuex进行状态管理。

methods: {
  onChangeItem(id) {
    // 更新选中项列表
    this.selectedIds.push(id);
  },
  
  saveSelection() {
    const selectedItems = this.tableData.filter(item => this.selectedIds.includes(item.id));
    // 发送请求保存选择
    this.saveSelectedItems(selectedItems);
  },
  
  saveSelectedItems(items) {
    // 根据业务逻辑发送请求
  },
  
  toggleAllSelections() {
    this.selectAll ? this.selectAll = false : this.selectAll = true;
    if (this.selectAll) {
      this.selectedIds = []; // 清空已选列表
      this.tableData.forEach(item => this.onChangeItem(item.id)); // 全部选中
    } else {
      this.selectedIds = []; // 如果取消全选，则清空已选列表
    }
  },
},