ElementUI框架双击table表格单元格组件实现编辑和修改内容

正常状态：

可编辑状态：

实现代码：

<template>
	<el-table 
	:header-cell-style="{ textAlign: 'center' }" 
	:data="tableData"
	border fit highlight-current-row style="width: 100%" @cell-dblclick="editCell">
		<template slot="empty">
			<div class='nonedata'><p>暂无数据</p></div>
		</template>
		<el-table-column prop="id" label="序号" align="center" width="50">
		</el-table-column>
		<el-table-column prop="name" label="大区名称" align="center">
			<template slot-scope="scope">
				<div v-if="row===scope.row.id && col===scope.column.id">
					<!-- 仅在输入框失去焦点或用户按下回车时触发"更新数据操作" -->
					<el-input placeholder="placeholder" v-model="scope.row.name" @change="updateData">
					</el-input>
				</div>
				<div v-else>
					{{ scope.row.name }}
				</div>
			</template>
		</el-table-column>
	</el-table>
</template>
<script type="text/javascript">
	//切换右侧导航选中项
	switchTab(6);
	var game = new Vue({
		el: '#game',
		data: function() {
			return {
				row: "",
				/*编辑单元格：行*/
				col: "",
				/*编辑单元格：列*/
				tmpRow: "",
				/*编辑单元格：临时行数据*/
				tableData: [],
			}
		},
		/*初始化*/
		created: function() {},
		methods: {

			/*编辑单元格*/
			editCell: function(row, column) {
				this.row = row.id;
				this.col = column.id;
				this.tmpRow = row;
			},
			/*更新单元格数据*/
			updateData() {
				$.post('{:url("后端控制器地址")}', this.tmpRow,function(data) {
					if (data.code == 1) {
						toastr.success(data.msg);
					} else {
						toastr.error(data.msg);
					}
				});
			},
		}
	});
</script>