Element UI的表格双击之后可编辑,怎么做?

Question

我页面加载出来之后,会有一个排序序号.
我双击当前的一行,排序序号会变为可编辑状态,失去焦点之后,会保存.

怎么做?我能拿到当前的那一行的id,但是当前哪行怎么编辑.我的代码

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

Answer 1

经过我公司的大牛指导,写出来了.但是好像不是太懂.我代码给各位

                <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>
                //这是上面的静态

                            let arr = _this.tableData = list_date.list; //这个_this.tableData是请求数据过来之后要渲染的列表
                            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)
            },

Answer 2

 <span class='abc' @click=“setEdit($event)”>{{scope.row.orderCount}}</span>
setEdit(event){
    let target=event.target;
   //设置target的contenteditable属性为true，

并添加target的blur事件监听用于更新它的值
}

Answer 3

一个布尔值来控制他是否可编辑就行了