uniapp点击按钮触发事件设置的值怎么把数据循环数组到uni-table中

在 UniApp 中，当你有一个按钮触发事件并设置了相关的数据，想要将这个数据循环到 UniTable 中，你需要先在你的组件内部处理数据，然后通过 `v-for` 指令遍历数组并在 `<uni-table>` 标签内渲染每一项。

假设你有一个名为 `listOfItems` 的数组，每个元素都有你想显示在表格中的属性，你可以这样做：

<template>
  <view>
    <button @click="loadData">加载数据</button>
    
    <uni-table ref="myTable" :data="tableData" style="width: 100%">
      <uni-table-column title="标题一" prop="prop1"></uni-table-column>
      <!-- 添加更多列... -->
      
      <template v-for="item in listOfItems" :key="item.id">
        <uni-table-row>
          <uni-table-cell :value="item.prop1" prop="prop1"></uni-table-cell>
          <uni-table-cell :value="item.prop2" prop="prop2"></uni-table-cell> <!-- 更多单元格 -->
        </uni-table-row>
      </template>
    </uni-table>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 初始化为空数组，后续会填充
      listOfItems: [], // 假设这是你的数据源
    };
  },
  methods: {
    loadData() {
      // 在这里处理你的数据，将其赋值给 tableData
      this.tableData = this.listOfItems.map(item => ({
        prop1: item.property1,
        prop2: item.property2, // 更改为你实际的属性名
        // 添加更多的属性...
      }));
    },
  },
};
</script>

在这个例子中，当点击 "加载数据" 按钮时，`loadData` 方法会被调用，它会遍历 `listOfItems` 数组，为每个元素创建一个新的表行对象并将数据插入到 `tableData` 数组中。然后 `v-for` 指令会自动根据 `tableData` 更新 UniTable 内容。