当前位置:   article > 正文

el-table 去掉边框(修改颜色)_el-table去除边框

el-table去除边框

 原始:

去掉表格的border属性,每一行下面还会有一条线,并且不能再拖拽表头

 

为了满足在隐藏表格边框的情况下还能拖动表头,修改相关css即可,如下代码

  1. <style lang="less">
  2. .table {
  3. //避免单元格之间出现白色边框
  4. .el-table__row > td {
  5. border: none;
  6. }
  7. //修改表格边框颜色
  8. .el-table {
  9. --el-table-border-color: #ffffff;
  10. }
  11. }
  12. </style>

最终效果:

 

 

其它代码 

  1. <template>
  2. <div class="table">
  3. <el-table :data="tableData" border style="width: 100%">
  4. <el-table-column prop="date" label="Date" width="180"/>
  5. <el-table-column prop="name" label="Name" width="180"/>
  6. <el-table-column prop="address" label="Address"/>
  7. </el-table>
  8. </div>
  9. </template>
  1. <script lang="ts" setup>
  2. const tableData = [
  3. {
  4. date: '2016-05-03',
  5. name: 'Tom',
  6. address: 'No. 189, Grove St, Los Angeles',
  7. },
  8. {
  9. date: '2016-05-02',
  10. name: 'Tom',
  11. address: 'No. 189, Grove St, Los Angeles',
  12. },
  13. {
  14. date: '2016-05-04',
  15. name: 'Tom',
  16. address: 'No. 189, Grove St, Los Angeles',
  17. },
  18. {
  19. date: '2016-05-01',
  20. name: 'Tom',
  21. address: 'No. 189, Grove St, Los Angeles',
  22. },
  23. ]
  24. </script>
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/113678
推荐阅读
相关标签
  

闽ICP备14008679号