表格双击编辑
代码
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);
});
效果图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述