vue实现行内编辑

<div id="app">
	<div class="inline_box">
		<div class="table_box">
			<!-- 表头 -->
			<div class="table_title">
				<div class="counle">id</div>
				<div class="counle">姓名</div>
				<div class="counle">技能</div>
				<div class="counle">爱好</div>
				<div class="counle">操作</div>
			</div>

			<!-- body -->
			<div class="table_content" v-for="(item,i) in inlineEdit" :key="item.id">
				<div class="counle" v-text="item.id"></div>
				<div>
					<div class="counle" v-text="item.sname" v-if="i!=index"></div>
					<input class="counle" type="text" v-model="form.sname" v-else />
				</div>
				<div>
					<div class="counle" v-text="item.skill" v-if="i!=index"></div>
					<input class="counle" type="text" v-model="form.skill" v-else />
				</div>
				<div>
					<div class="counle" v-text="item.hobby" v-if="i!=index"></div>
					<input class="counle" type="text" v-model="form.hobby" v-else />
				</div>
				<div class="btn_box">
					<div class="counle" @click="buttons(0,i)" v-if="i!=index">
						<span class="edit">编辑</span>
					</div>
					<div class="counle cancel_preservation" v-else>
						<span class="cancel" @click="buttons(1,i)">取消</span>
						<span class="preservation" @click="buttons(2,i)">保存</span>
					</div>
				</div>
			</div>

		</div>

		<!-- 结果 -->
		<div class="result_box">
			<div class="result" v-for="(item,i) in result" :key="i">{{item.key}}: {{item.value}}</div>
		</div>
	</div>
</div>

1. 导入 vue：<script src="/node_modules/vue/dist/vue.js"></script>
2. 导入 axios：<script src="/node_modules/axios/dist/axios.min.js"></script>
3. 数据是通过 axios 请求 json 文件获取

new Vue({
	el: "#app",
	data: {
		inlineEdit: [],
		index: null,
		form: {
			sname: '',
			skill: '',
			hobby: ''
		},
		result: []
	},

	mounted() {
		this.getData();
	},

	methods: {
		getData() {
			let that = this;
			axios.get('../json/jsonData.json').then(response => {
				that.inlineEdit = response.data.inlineEdit;
			}).catch(reason => {
				console.log('出错啦');
			});
		},
	
		buttons(type, i) {
			if (type == 0) {
				this.form = {
					sname: this.inlineEdit[i].sname,
					skill: this.inlineEdit[i].skill,
					hobby: this.inlineEdit[i].hobby
				};
				this.result = [];
				this.index = i;
			} else if (type == 1) {
				this.getData();
				this.index = null;
			} else {
				let result = [];
				this.inlineEdit[i].sname = this.form.sname;
				this.inlineEdit[i].skill = this.form.skill;
				this.inlineEdit[i].hobby = this.form.hobby;
				for (const key in this.inlineEdit[i]) {
					if (Object.hasOwnProperty.call(this.inlineEdit[i], key)) {
						const element = this.inlineEdit[i][key];
						result.push({
							key: key,
							value: element
						});
					}
				}
				this.result = result;
				this.index = null;
			}
		}
	}
});