Vue - how can i style an Element-UI datatable?

user_13873088 0
Viewed 1340

I'm trying to add an element ui datatable to my project, but i'm having an hard time figuring how to change the color of the table. Here is what i have:

<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',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-04',
          name: 'Morgan',
          address: 'No. 189, Grove St, Los Angeles'
        }, {
          date: '2016-05-01',
          name: 'Jessy',
          address: 'No. 189, Grove St, Los Angeles'
        }],

        search: '',
      }
    },

    methods: {
      handleEdit(index, row) {
        console.log(index, row.name);
      },
      handleDelete(index, row) {
        console.log(index, row.name);
      }
    },
  

}

</script>

Everything i tried here doesn't seem to have any effect on the table, nothing changes. I also tried with background-color or other classes, such as .el-table but nothing worked. Any kind of advice is appreciated

element-ui vuejs2 vue-component vue.js css
2 Answers

Setting the table background color didn't work because the rows have a background color by default that shows on top. The datatable provides multiple props for styling or you could target the row directly in CSS. In either case, it seems you'll need the !important modifier or it doesn't overwrite the default styles:

Option 1: Using a prop like row-class-name:

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

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

Option 2: Modifying the CSS directly using tr (or td, th, etc.)

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

(Or you could use a more specific selector to avoid the need for !important if modifying directly, if that matters to you.)

user_21850930

try deep selector

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