vue-element 计数器渲染问题

问题描述

在表格中使用element-ui计数器功能时，出现增减按钮无效的情况，无法进行数据变化。

后通过网上进行查询并找到解决方式。原因是由于操作后表格数据数组没有进行渲染操作。

<el-table-column align="center" prop="levels" label="优先级" width="200">
     <template slot-scope="scope">
        <el-input-number :value="scope.row.levels"
			controls-position="right"
			size="small"
			@change="handleChangeLevels(scope.row,$event)"
			:min="0" :max="10">
		</el-input-number>
	</template>
</el-table-column>

解决方案

使用 this.$set进行数据改变操作，因为vue的数据的双向绑定功能，所以表格的数组的数据发生变化时表格中的数据也会同步

表格数据
	<el-table size="medium " :data="produceData" 
		tooltip-effect="dark"  border style="width: 100%" >
       	<el-table-column align="center" prop="levels" label="优先级" width="200">
        	<template slot-scope="scope">
            	<el-input-number :value="scope.row.levels"  
					controls-position="right" 
					size="small"  
					@change="handleChangeLevels(scope.row,$event)" 
					:min="0" :max="10">
				</el-input-number>
			</template>
        </el-table-column>
   	</el-table>

		js操作
	handleChangeLevels (row, val) {
		console.log(row)
		console.log(val)
		this.produceData.map(v => {
			console.log(v.id)
			if (row.id === v.id) {
				this.$set(v, 'levels', val) //通过$set设置数据集合里面的参数进行渲染
			}
		})
	},