Vue刷新某个组件，不改变组件的数据

前言

在写组件的时候要求这样一个功能，当表格拖动列宽（无论拖多少次），点击图标后，表格恢复初始的宽度，并且页面的数据不发生改变。在网上查询了很久后，发现这样一种方法可行。

先上效果图：
这是原本表格的样式及数据：

当我通过复制图标，复制了两条数据，并改变了列宽后：

然后通过点击恢复列宽的图标，将表格的列宽恢复至初始状态：

由图可见，表格列框已恢复到了初始状态，但表格的数据并没有恢复至初始状态，而是保留了页面的当前状态。

下面是代码：

<template>
  <div class="operation">
	<!-- 恢复列宽的图标 -->
	<svg-icon class="icon-class" iconClass="spacing" @click="handleUpdateClick" />
	<!-- 表格 -->
	<el-table
	    :data="CurtableData"
	     :key="key"
	   >
	     <slot></slot>
	</el-table>
</div>
</template>

<script>
export default {
  name: "OperateTable",
  data() {
    return {
      key:0,
      CurtableData: this.value,
    };
  },
  props: {
    value: Array, //双向绑定的table数据
  },
  methods: {
    //恢复列宽
    handleUpdateClick(){
      this.key += 1 ;
    }
  },
};
</script>

实现原因：

:key="key"此处可触发watch和update

vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。