elementUI无法通过this.$refs动态改变样式？

Question

用了elementUI中的弹框，需求是点击弹框内的按钮后，内部弹框的宽度改变
本来想通过

//this.$refs.elDialog.style.width = '1500px'   //1
//this.$refs.elDialog.width = '1500px'      //2

第一句，width的值是能改变，也不报错，但是实际样式宽度没有改变
第二句，直接报错

runner-3.25.5.min.js:1 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "width"

found in

---> <ElDialog>... (1 recursive calls)
       <Root>

这是代码

请问一下这种情况应该怎么解决？？

Answer 1

谢谢上面两位的回答。但是两位的方法我都实践过了，都是不行呢。
所以我直接加了这个方法暴力改变宽度了

            changeWidth(){
                let element = document.querySelector("#elDialog>.el-dialog")
                element.style.width = '1500px'
            },

因为用this.$refs.elDialog绑定的elementUI组件的话，
直接 this.$refs.elDialog.style.width = '1500px' 的权限是不够高的，就是说虽然能改变，但是是无法展示。

如果用this.$refs.elDialog.width = '1500px'的话，由于我是用的区域是数据父组件（相对于elementUI的dialog组件来说，这里嵌套了很多层了），所以是无法直接改变子组件的数据的。

Answer 2

你需要加
setTimeout(function(){
            _this.$refs.elDialog.width = '1500px'
              console.log('this.$refs.elDialog',this.$refs.elDialog);
},0)

或这可以:width='' 绑定Dialog 的width

Answer 3

this.$nextTick(() => {
    this.$refs.elDialog.width = '1500px'
})

确保元素渲染再改宽度

另外我觉得框弹框并不是一个非常好的交互额。。。