uni-app 带有左右滚动 下拉加载 双击行事件的 table 组件

在 uni-app 中实现一个带有左右滚动、下拉加载以及双击行事件的表格组件，可以结合 uni-app 的基础组件和一些自定义逻辑来实现。以下是一个简化的代码示例，展示了如何实现这些功能。

1. 创建表格组件

首先，创建一个自定义组件 CustomTable.vue：

<template>
  <view class="table-container" @scrolltolower="loadMore" @dblclick.stop="handleDoubleClick">
    <scroll-view scroll-x="true" class="scroll-x">
      <view class="table-header">
        <!-- 表头内容 -->
        <view v-for="(header, index) in headers" :key="index">{{ header }}</view>
      </view>
      <view class="table-body">
        <view v-for="(row, rowIndex) in data" :key="rowIndex" class="table-row">
          <view v-for="(cell, cellIndex) in row" :key="cellIndex" class="table-cell">
            {{ cell }}
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    headers: Array,
    data: Array,
  },
  methods: {
    loadMore() {
      // 实现下拉加载更多数据的逻辑
      console.log('Loading more data...');
      // 模拟异步加载数据
      setTimeout(() => {
        this.$emit('load-more');
      }, 1000);
    },
    handleDoubleClick(event) {
      const target = event.target;
      const rowIndex = parseInt(target.dataset.row, 10);
      this.$emit('row-dblclick', rowIndex);
    },
  },
};
</script>

<style scoped>
.table-container {
  height: 100%;
  overflow: auto;
}
.scroll-x {
  white-space: nowrap;
}
.table-header, .table-row {
  display: flex;
}
.table-cell {
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}
</style>

2. 使用表格组件

在父组件中使用 CustomTable 组件，并处理加载更多数据和双击行事件：

<template>
  <view>
    <CustomTable :headers="headers" :data="data" @load-more="onLoadMore" @row-dblclick="onRowDoubleClick" />
  </view>
</template>

<script>
import CustomTable from './components/CustomTable.vue';

export default {
  components: {
    CustomTable,
  },
  data() {
    return {
      headers: ['Name', 'Age', 'City'],
      data: [
        // 初始数据
      ],
    };
  },
  methods: {
    onLoadMore() {
      // 模拟加载更多数据
      const newData = [
        // 新数据
      ];
      this.data = [...this.data, ...newData];
    },
    onRowDoubleClick(rowIndex) {
      console.log('Row double clicked:', rowIndex);
    },
  },
};
</script>

这个示例展示了如何在 uni-app 中实现一个具有左右滚动、下拉加载和双击行事件的表格组件。你可以根据实际需求进一步扩展和优化这个基础实现。