vue实现elementUI表格列之间有间隔
时间: 2024-01-18 16:19:05 浏览: 111
vue2+elementui 实现table表格列分割
3星 · 编辑精心推荐
要实现 ElementUI 表格列之间有间隔,可以通过覆盖 ElementUI 表格的默认样式来实现。具体方法如下:
1. 通过 scoped slot 来自定义表格列的内容,添加自定义的样式。
2. 在样式表中为表格列添加 margin 或 padding 属性,来控制列之间的间隔。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column label="姓名" prop="name">
<template slot-scope="{ row }">
<div class="table-column-item">{{ row.name }}</div>
</template>
</el-table-column>
<el-table-column label="年龄" prop="age">
<template slot-scope="{ row }">
<div class="table-column-item">{{ row.age }}</div>
</template>
</el-table-column>
<el-table-column label="性别" prop="gender">
<template slot-scope="{ row }">
<div class="table-column-item">{{ row.gender }}</div>
</template>
</el-table-column>
</el-table>
</template>
<style scoped>
.table-column-item {
margin-right: 20px; /* 列之间的间隔 */
}
</style>
```
在上面的示例中,我们通过 scoped slot 来自定义表格列的内容,并为表格列添加了一个自定义的样式类 table-column-item,用来控制列之间的间隔。在样式表中,我们为这个样式类添加了 margin-right 属性,来控制列之间的间隔。
希望这个方法可以帮到你!
阅读全文