Vue修改elment-ui组件的el-aside的width

172 阅读 0 评论 114 点赞

我是靠谱客的博主优美小兔子，这篇文章主要介绍Vue修改elment-ui组件的el-aside的width，现在分享给大家，希望可以做个参考。

<el-aside width="200px" ref="aside">
</el-aside>

会发现通过this.$ref.aside.style.width='auto'或者指定值，会发现控制台直接报错，修改不生效。

换种做法将200px作为属性计算，进行双向绑定数据

<el-aside :width="wth">
</el-aside>

const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
        wth:'200px'
    },
    methods: {
        changeAside() {
        	this.wth = 'auto'  //修改成功，这种方式相当于直接修改html上的值，会重新渲染
        }
    }
})