The table of Element UI can be edited after double click. What can I do?

after my page loads, there will be a sort number.
when I double-click the current row, the sort number will become editable and will be saved after losing focus.

what do I do? I can get the id, of the current line, but how to edit the current line. My code

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

it was written under the guidance of Daniel of our company. But I don't seem to understand it very well. I'll give you the code

.
                <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)
            },

 <span class='abc' @click="setEdit($event)" >{{scope.row.orderCount}}</span>
setEdit(event){
    let target=event.target;
   //targetcontenteditabletrue

and add target's blur event listener to update its value
}


A Boolean value to control whether he is editable

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e80c81-68272.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e80c81-68272.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?