如何修改element-ui的table两列列的间距
时间: 2023-07-27 16:19:00 浏览: 202
HTML+Element-ui邮件管理前端界面manage_.zip
要修改element-ui的table两列列的间距,可以通过设置`<el-table-column>`标签的`:style`属性来实现。可以为某个列设置一个CSS样式,来控制该列的宽度和与相邻列的距离。例如,如果你想将第一列的宽度设置为100px,第二列的宽度设置为200px,并将它们之间的间距设置为10px,可以这样写:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" :style="{width: '100px', marginRight: '10px'}"></el-table-column>
<el-table-column prop="age" label="年龄" :style="{width: '200px', marginLeft: '10px'}"></el-table-column>
</el-table>
```
其中,`:style`属性的值为一个CSS样式对象,可以为某个列设置任意的样式。在上面的例子中,我们将第一列的宽度设置为100px,将其与第二列之间的间距设置为10px;将第二列的宽度设置为200px,将其与第一列之间的间距设置为10px,从而实现了列之间的间距效果。你可以根据实际情况调整列的样式,来控制列之间的间距。
阅读全文