el-table加边框
时间: 2023-11-24 16:49:31 浏览: 69
el-table加边框需要设置border属性,但是默认情况下只有表头和外边框添加了边框属性,单元格没有纵向边框的显示。如果想要单元格也显示边框,可以通过以下两种方法实现:
方法一:使用CSS样式设置单元格边框
```css
.el-table td, .el-table th {
border: 1px solid #dcdfe6;
}
```
方法二:使用element-ui提供的border属性
```html
<el-table :data="tableData" border>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
以上两种方法都可以实现el-table单元格的边框显示,具体选择哪种方法可以根据实际情况进行选择。
相关问题
el-table 表头边框
el-table 表头边框可以通过设置表格的 border 属性来实现。具体来说,可以将 border 设置为字符串类型的值,如 "full"、"default" 或者 "none",也可以将其设置为一个对象,对象中可以包含 size、color 和 style 三个属性,分别用于设置边框的宽度、颜色和样式。
例如,以下代码可以实现表头有边框的效果:
```html
<el-table :data="tableData" border>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
el-table去除边框
el-table去除边框的方法是通过修改相关的CSS样来实现。你样式中设置el__row > td的border属性为none来去除单元格之间的边框。同时,你还可以修改el-table的边框颜色,通过设置--el-table-border-color属性来改变。下面是一个示例代码:
```html
<style lang="less">
.table {
/* 避免单元格之间出现白色边框 */
.el-table__row > td {
border: none;
}
/* 修改表格边框颜色 */
.el-table {
--el-table-border-color: #ffffff;
}
}
</style>
<template>
<div class="table">
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="Date" width="180"/>
<el-table-column prop="name" label="Name" width="180"/>
<el-table-column prop="address" label="Address"/>
</el-table>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
{ date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
{ date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
{ date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
]
</script>
```
请注意,上述代码中的`.table`类是自定义的,你可以根据实际情况进行修改。