介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,& lt; title> & lt;/title>
,& lt; link rel=皊tylesheet",类型=拔谋?css", href=癰ootstrap.min.css",在
,& lt; style 类型=拔谋?css"比;
,,table tr td {
,,,text-align:中心;
,,}
.btn-info{才能
,,,margin-left: 5 px;
,,}
阀门,.addBox{才能
,,,保证金:10 px 0 px 10 px 10 px;
,,}
。submit{才能
,,,margin-left: 172 px;
,,}/*才能全删*/.delAll{才能
,,,margin-left: 10 px;
,,}/*新才能增*/自定义字段才能{
,,,margin-left: 10 px;
,,}
,& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt; button 类=癰tn btn-primary btn-sm addBox", @click=癮ddBox"在添加& lt;/button>
& lt; button 类=癰tn btn-sm btn-danger delAll", @click=癲elAll"在批量删除& lt;/button>
,& lt; table 类=皌able table-bordered",在
,& lt; thead>
,& lt; tr>
& lt;才能td> & lt; input 类型=癱heckbox", @click=癮llSelect", v模型=癱hecked"祝辞& lt;/td>
& lt;才能td>学号& lt;/td>
& lt;才能td>姓名& lt;/td>
& lt;才能td>年纪& lt;/td>
& lt; td>才能操作& lt;/td>
,& lt;/tr>
,& lt;/thead>
,& lt; tbody>
& lt;才能tr v=叭?index 人民在拷贝
& lt;才能td> & lt; input 类型=癱heckbox", v模型=皊elected", v-bind: value=皃erson.sid"祝辞& lt;/td>
& lt;才能td @click=氨嗉?索引)“,contenteditable=皌rue"在{{person.sid}} & lt;/td>
& lt;才能td @click=氨嗉?索引)“,contenteditable=皌rue"在{{person.sname}} & lt;/td>
& lt;才能td @click=氨嗉?索引)“,contenteditable=皌rue"在{{person.sage}} & lt;/td>
& lt;才能td> & lt; button @click=暗露?索引)“,类=癰tn btn-danger btn-sm"在删除& lt;/button> & lt; button @click=案?索引)“,类=癰tn btn-info btn-sm"祝辞编辑& lt;/button> & lt;/td>
& lt;才能/tr>
,& lt;/tbody>
,& lt;/table>
& lt; fieldset v-show=皊een",比;
,& lt; legend>新增用户& lt;/legend>
,& lt; div 类=?“在
,& lt; p>
& lt;才能label>学号:& lt;/label>
& lt;才能input 类型=皌ext", v模型=皀ewPeople.sid"比;
,& lt;/p>
,& lt; p>
& lt;才能label>姓名:& lt;/label>
& lt;才能input 类型=皌ext", v模型=皀ewPeople.sname"比;
,& lt;/p>
,& lt; p>
& lt;才能label>年龄:& lt;/label>
& lt;才能input 类型=皀umber", v模型=皀ewPeople.sage"比;
,& lt;/p>
,& lt; p>
& lt;才能button 类=癰tn btn-success btn-sm submit", @click=癮dd"在提交& lt;/button>
,& lt;/p>
& lt;/div>
时间/fieldset> & lt;
& lt; !——,编辑界面,——比;
& lt; fieldset v-show=癳ditSeen"祝辞
,& lt; legend>编辑用户& lt;/legend>
& lt; div 类=?“在
,& lt; p>
& lt;才能label>学号:& lt;/label>
& lt;才能input 类型=皌ext", v模型=癳ditPeople.sid", value=皗{sid}}“比;
,& lt;/p>
,& lt; p>
& lt;才能label>姓名:& lt;/label>
& lt;才能input 类型=皌ext", v模型=癳ditPeople.sname", value=皗{sname}}“比;
,& lt;/p>
,& lt; p>
& lt;才能label>年龄:& lt;/label>
& lt;才能input 类型=皀umber", v模型=癳ditPeople.sage", value=皗{圣人}}“比;
,& lt;/p>
,& lt; p>
& lt;才能button 类=癰tn btn-success btn-sm submit", @click=癳ditSubmit"在提交& lt;/button>
,& lt;/p>
& lt;/div>
时间/fieldset> & lt;
& lt;/div>
,& lt; script 类型=拔谋?javascript", src=皏ue.min.js"祝辞& lt;/script>
,& lt; script 类型=拔谋?javascript"比;
,var data ={
,,,的人:[,
,,,,{& # 39;sid # 39;: & # 39; 1043 & # 39;, & # 39; sname # 39;: & # 39;张三& # 39;,& # 39;圣人# 39;:18},,
,,,,{& # 39;sid # 39;: & # 39; 2434 & # 39;, & # 39; sname # 39;: & # 39;赵六& # 39;,& # 39;圣人# 39;:43},,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要介绍Vue。js怎么实现可编辑的表,格文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
