0 定義表格編輯的狀態
<span style="display:none">{{showBtn}}</span>
1.表格內使用
<el-table-column label="實收金額（元）">
<template slot-scope="{row,$index}">
<el-input v-if="showBtn[$index]" type="text" v-model="row.orderPrice" size="small"></el-input>
<span v-if="!showBtn[$index]" >{{row.orderPrice}}</span>
</template>
</el-table-column>
2 操作欄中方法使用
<el-table-column label="操作" width="135">
<template slot-scope="{row,$index}" class="template">
<el-button disabled v-if="!showBtn[$index]" type="text" size="small" @click="editer(row,$index)">編輯</el-button>
<!-- {{row.editerStatus}} -->
<!-- {{showBtn[$index]}} -->
<span v-if="showBtn[$index]">
<el-button type="text" size="small" @click="operation(row, $index,false)">取消</el-button>
<el-button type="text" size="small" @click="operation(row, $index,true)">確定</el-button>
</span>
</template>
</el-table-column>
3.data(){}
showBtn: {}, //顯示編輯狀態
4.methods ：{}
/* 編輯表單 */
editer(row, index){
// 關閉其他編輯
this.$set(this.showBtn,row,false)
for(let k=0;k<this.userlist.length;k++){
this.showBtn[k] = false;
}
this.showBtn[index] = true;
// row.editerStatus = true
this.$set(this.showBtn,row,true)
},
operation(row, index,type){
if(type){ //確定
console.log('編輯：',row)
console.log('編輯：', index)
console.log('編輯：',type)
}else{//取消
}
this.showBtn[index] = false;
this.$set(this.showBtn,row,false)
},