el-table min-width不起作用
时间: 2023-12-27 14:24:06 浏览: 54
在Vue的Element UI中,如果你想将el-table-column的宽度设置为百分比,不能直接通过设置width属性来实现,而是需要设置min-width属性,并且每一列都必须设置min-width。这是因为el-table-column的宽度是由其内容决定的,而不是由width属性决定的。
以下是一个示例代码,演示如何使用min-width属性来设置el-table-column的宽度为百分比:
```html
<template>
<el-table :data="tableData">
<el-table-column
prop="name"
label="姓名"
:min-width="100"
></el-table-column>
<el-table-column
prop="age"
label="年龄"
:min-width="200"
></el-table-column>
<el-table-column
prop="gender"
label="性别"
:min-width="300"
></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
],
};
},
};
</script>
```
在上面的代码中,每一列的min-width属性都设置了具体的数值,这样就可以实现el-table-column的宽度为百分比。