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

我页面加载出来之后,会有一个排序序号.
我双击当前的一行,排序序号会变为可编辑状态,失去焦点之后,会保存.
【前端】Element UI的表格双击之后可编辑,怎么做?

怎么做?我能拿到当前的那一行的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;
},

回答

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

                <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;
   //设置target的contenteditable属性为true，

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

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

以上是 【前端】Element UI的表格双击之后可编辑,怎么做? 的全部内容， 来源链接： utcz.com/a/79936.html

回到顶部