现象

element ui 时间控件报错:

  [plaintext]
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: "placement "

代码实现

  [xml]
1
2
3
4
5
6
7
8
9
<el-date-picker size="mini" v-model="emp.birthday" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 150px" > </el-date-picker>

解决方式1-降低版本

将element-ui的版本降至 2.15.6以下(包含2.15.6)

  [plaintext]
1
npm install element-ui@2.15.6

解决方式 2

为什么报错?

之前遇到问题时,虽然这个问题暂时并不会影响页面操作,但担心会有其他隐患,关键浏览一直报错,强迫症都犯了。百度后发现网上大部分都是说版本问题,2.15.9 开始的,新版本中加了placement这个变量。旧版本不报错,可以退回旧版本就不会报错,具体退回的步骤可参考其他博客的内容。

但感觉回退版本这种方法治标不治本,测试后发现还是要提供placment的赋值数据,其实在于后面的 PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left 这里,组件需要根据align或left属性来赋值,查阅官方文档后发现:

原因

picker有align属性,经过测试后发现果然和align有关,随之问题迎刃而解,只要在组件添加align属性即可。

如这里我添加align=”center” ,element UI原生组件获取添加的align属性值来设置props中的placement变量

  [xml]
1
2
3
4
5
6
7
8
<el-form-item label="时间:"> <el-date-picker v-model="value2" type="date" align="center" placeholder="时间选择"> </el-date-picker> </el-form-item>

添加完成后就再进行测试,浏览器再也没有报错了。

参考资料

https://blog.csdn.net/geidongdong/article/details/122561517

https://www.cnblogs.com/myqinyh/p/15743881.html

https://blog.csdn.net/qq_43780761/article/details/126188211