vue修改Element的el-table样式的4种方法

欢迎阅读我的分享！这里是关于vue修改Element的el-table样式的4种方法的详细讲解。

1. 修改scoped样式

我们可以在vue组件中通过<style scoped>标签修改组件样式。

<template>
  <div>
    <el-table :data="tableData" 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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2022-01-01',
          name: '张三',
          address: '上海市普陀区'
        }, {
          date: '2022-01-02',
          name: '李四',
          address: '北京市海淀区'
        }, {
          date: '2022-01-03',
          name: '王五',
          address: '广州市天河区'
        }],
      }
    }
  }
</script>

<style scoped>
.el-table__header {
  background-color: #f5f5f5;
}
.el-table__row:hover {
  background-color: #f5f5f5;
}
</style>

在上面的例子中，我们使用了<style scoped>标签来修改了el-table组件中的表头与表格行的样式。

2. 使用CSS选择器覆盖样式

在<style scoped>中设置样式时，经常会遇到scoped样式优先级不够的问题。在这种情况下，我们可以使用CSS选择器覆盖样式。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" class="table">
      <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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2022-01-01',
          name: '张三',
          address: '上海市普陀区'
        }, {
          date: '2022-01-02',
          name: '李四',
          address: '北京市海淀区'
        }, {
          date: '2022-01-03',
          name: '王五',
          address: '广州市天河区'
        }],
      }
    }
  }
</script>

<style scoped>
.table .el-table__header {
  background-color: #f5f5f5;
}
.table .el-table__row:hover {
  background-color: #f5f5f5;
}
</style>

在上面的例子中，我们使用了.table .el-table__header和.table .el-table__row:hover选择器来修改了el-table组件中的表头与表格行的样式。

3. 使用覆盖样式文件

我们可以在项目的覆盖样式文件中修改Element组件的样式。覆盖样式文件位于src/assets/theme目录下，文件名为element-variables.scss。

// 不需要修改的变量可以不进行定义，会使用默认样式
$--color-primary: #409EFF;
$--border-radius-base: 4px;

// 引入element-ui的scss文件
@import '/node_modules/element-ui/packages/theme-chalk/src/index.scss';

// 覆盖el-table组件的样式
.el-table__header {
  background-color: #f5f5f5;
}
.el-table__row:hover {
  background-color: #f5f5f5;
}

在上面的例子中，我们使用了覆盖样式文件来修改了el-table组件中的表头与表格行的样式。

4. 使用深度选择器

在某些情况下，Element组件的样式可能会被第三方组件库或者全局样式覆盖。这时，我们可以使用深度选择器来强制修改组件的样式。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" class="table">
      <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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2022-01-01',
          name: '张三',
          address: '上海市普陀区'
        }, {
          date: '2022-01-02',
          name: '李四',
          address: '北京市海淀区'
        }, {
          date: '2022-01-03',
          name: '王五',
          address: '广州市天河区'
        }],
      }
    }
  }
</script>

<style scoped>
>>> .el-table__header {
  background-color: #f5f5f5;
}
>>> .el-table__row:hover {
  background-color: #f5f5f5;
}
</style>

在上面的例子中，我们使用了>>>深度选择器来修改了el-table组件中的表头与表格行的样式。注意，使用深度选择器可能会造成样式的全局污染，因此不要轻易使用。