小权kasa:奇偶行elementUI修改css样式

认真撸代码的小权

已于 2023-04-23 16:51:07 修改

阅读量184

点赞数

文章标签： react.js 前端框架

于 2023-04-23 16:34:45 首次发布

本文链接：https://blog.csdn.net/CircaOVO/article/details/130324924

版权

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1;
      if (index % 2 == 0) {
        return "warning-row";
      }
    }
  }
};
</script>
<style scoped>
/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #1e116d;
  color:white
}
/deep/.el-table td,
.building-top .el-table th.is-leaf {
  border: none;
  /* color: white; */
}

/* /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #1e116d;
} */
</style>