el-table设置边框颜色_el-table边框颜色

需求的边框颜色是透明的

1.设置表头的边框颜色

在el-table标签分别绑定两函数

:cell-style="tableCellStyle"

:header-cell-style="tableHeaderCellStyle"

        <el-table
          v-if="tableData.length !== 0"
          :cell-style="tableCellStyle"
          :header-cell-style="tableHeaderCellStyle"
          :data="tableData"
          style="width: 100%;"
        >
          <el-table-column prop="name" label="规则名称" />
          <el-table-column prop="example" label="示例" />
          <el-table-column prop="remark" label="备注">
            <template slot-scope="scope">
              <div class="remark">{{ scope.row.remark }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation" @click="toRuleDetails(scope.row)">
                <img class="eyeIcon" src="@/static/icons/eye.png" alt="">
                <span>查看</span>
              </div>
            </template>
          </el-table-column>
        </el-table>

2.在methods写绑定的两方法

    // 修改 table cell边框的背景色
    tableCellStyle() {
      return 'border-color: transparent;'
    },
    // 修改 table header cell的背景色
    tableHeaderCellStyle() {
      return 'border-color: transparent;'
    },

3.在style中设置el-table下边框颜色

/* 表格下边框颜色 */
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: transparent;
}

4.效果如下