Element ui中Table给单元格加缩进圆角效果

LXXgalaxy

已于 2023-11-30 14:07:32 修改

阅读量994

点赞数

分类专栏： elementUI 文章标签： vue.js elementui scss 前端框架前端

于 2023-02-16 12:13:51 首次发布

本文链接：https://blog.csdn.net/galaxyJING/article/details/129058390

版权

elementUI 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

先上一个效果图

解决方案：

要用到三个row-style、header-cell-style、cell-style

template：


<template>
<el-table
  :row-style="tableCellClassName"
  :header-cell-style="tableHeaderStyle"
  :cell-style="cellStyle"
  :data="dataListOtherAll"
  ></el-table>
</template>

script：


//表格头部样式
    tableHeaderStyle(column) {
      let styleRes = {
        "background": "#F2F8FD !important",
        "border-radius": "16px",
        "border": "4px solid #FFFFFF!important",
      }
      let headItem ={
        "background": "#FFFFFF !important",
      }
      if (column.columnIndex === 0) {
        return headItem;
      }else{
        return styleRes
      }
    },
//单元格
tableCellClassName({columnIndex}) {
      if (columnIndex == 0) {
        return 'cell-start'
      } else if (columnIndex == 9) {
        return 'cell-end'
      } else {
        return 'cell-middle'
      }
    },
//单元格样式
    cellStyle(column) {
      if ( column.columnIndex === 0){
        return "background-color: #F2F8FD; color: #0A1832; border-radius: 16px; margin-left: 15px;border: 8px solid #FFFFFF!important;"
      }else if ( column.columnIndex === 25){
        return "background-color: #D2E0FC; color: #3A78F2; border-radius: 16px; margin-left: 15px;border: 8px solid #FFFFFF!important;"
      }else{
        return "background-color: #E7EFFF; color: #0A1832; border-radius: 16px; margin-left: 15px;border: 8px solid #FFFFFF!important;"
      }
    },
</script>