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

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

Answer 4

这个基于 ElementUI 的封装组件可编辑表格应该可以解决你的需求，可以参考这里 github