Element UI 动态生成表格设置列宽：使用 v-for 和 v-bind

您可以使用`v-bind`指令来动态设置`el-table-column`的宽度。在`v-for`循环中，您可以为每个列定义一个宽度属性，并将其绑定到`el-table-column`的`width`属性上。

以下是一个示例，展示如何根据不同的列设置表格的宽度：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :label="column.label"
      :width="column.width"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { label: 'Column 1', prop: 'col1', width: '100px' },
        { label: 'Column 2', prop: 'col2', width: '200px' },
        { label: 'Column 3', prop: 'col3', width: '150px' },
      ],
      tableData: [
        { col1: 'Data 1', col2: 'Data 2', col3: 'Data 3' },
        { col1: 'Data 4', col2: 'Data 5', col3: 'Data 6' },
        { col1: 'Data 7', col2: 'Data 8', col3: 'Data 9' },
      ],
    };
  },
};
</script>

在上面的示例中，我们使用`v-for`循环遍历`columns`数组，并为每个列定义了一个`width`属性。这些宽度属性绑定到`el-table-column`的`width`属性上，以设置不同列的宽度。

请注意，`width`属性的值可以是一个字符串，用于设置固定宽度，也可以是一个数字，用于设置相对宽度（例如百分比）。