Vue - 我如何设置 Element-UI 数据表的样式?

Posted

技术标签:

【中文标题】Vue - 我如何设置 Element-UI 数据表的样式?【英文标题】:Vue - how can i style an Element-UI datatable? 【发布时间】:2021-04-29 19:46:07 【问题描述】:

我正在尝试将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',
          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>

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

【问题讨论】:

【参考方案1】:

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

选项 1:使用像 row-class-name 这样的道具:

<el-table
  row-class-name="myrow"
>
.myrow 
  background-color: red !important;

选项2:直接使用tr(或tdth等)修改CSS

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

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

【讨论】:

如果我可以问,最后一件事:所以如果我将它设置为红色,行的背景将是红色的,但我不喜欢的是每行之间有分隔行的白线,有没有办法编辑那条线的颜色?我浏览了文档,但没有找到任何文档 这是在td 上设置的。试试这个:.el-table td border-bottom: 0px !important; 【参考方案2】:

尝试深度选择器

.variableName>>>.el-table
  background-color: red !important;

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

【讨论】:

以上是关于Vue - 我如何设置 Element-UI 数据表的样式?的主要内容,如果未能解决你的问题,请参考以下文章

打字稿 + Vue + Element-ui

Laravel + Vue + element-ui 前端项目一 留言评论 7

VUE之Element-ui的Table表格不能自适应

Vue如何覆盖element-ui的css样式

vue如何循环渲染element-ui中table内容

Vue中使用Element-UI实现表格跨页多选