uni-app 插件需求 实现app表格左侧固定列且内容过多自动换行

在uni-app中实现表格左侧固定列且内容过多自动换行，可以通过自定义组件和CSS样式来完成。以下是一个基本的实现案例，展示了如何创建一个表格组件，并设置左侧固定列和内容自动换行。

1. 创建表格组件

首先，创建一个名为FixedTable.vue的组件文件：

<template>
  <view class="table-container">
    <view class="table-header">
      <view class="fixed-column">{{ fixedHeader }}</view>
      <scroll-view scroll-x="true" class="scrollable-columns">
        <view v-for="(header, index) in scrollableHeaders" :key="index" class="column-header">{{ header }}</view>
      </scroll-view>
    </view>
    <view class="table-body">
      <view v-for="(row, rowIndex) in data" :key="rowIndex" class="table-row">
        <view class="fixed-column">{{ row[fixedKey] }}</view>
        <scroll-view scroll-x="true" class="scrollable-columns">
          <view v-for="(cell, cellIndex) in row" :key="cellIndex" v-if="cellIndex !== fixedIndex" class="column-cell">{{ cell }}</view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    data: Array,
    fixedHeader: String,
    fixedKey: String,
    scrollableHeaders: Array
  },
  computed: {
    fixedIndex() {
      return this.scrollableHeaders.map(header => Object.keys(this.data[0] || {}).findIndex(key => key === header)).find(index => index !== -1);
    }
  }
};
</script>

<style scoped>
.table-container {
  width: 100%;
}
.fixed-column {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  word-wrap: break-word;
}
.scrollable-columns {
  display: flex;
}
.column-header, .column-cell {
  word-wrap: break-word;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.table-row {
  display: flex;
}
</style>

2. 使用表格组件

在需要使用表格的页面中引入并使用FixedTable组件：

<template>
  <view>
    <FixedTable
      :data="tableData"
      fixedHeader="Fixed Column"
      fixedKey="fixed"
      :scrollableHeaders="['Column 1', 'Column 2', 'Column 3']"
    />
  </view>
</template>

<script>
import FixedTable from '@/components/FixedTable.vue';

export default {
  components: {
    FixedTable
  },
  data() {
    return {
      tableData: [
        { fixed: 'Row 1 Fixed', 'Column 1': 'Some very long text that needs to wrap', 'Column 2': 'Data 2', 'Column 3': 'Data 3' },
        { fixed: 'Row 2 Fixed', 'Column 1': 'Another long text', 'Column 2': 'Data 2', 'Column 3': 'Data 3' },
        // More rows...
      ]
    };
  }
};
</script>

在这个例子中，我们创建了一个表格组件，其中左侧列是固定的，而其他列可以水平滚动。同时，内容过多的单元格会自动换行。这个组件可以根据实际需求进一步扩展和优化。