el-table removes borders (modifies color)

 original:

Remove the border attribute of the table, there will be a line under each row, and the table header can no longer be dragged

 

In order to be able to drag the table header while hiding the table border, just modify the relevant css, as follows:

<style lang="less">
.table {
  //避免单元格之间出现白色边框
  .el-table__row > td {
    border: none;
  }

  //修改表格边框颜色
  .el-table {
    --el-table-border-color: #ffffff;
  }
}
</style>

final effect:

 

 

Other codes 

<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>