element表格禁止输入_elementUi 表格双击编辑 输入框赋值后不可编辑的坑

表格双击编辑

代码

html

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%;">

prop="score"

label='评分'

width="105"

align="center">

v-model="scope.row.score"

@blur="removeClass"

@change="handleEdit($event, scope.$index, scope.row)"

@input="valueChange($event)">

{{scope.row.score}}

js

//点击单元格

cellClick(row, column, cell, event) {

for(let i=0;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);

});

效果图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述