elementui table 设置 tr的间隔 和样式

<template>
     <section class="tableData">
          <el-table :data="list" style="width: 100%;"
            @selection-change="handleSelectionChange" :cell-style="rowClass" :header-cell-style="headClass">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" align="center" width="60px">
              <span slot-scope="scope">
                {{ params.size * params.page + 1 + scope.$index }}
              </span>
            </el-table-column>
           </el-table>
    </section>
</template>

<script>
method:{
//这里回调 设置每行的样式
 rowClass() {
        // return 'background:#E6F1FF;color:#368CFF;font-size:13px'
        return ' border-top: 1px solid #1753ac;border-bottom: 1px solid #1753ac; background: rgba(16, 37, 118, 0.5);'
      },
      headClass() {
        return ' color: #2AFCFD ;border-top: 1px solid #1753ac;border-bottom: 1px solid #1753ac; background: rgba(16, 37, 118, 0.5);'
      },
}
</script>
<style lang="scss" scoped>
  /deep/ .el-table__body {
    border-collapse: separate;
    border-spacing: 0 20px;
  }

  ::v-deep table tr {
    height: 55px;
  }

/*当遇到"/deep/"的时候会将"/deep/"的位置替换成组件的hash值,解析成*/
/*/deep/ 和 ::v-deep, 除了报错, 感觉没有区别, 渲染效果都一样*/
</style>

感谢3位作者:

elemtnui table 修改某行文字颜色
https://blog.csdn.net/tianpeng1996/article/details/119653223

Vue 中scoped 和 deep 的用法深究 :
https://www.cnblogs.com/linm/p/12933383.html

/deep/和>>>和::v-deep
https://www.jianshu.com/p/72a9e0dfdfb4