用uniapp写一个table联动

首先，在uniapp中，可以使用 `uni-ui` 中的 `uni-list` 和 `uni-list-item` 组件来实现表格的显示。联动的话，可以使用 `scroll-view` 组件来实现。

以下是示例代码：

<template>
  <view class="table-wrapper">
    <scroll-view scroll-x class="table-header">
      <view class="table-row">
        <view :style="{ width: col.width }" v-for="(col, index) in columns" :key="index">{{ col.title }}</view>
      </view>
    </scroll-view>
    <scroll-view scroll-y class="table-body">
      <view class="table-row" v-for="(row, rowIndex) in data" :key="rowIndex">
        <view :style="{ width: columns[0].width }">{{ row[0] }}</view>
        <view :style="{ width: columns[1].width }">
          <uni-list :value="row[1]" :options="columns[1].options" @change="handleListChange(rowIndex, $event)"></uni-list>
        </view>
        <view :style="{ width: columns[2].width }">
          <uni-list :value="row[2]" :options="columns[2].options" @change="handleListChange(rowIndex, $event)"></uni-list>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: '姓名', width: '100rpx' },
        { title: '性别', width: '150rpx', options: [{ text: '男', value: 'male' }, { text: '女', value: 'female' }] },
        { title: '年龄', width: '100rpx', options: [{ text: '18岁以下', value: '0' }, { text: '18~25岁', value: '1' }, { text: '25岁以上', value: '2' }] },
      ],
      data: [
        ['张三', 'male', '0'],
        ['李四', 'male', '1'],
        ['王五', 'female', '2'],
      ],
    };
  },
  methods: {
    handleListChange(rowIndex, { value }) {
      this.data[rowIndex][1] = value[0];
      this.data[rowIndex][2] = value[1];
    },
  },
};
</script>

<style>
.table-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.table-header {
  flex-shrink: 0;
  height: 50rpx;
  border-bottom: 1px solid #ccc;
}

.table-body {
  flex-grow: 1;
  overflow-x: hidden;
}

.table-row {
  display: flex;
  align-items: center;
  height: 60rpx;
  border-bottom: 1px solid #ccc;
}

.uni-list {
  width: 100%;
  height: 100%;
}
</style>

说明：

- `columns` 数组定义了表格的列配置，包括标题和宽度。其中，第2、3列是可选择的，需要在配置中定义 `options` 属性。
- `data` 数组定义了表格的数据，其中每个子数组代表一行数据。
- 在表格中使用了 `scroll-view` 组件，其中 `scroll-x` 和 `scroll-y` 属性分别指定了横向和纵向滚动。
- 在表格中使用了 `uni-list` 组件，实现了下拉选择框。通过 `value` 属性和 `@change` 事件，实现了联动效果。

以上代码只是一个简单的示例，具体可以根据实际需求进行修改和优化。