Vue Element-UI el-aside组件永远有一个300px的width

Vue Element-UI el-aside组件永远有一个300px的width

问题发生

前端学艺不精，所以所写的前端代码层次也没有特别高，久闻Element-UI有布局相关的组件，但是从来没有使用过，最近写代码心血来潮，决定使用element-UI布局组件 + vue-router的嵌套路由写一个稍微美观点的代码。但是没想到刚用就碰到了坑。

---

问题描述

网页结构组成使用 el-container包含el-aside和el-main组合的结构，简要代码如下：

<template>
  <el-container>
    <el-aside id="aside-style">
      ...
    </el-aside>

    ...
  </el-container>
</template>

<style scoped>
  #aside-style {
    min-width: 160px;
    max-width: 280px;
    width: 18%;
    ...
  }
</style>

但是发现<el-aside>组件宽度不对，并且永远保持同一个宽度，查看网页源码发现

永远都有一个元素宽度属性被添加，导致最终的宽度错误。

---

问题排查

1. 首先对全局的300px数值进行全局搜索，查看是不是因为代码某处设置了宽度，导致的问题。结果并没有发现可疑的设置。
2. 检查代码是否正确作用，确定对aside-style的相关设置已经作用到了<el-aside>组件上，只是宽度被覆盖，手动去除覆盖的元素样式，<el-aside>组件正常运作。
3. 直接查看<el-aside>组件源码，发现其接受一个width值，并使用元素样式设定这个值，若没有传width值，则默认指定width为300px，破案了。

---

解决方案和总结

根本原因

<el-aside>组件中的源码如下，但是设定了默认的宽度，所以在没有指定宽度的时候，会按照默认的宽度进行设定，且优先级极高。

<template>
  <aside class="el-aside" :style="{ width }">
    <slot></slot>
  </aside>
</template>

<script>
  export default {
    name: 'ElAside',

    componentName: 'ElAside',

    props: {
      width: {
        type: String,
        default: '300px'
      }
    }
  };
</script>

解决方案

使用代码：

<el-aside id="aside-style" width="18%">
  ...
<el-aside>

指定宽度18%后，宽度按照指定样式显示

总结

问题解决后，查看Element-UI的官方文档发现，在文档底部的组件属性说明中，已经指出对于<el-aside>、<el-header>和<el-footer>三个组件，都有默认的宽度或高度，所以在使用时需要对此进行特别关注；同时，遇到错误的时候，可以直接查找官方文档相关内容，这是一个非常直接和简单的获得建议和解决问题的方向。

---

如有错误，欢迎指摘。也欢迎通过各种渠道与我讨论交流。