背景：
首先感叹vue真的是博大精深。项目开发中遇到这样一个功能，根据数组中的数据动态设定el-image的显示隐藏。

1. 问题代码：

test.vue中代码：

<el-table :data="resRSData" :highlight-current-row="false" height="100%">
   <el-table-column type="selection" min-width="1" />
   <el-table-column label="缩略图" min-width="1.5">
     <template slot-scope="scope">
       <el-image v-if="editLayer.indexOf(scope.row.name) === -1" :src="chartletImgNoUrl" class="thumbnailEyeCss" @click="addThumbnailsFun(scope.row)" />
       <el-image v-else :src="chartletImgUrl" class="thumbnailClass" @click="removeThumbnailsFun(scope.row)" />
     </template>
  </el-table-column>
</el-table>                           

test.vue中

1. 方法addThumbnailsFun中，_this.editLayer.push(row.thxpaceCode)的执行，会提示“editLayer”为undefined。
2. 方法removeThumbnailsFun中，_this.editLayer.splice(index, 1)的执行，会提示“editLayer”为undefined。
3. 根据如下方式获取到的_this.editLayer包含“ob: Observer”，其中的这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。一般情况可以用JSON.parse(JSON.stringify(this.editLayer))进行深度拷贝，但是这里拷贝不过来，所以采用了下面的方法进行问题的解决。
   我们一起往下看吧！o(￣▽￣)ブ

export default {
  data() {
    return {
		editLayer: [], // 数据名称存储
		}
	},
	/**
		 * @description 显示第一张图片，隐藏第二张图片
		*/
		addThumbnailsFun(row) {
			const _this = this
			_this.editLayer.push(row.name)
			_this.$refs.mapRef.addThumbnails(row)
		},
		/**
		 * @description 隐藏第一张图片，显示第二张图片
		*/
		removeThumbnailsFun(row) {
			const _this = this
			console.log(row)
			const index = _this.editLayer.indexOf(row.name)
			_this.editLayer.splice(index, 1)
			_this.$refs.mapRef.removeThumbnails(row)
		}
}

2. 解决问题代码：

test.vue中代码：

<el-table :data="resRSData" :highlight-current-row="false" height="100%">
   <el-table-column type="selection" min-width="1" />
   <el-table-column label="缩略图" min-width="1.5">
     <template slot-scope="scope">
       <el-image v-if="editLayer.indexOf(scope.row.name) === -1" :src="chartletImgNoUrl" class="thumbnailEyeCss" @click="addThumbnailsFun(scope.row)" />
       <el-image v-else :src="chartletImgUrl" class="thumbnailClass" @click="removeThumbnailsFun(scope.row)" />
     </template>
  </el-table-column>
</el-table>   

test.vue中

export default {
  data() {
    return {
		editLayer: [], // 数据名称存储
		}
	},
	/**
		 * @description 显示第一张图片，隐藏第二张图片
		*/
		addThumbnailsFun(row) {
			const _this = this
			if (_this.editLayer.indexOf(row.name) === -1) {
				_this.editLayer.push(row.name)
				_this.$refs.mapRef.addThumbnails(row)
			}
		},
		/**
		 * @description 隐藏第一张图片，显示第二张图片
		*/
		removeThumbnailsFun(row) {
			const _this = this
			console.log(row)
			const index = _this.editLayer.indexOf(row.name)
			if (_this.editLayer.indexOf(row.name) !== -1) {
				_this.editLayer.splice(index, 1)
				_this.$refs.mapRef.removeThumbnails(row)
			}
		}
}

解决方法：
通过判断数组中是否包含新增的数据，从而决定对数组的增删。最后实现editLayer数组在v-if中的使用。

今天的分享就到这里啦，如果哪里有什么描述不到位的地方，请各位提出宝贵意见呦！
加油！奥里给