vue单行快捷编辑

1、html 部分

<div id="app"> <div class="inline_box"> <div class="table_box">  <div class="table_title"> <div class="counle">id <div class="table_content" v-for="(item,i) in inlineEdit" :key="item.id"> <div class="counle" v-text="item.id"> <div class="result_box"> <div class="result" v-for="(item,i) in result" :key="i">{{item.key}}: {{item.value}} 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; } 

4、说明

1. 需要自己下载 vue 和 axios 导入页面 2. 演示属于移动端的微信小程序，会与 PC 端不同，代码逻辑不同，实现思路和逻辑不同，结果也会有所不同，功能基本一致。本文章以 PC 端为准 3. WX：MJ2506562048

5、演示