el-table去除边框
时间: 2023-11-07 15:06:14 浏览: 238
vue3 el-table多级表头收缩扩展的实现(JS原味版)
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`类是自定义的,你可以根据实际情况进行修改。
阅读全文