el-table fixed-columns的详细使用方法

`el-table` 的 `fixed-columns` 属性允许你固定表格的一列或几列，使其在整个页面滚动时保持静止。这个特性非常适用于数据表展示，特别是当数据较多，需要关注某些固定信息的时候。

下面是 `el-table` 使用固定列的基本步骤：

1. **导入依赖**：
首先，在你的 Vue 文件中引入 Element UI 的 Table 组件和相应的 CSS 样式：

   import { ElTable, ElTableColumn } from "element-plus";

2. **设置模板**：
在你的模板中，创建一个包含 `ElTable` 组件，并配置 `fixed-columns` 属性：

   <el-table
     :data="tableData"
     :fixed-columns="fixedColumns"
     style="width: 100%"
   ></el-table>

其中，`tableData` 是你的数据源，`fixedColumns` 是一个数组，用于指定哪些列应固定。

3. **配置 fixedColumns**：
对于每一列你想要固定的，创建一个 `ElTableColumn` 对象，然后在 `fixedColumns` 数组中加入它们：

   export default {
     data() {
       return {
         tableData: ...,
         fixedColumns: [{ column: { prop: 'yourFixedColumnProp', width: 100 }, align: 'center' }],
         // 可能有多个固定的列
         // fixedColumns: [
         //   { column: { prop: 'firstFixedColumnProp', width: 100 }, align: 'center' },
         //   { column: { prop: 'secondFixedColumnProp', width: 200 }, align: 'left' },
         //   ...
         // ]
       };
     }
   };

每个对象包含 `column` 和可选的样式属性，如宽度 (`width`) 和对齐 (`align`)。

4. **其他选项**：
- `position`：如果固定列需要左右两侧固定，可以设置 `'left'` 或 `'right'`。
- `offset`：设置列在固定位置上的偏移量。

5. **注意点**：
- 固定列的总宽度不应超过表格的总宽度，否则会自动调整其他非固定列的宽度。
- 固定列的数据会随着表格一起渲染，因此需要确保它们也有对应的 `data`。