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

原创已于 2023-04-23 16:51:07 修改 · 391 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #前端框架

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

该代码示例展示了如何在Vue.js应用中使用ElementUI的el-table组件来渲染表格数据，并通过自定义行类名实现条纹样式。同时，还修改了表格的默认样式以增强视觉效果。

<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>