标签:mini item classname 数据 编辑 index html temp highlight
如题 需要点击表格某一行,让其变成可编辑状态
html:
<el-table-column prop="remark" label="备注"> <template slot-scope="{row, $index}"> <div @click.stop="{{changeNum($index,‘editRemarkInput‘)}}"> <el-input v-if="editable[$index]" v-model="row.remark" size="mini" class="editRemarkInput" ></el-input> <span v-else>{{row.remark}}</span> </div> </template> </el-table-column>
js:
changeNum(index, className){ //设置是否可以编辑 // tableList为表格数据 this.editable = new Array(this.tableList.length); this.editable[index] = true; this.saveItem = this.tableList[index]; this.$set(this.editable, index, true); //让input自动获取焦点 this.$nextTick(function() { var editInputList = document.getElementsByClassName(className); editInputList[0].children[0].focus(); }); },
标签:mini item classname 数据 编辑 index html temp highlight
原文地址:https://www.cnblogs.com/suiyide/p/11597946.html