原始:
去掉表格的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>