element-ui中table列宽根据设备自适应

在Element-UI中，可以使用 responsive 属性来实现表格列宽根据设备自适应。该属性可以设置为 sm、md、lg、xl，分别表示小屏幕、中等屏幕、大屏幕和超大屏幕。

例如，以下代码将表格列宽分别设置为 100px 和 200px，并且在小屏幕设备上自适应为 50% 和 50%，在大屏幕设备上自适应为 25% 和 75%：

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="name" label="姓名" width="100" :responsive="{sm: '50%', lg: '25%'}"></el-table-column>
  <el-table-column prop="age" label="年龄" width="200" :responsive="{sm: '50%', lg: '75%'}"></el-table-column>
</el-table>

在上面的例子中，我们使用了 :responsive 属性来设置表格列宽的自适应规则。如果在小屏幕设备上，列宽会自适应为 50% 和 50%。在大屏幕设备上，列宽会自适应为 25% 和 75%。

需要注意的是，responsive 属性只能在 el-table-column 组件中使用，不能在 el-table 组件中使用。同时，所有列宽的和应该等于表格的宽度，否则可能会导致表格出现滚动条。