elementUi 表格双击编辑输入框赋值后不可编辑的坑

最新推荐文章于 2025-03-19 14:42:24 发布

itammie

最新推荐文章于 2025-03-19 14:42:24 发布

阅读量2.8k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43593142/article/details/106670888

版权

表格双击编辑

代码
html

<el-table
	id="table_1"
    :row-class-name="tableRowClassName_1"
    :data="tableData_1"
    :summary-method="getSummaries"
    show-summary
    highlight-current-row @cell-click="cellClick"
    style="width: 100%;">
	<!-- 部分代码省略 -->
	<el-table-column 
	    prop="score"
	    label='评分'
	    width="105"
	    align="center">
	    <template slot-scope="scope">
	        <el-input
	         v-model="scope.row.score"
	         @blur="removeClass"
	         @change="handleEdit($event, scope.$index, scope.row)"
	         @input="valueChange($event)">
	        </el-input>
	        <span>{{scope.row.score}}</span>
	    </template>
	</el-table-column>
</el-table>

//点击单元格
cellClick(row, column, cell, event) {
    for(let i=0;i<document.getElementsByClassName('current-cell').length;i++){
        document.getElementsByClassName('current-cell')[i].classList.remove('current-cell');
    }
    cell.classList.add("current-cell");
},
removeClass(){
    document.getElementsByClassName('current-cell')[0].classList.remove('current-cell');
},
//提交分数
handleEdit(val, index,row) {}

css

.handle-box .el-input {   //handle-box是包裹的div名
  display: none;
}
.current-row .current-cell .el-input {
  display: block;
}
.current-row .current-cell .el-input + span {
  display: none;
}

输入框不可编辑，框内一直显示绑定的值

原因：
在这里插入图片描述
获取的后端数据并没有score属性，将后端数据赋值给tableData_1，此时创建的tableData_1并没有score属性，所以输入框编辑不了，输入框的值为undefined。
代码

// 获取数据
getData() {
    Evaluation_index(this.query).then(res => {
        if(res.code === 200){
        	this.tableData_1 = res.data.list;
            this.tableData_1.forEach(element => {
                element["score"] = 5;
                element["show"] = false;
            });
        }
        else{
            alert(res.msg);
        }   
    }).catch(err =>{
        alert(err);
});

修改：
先修改获取的后端数据，再赋值给表格数据。

// 获取数据
getData() {
     Evaluation_index(this.query).then(res => {
         if(res.code === 200){
             res.data.list.forEach(element => {
                 element["score"] = 5;
                 element["show"] = false;
             });
             this.tableData_1 = res.data.list;
         }
         else{
             alert(res.msg);
         }   
     }).catch(err =>{
         alert(err);
     });