vue table组件列动态变宽

可以通过绑定 `:style` 属性来动态设置列的宽度。首先，需要在表头中定义每列的宽度，比如：

<el-table-column prop="name" label="姓名" :width="100"></el-table-column>
<el-table-column prop="age" label="年龄" :width="80"></el-table-column>
<el-table-column prop="address" label="地址" :width="200"></el-table-column>

然后，在表格的数据源中添加一个属性来控制每列的宽度，比如：

data() {
  return {
    tableData: [
      { name: '张三', age: 18, address: '北京市朝阳区' },
      { name: '李四', age: 20, address: '上海市浦东区' },
      { name: '王五', age: 22, address: '广州市天河区' }
    ],
    columnWidths: {
      name: 100,
      age: 80,
      address: 200
    }
  }
},

接下来，在表格组件中绑定 `:style` 属性，动态设置每列的宽度：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :width="columnWidths.name" :style="{ width: columnWidths.name + 'px' }"></el-table-column>
  <el-table-column prop="age" label="年龄" :width="columnWidths.age" :style="{ width: columnWidths.age + 'px' }"></el-table-column>
  <el-table-column prop="address" label="地址" :width="columnWidths.address" :style="{ width: columnWidths.address + 'px' }"></el-table-column>
</el-table>

这样，当 `columnWidths` 对象中的值发生变化时，表格列的宽度也会随之改变。