ElementUI 修改默认样式的几种办法(小结)

下面我将详细讲解一下“ElementUI 修改默认样式的几种办法(小结)”的完整攻略。

样式修改方式

在使用 ElementUI 时，我们通常需要对一些默认的组件样式进行修改，以满足业务需求。下面是几种常用的样式修改方式：

1. 使用深度作用选择器

通过使用 >>> 或 /deep/，可以将样式的作用范围扩大到组件内部。例如：

<style scoped>
    .el-table /deep/ .el-table__body-wrapper {
        height: 300px;
    }
</style>

上面代码中使用 /deep/ 将样式作用范围扩大，使得 .el-table__body-wrapper 的高度能够被修改。需要注意的是，这种方式需要在样式选择器中额外添加 /deep/ 或 >>> 符号。

2. 使用覆盖样式

可以使用覆盖样式的方式来修改 ElementUI 的默认样式。例如：

/* 修改表格行高 */
.el-table tr {
    height: 50px;
}

上面的代码将表格的行高设置为了 50px。需要注意的是，这种方式可能会导致样式的不一致，因为覆盖样式会影响到所有相同的组件，在样式覆盖时要确保修改的样式不会影响其他的组件。

3. 使用自定义组件

通过自定义组件的方式，我们可以在 ElementUI 的基础上进行二次开发，实现更加灵活的样式。例如：

<template>
    <el-button class="my-button">按钮</el-button>
</template>
<style scoped>
    .my-button {
        width: 100px;
        height: 40px;
        border-radius: 4px;
        color: #fff;
        background-color: #409EFF;
    }
</style>

上面代码中，我们通过自定义组件来创建一个宽为 100px、高为 40px、背景色为 #409EFF 的按钮。需要注意的是，通过自定义组件来实现样式修改需要对 ElementUI 的源码进行一定的了解，不适合初学者使用。

示例说明

接下来，我们来看两个使用示例：

示例1：修改表格行高

下面代码演示了如何通过修改 .el-table__body-wrapper 元素的高度来修改表格的行高：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="80"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
<style scoped>
.el-table /deep/ .el-table__body-wrapper {
  height: 150px;
}
</style>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '李四',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

上面代码中，我们通过使用 /deep/ 来将样式作用到 .el-table__body-wrapper 组件内部，从而修改表格的行高。

示例2：自定义按钮

下面代码演示了如何通过自定义按钮组件来修改按钮的样式：

<template>
  <my-button></my-button>
</template>
<style scoped>
.my-button {
  width: 100px;
  height: 40px;
  border-radius: 4px;
  color: #fff;
  background-color: #409EFF;
}
</style>
<script>
export default {
  components: {
    'my-button': {
      template: '<el-button class="my-button">按钮</el-button>'
    }
  }
}
</script>

上面代码中，我们通过自定义 my-button 组件，来创建一个宽为 100px、高为 40px、背景色为 #409EFF 的按钮。我们将按钮的样式定义在了 .my-button 类中，通过在自定义组件中使用这个类来实现样式的修改。