vue 实现el-table组件 点击某一行出现输入框可以编辑

1. 页面部分

imput主要部分: 

:disabled="scope.row.checked" v-model="scope.row.feedingPolicyTitle"/>

按钮主要部分:

                    v-if="scope.row.checked == true"
                    :disabled="disabledBtn" @click="feedingStrategyOpen(scope.row)">
                   编辑
               
                                    v-if="scope.row.checked == false"
                     @click="feedingStrategyEditOpen(scope.$index, scope.row)"
                     class="refresh-button">
                    更新
               

 

2. data部分

data() {
    return {
        disabledBtn: false,
},

3.事件部分

//从后台获取的全部数据
getParams() {
     allFeedingStrategy('get', {
                        
     }).then(res => {
         if (res.code == 200) {
             this.tableDataFeedingStrategy = res.data.records;
             this.tableDataFeedingStrategy.forEach(ele => {
                 ele.checked = true
             })
                            
         } else {
            this.$message.error(res.desc)
      } 
},

//表格事件    {
         if (res.code == 200) {
                      
         } else {
            this.$message.error(res.desc)
      } 
     
},

4.例   点击编辑后,只编辑当前行数据,其他行编辑按钮禁用了