element ui修改el-table表格边框的注意事项

9,235 阅读1分钟

问题描述

在我们使用饿了么UI框架做项目时,el-table的自带的表格边框颜色有时候需要修改一下。本文简述一下修改el-table边框样式的注意事项。

初始代码

<template>
  <div id="app">
    <el-table 
      :data="tableData" 
      style="width: 40%" 
      border
    >
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="nation" label="国别" width="180"></el-table-column>
      <el-table-column prop="bornPlace" label="出生地方"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      tableData: [
        {
          name: "刘备",
          nation: "蜀国",
          bornPlace: "涿郡涿县(河北省涿州市)",
        },
        {
          name: "曹操",
          nation: "魏国",
          bornPlace: "沛国谯县(安徽省亳州市)",
        },
        {
          name: "孙权",
          nation: "吴国",
          bornPlace: "吴郡富春县(浙江省杭州市富阳区)",
        },
        {
          name: "关羽",
          nation: "蜀国",
          bornPlace: "河东郡解县(山西省运城市盐湖区解州镇)",
        },
      ],
    };
  },
};
</script>

初始效果

第一步,加入单元格的回调

代码如下

效果如下

第二步,加入表头的回调

代码如下

效果如下

第三步,单独给表格加样式

代码如下

效果如下

总结

控制饿了么el-table的边框的样式有三种方式,单元格的回调、表头的回调、还有单独设置样式。三种方式灵活结合使用即可。

随手记录一下