表格雙擊編輯

代碼
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>

js

//點(diǎn)擊單元格
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');
},
//提交分?jǐn)?shù)
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;
}

輸入框不可編輯，框內(nèi)一直顯示綁定的值

原因：

在這里插入圖片描述

// 獲取數(shù)據(jù)
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);
});

修改：
先修改獲取的后端數(shù)據(jù)，再賦值給表格數(shù)據(jù)。

// 獲取數(shù)據(jù)
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);
     });

效果圖

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述