赞
踩
原始:
去掉表格的border属性,每一行下面还会有一条线,并且不能再拖拽表头
为了满足在隐藏表格边框的情况下还能拖动表头,修改相关css即可,如下代码
- <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。