雙擊哪個(gè)單元格就編輯哪個(gè)單元格，先上效果圖，
實(shí)現(xiàn)思路：
在單元格下添加一個(gè)模板，模板里面有正常狀態(tài)的span和編輯狀態(tài)的input框，雙擊顯示input框，input框失去焦點(diǎn)顯示span
實(shí)現(xiàn)代碼：
<el-table-column prop="name" label="姓名" width="120">
? ? ? ? ? <template scope="scope">
? ? ? ? ? ? ? <div @dblclick="boxClick(scope.row)">
? ? ? ? ? ? ? ? ? <el-input v-if="scope.row.nameFlag" v-model="scope.row.name"
? ? ? ? ? ? ? ? ? placeholder="請(qǐng)輸入內(nèi)容"
? ? ? ? ? ? ? ? ? v-on:blur="inputblur(scope.row)" v-focus></el-input>
? ? ? ? ? ? ? ? ? <span v-else>{{scope.row.name}}</span>
? ? ? ? ? ? ? </div>
? ? ? ? ? </template>
? ? ? </el-table-column>
數(shù)據(jù)：
{
? ? ? ? ? date: "2016-05-03",
? ? ? ? ? name: "王小虎",
? ? ? ? ? nameFlag: false,??
? ? ? ? ? address: "上海市普陀區(qū)金沙江路 1518 弄",
? ? ? ? },
涉及到的方法：
// 雙擊模板里面的div容器，使input框顯示
boxClick(row){
? ? ? ? row.nameFlag = true
? ? },
// input框失去焦點(diǎn) span顯示
inputblur(row) {
? ? ? ? row.nameFlag = false
? ? },
因?yàn)轲I了么的input框 有非常好用的v-model雙向數(shù)據(jù)綁定，所以綁定之后修改的就是對(duì)象數(shù)據(jù)，
還有一個(gè)注意點(diǎn)：
本來寫完后以為大功告成，測(cè)了下，發(fā)現(xiàn)點(diǎn)擊別處的時(shí)候，模板里面的input框不消失，就是根本不調(diào)用inputblur，想了想，發(fā)現(xiàn)是input框出現(xiàn)的時(shí)候，沒有自動(dòng)獲取焦點(diǎn)的功能。對(duì)于這種需要循環(huán)的表格來說，如果使用dom操作不太方便，萬幸vue有一個(gè)自定義指令，這樣自動(dòng)獲取焦點(diǎn)會(huì)很方便，代碼如下：
directives: {
? ? // 注冊(cè)一個(gè)局部的自定義指令 v-focus
? ? focus: {
? ? ? // 指令的定義
? ? ? inserted: function(el) {
? ? ? ? // 聚焦元素
? ? ? ? el.querySelector("input").focus();
? ? ? }
? ? }
? },
