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

Element-ui vue.js html5 html javascript

Mar.03,2021

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

Previous: How to make an H5 multi-person online fight landlord?

Next: Can elementui tables be sorted by combination?

What's the difference between vue's data binding and the data added to data after the loop is complete?
the existing demand is that you need to create a table with month and amount in it. because each field is the same, writing 12 identical pieces of data in data feels too redundant. I just want to write a loop and add it to data for rendering after 10 c...

Element-ui vue.js html5 html javascript

May.02,2021