el-table怎么显示所有边框
时间: 2024-09-25 11:15:54 浏览: 78
vue修改Element的el-table样式的4种方法
在Element UI的el-table组件中,如果你想让表格的所有列都显示边框,你需要设置table的样式,特别是在tbody部分。你可以通过`.el-table__body tr`类来选择所有的表格行,然后设置`border`属性。
下面是一个简单的示例,展示如何全局启用表格边框:
```html
<style scoped>
.el-table {
border-collapse: collapse; /* 合并相邻单元格的边框 */
}
.el-table__body tr {
border-bottom: 1px solid #ccc; /* 设置每行底部的边框 */
border-left: 1px solid #ccc; /* 设置左侧的边框 */
border-right: 1px solid #ccc; /* 设置右侧的边框 */
}
</style>
<template>
<el-table :data="tableData" style="width: 100%">
<!-- ... -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [...] // 表格数据
};
}
};
</script>
```
这里假设你想要的是默认的灰色细线边框,你可以根据自己的需求调整颜色和宽度。
阅读全文