vue单行快捷编辑

Posted 2021-07-25 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue单行快捷编辑相关的知识，希望对你有一定的参考价值。

1、html 部分

<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>

2、javascript 部分

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;
			}
		}
	}
});

3、css 部分

input {
	margin: 0;
	padding: 0;
	outline: none;
}
        
.inline_box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
        
.table_box {
	border: 1px solid #999;
	padding: 10px;
	box-sizing: border-box;
}
        
.table_title {
	display: flex;
	justify-content: center;
	align-items: center;
}
        
.table_title>div {
	text-align: center;
}
        
.table_content {
	display: flex;
	justify-content: center;
	align-items: center;
}
        
.btn_box {
	text-align: center;
}
        
.cancel_preservation {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
        
.edit,
.preservation {
	color: blue;
	cursor: pointer;
}
        
.cancel {
	color: #888;
	cursor: pointer;
}
        
.counle {
	border: 1px solid #999;
	width: 130px;
	line-height: 30px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
        
.result_box {
	margin-top: 26px;
}
        
.result {
	margin: 6px 0;
	font-weight: 600;
}