element ui时间日期选择器el-date-picker报错Prop being mutated:”placement”解决方式

问题描述：

在使用Element UI中的el-date-picker组件时，会出现如下错误：

"Prop being mutated, vue will not trigger updates on this case"

同时在控制台中会出现如下警告：

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"

问题分析：

这个错误提示是因为el-date-picker组件中的属性被直接修改，而vue组件不允许直接修改props中传递的属性值，而应该通过临时变量来存储修改后的值，在合适的时机将其传递给父组件。

解决方法：

1. 使用计算属性代替直接修改props属性

使用计算属性代替直接修改props属性是解决问题的最简单方法。VueJS提供了计算属性来处理这种情况，我们可以通过计算属性定义一个新的属性，并在计算属性的get和set方法中对新属性进行操作。

例如，在使用el-date-picker组件时，我们需要修改默认的展示位置，可以通过计算属性进行修改：

<template>
  <el-date-picker v-model="date" :picker-options="pickerOptions" :placement="placement"></el-date-picker>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },
  computed: {
    placement() {
      // 修改默认位置为bottom-start
      return 'bottom-start'
    }
  }
}
</script>

1. 使用prop传递复杂对象

以上方法也适用于通过prop传递的复杂对象。在这种情况下，我们需要确保不会改变对象的原始数据和属性，而是通过分配到一个新变量，对分配后的对象进行修改。

例如，在使用v-tooltip组件时，可以将绑定的数据存储在一个包含显示位置的对象中：

<template>
  <div>
    <button v-tooltip="tooltipData">Hover Me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipData: {
        content: 'Welcome to my tooltip!',
        placement: 'right'
      }
    };
  }
}
</script>

以上就是ElmentUI时间日期选择器el-date-picker报错Prop being mutated:"placement"的解决方式的完整攻略，通过使用计算属性或者传递复杂对象，我们可以避免直接修改props中传递的属性值，以保障代码的正确性和可维护性。