Vue - 如何为 Element-UI 数据表设置样式？

问题描述

我正在尝试将 element ui datatable 添加到我的项目中，但我很难弄清楚如何更改表格的颜色。这是我所拥有的：

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    <el-table-column
      label="Name"
      prop="name">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="Type to search"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index,scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index,scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>

.thead {
  color: red;
}
.el-table thead {
  color: red;
}

</style>

<script>

export default {

  props:{


  },data() {
      return {
        tableData: [{
          date: '2016-05-03',name: 'Tom',address: 'No. 189,grove St,Los Angeles'
        },{
          date: '2016-05-02',name: 'John',{
          date: '2016-05-04',name: 'Morgan',{
          date: '2016-05-01',name: 'Jessy',Los Angeles'
        }],search: '',}
    },methods: {
      handleEdit(index,row) {
        console.log(index,row.name);
      },handleDelete(index,row.name);
      }
    },}

</script>

我在这里尝试的所有内容似乎对桌子没有任何影响，没有任何变化。我也尝试过 background-color 或其他类，例如 .el-table 但没有任何效果。任何形式的建议表示赞赏

解决方法

设置表格背景颜色不起作用，因为默认情况下，行的背景颜色显示在顶部。数据表提供 multiple props 用于样式设置，或者您可以直接在 CSS 中定位行。无论哪种情况，您似乎都需要 !important 修饰符，否则它不会覆盖默认样式：

选项 1：使用 row-class-name 之类的道具：

<el-table
  row-class-name="myrow"
>

.myrow {
  background-color: red !important;
}

选项 2：直接使用 tr（或 td、th 等）修改 CSS

.el-table tr {
  background-color: red !important;
}

（或者，如果直接修改，您可以使用更具体的选择器来避免需要 !important，如果这对您很重要。）

,

尝试深度选择器

.variableName>>>.el-table{
  background-color: red !important;
}
.variableName/deep/.el-table{
  background-color: red !important;
}