鍍金池/ 問答/HTML5  HTML/ Element UI的表格雙擊之后可編輯,怎么做?

Element UI的表格雙擊之后可編輯,怎么做?

我頁面加載出來之后,會有一個排序序號.
我雙擊當(dāng)前的一行,排序序號會變?yōu)榭删庉嫚顟B(tài),失去焦點之后,會保存.
圖片描述

怎么做?我能拿到當(dāng)前的那一行的id,但是當(dāng)前哪行怎么編輯.我的代碼

                <el-table-column prop="orderCount" label="排序序號">
                    <template slot-scope="scope">
                        <div  @click="chengenum(scope.$index)">
                        <span class='abc'>{{scope.row.orderCount}}</span>
                        <el-input v-show="editable" v-model='grade'></el-input>
                        </div>
                    </template>
                </el-table-column>
                                editable:false,//這是我的顯示隱藏的變量
            chengenum(row){ //我的方法
                console.log(row)
                this.editable = true;
            },
回答
編輯回答
愛礙唉

一個布爾值來控制他是否可編輯就行了

2017年3月14日 10:30
編輯回答
孤酒

經(jīng)過我公司的大牛指導(dǎo),寫出來了.但是好像不是太懂.我代碼給各位

                <el-table-column prop="orderCount" label="排序序號">
                    <template slot-scope="{row,$index}">
                        <div  @click="{{chengenum($index)}}">
                        <el-input v-if="editable[$index]" v-model='grade'></el-input>
                        <span v-else>{{row.orderCount}}</span>
                        </div>
                    </template>
                </el-table-column>
                //這是上面的靜態(tài)

                            let arr = _this.tableData = list_date.list; //這個_this.tableData是請求數(shù)據(jù)過來之后要渲染的列表
                            let len = arr.length;
                            
                            new Array(len)
                            
                            _this.editable = new Array(len);
//                            _this.editabl這個是控制顯示隱藏的量
data(){
editable:[],
}
//這是方法
            chengenum(row){
                this.editable[row] = true;
                this.$set(this.editable,row,true)
            },
2018年2月20日 21:21
編輯回答
艷骨
 <span class='abc' @click=“setEdit($event)”>{{scope.row.orderCount}}</span>
setEdit(event){
    let target=event.target;
   //設(shè)置target的contenteditable屬性為true，

并添加target的blur事件監(jiān)聽用于更新它的值
}

2018年3月11日 19:41