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

1. 页面部分

imput主要部分: 

<el-input type="text" class="ellipsis"

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

按钮主要部分:

<el-button type="primary" plain size="mini" 
                    v-if="scope.row.checked == true"
                    :disabled="disabledBtn" @click="feedingStrategyOpen(scope.row)">
                  <i class="el-icon-edit"></i>&nbsp;编辑
               </el-button>
               <el-button type="primary" plain size="mini" 
                    v-if="scope.row.checked == false"
                     @click="feedingStrategyEditOpen(scope.$index, scope.row)"
                     class="refresh-button">
                   <i class="el-icon-refresh"></i>&nbsp;更新
               </el-button>

<div style="margin-top: 10px">
    <el-table
       :row-class-name="tableRowClassName"
       border class="disabled-table"
       :cell-style="{padding: '0'}"
       :row-style="{height: '55px'}"
       :data="tableDataFeedingStrategy"
       style="width: 100%;margin: 0 auto;">

      <el-table-column  property="feedingPolicyTitle" label="饲喂名称" width="168">
            <template slot-scope="scope">
               <el-input type="text" class="ellipsis"
                   :disabled="scope.row.checked"
                   v-model="scope.row.feedingPolicyTitle"/>
            </template>
       </el-table-column>
                        
      <el-table-column label="操作" width="260">
           <template slot-scope="scope">
               <el-button type="primary" plain size="mini" 
                    v-if="scope.row.checked == true"
                    :disabled="disabledBtn" @click="feedingStrategyOpen(scope.row)">
                  <i class="el-icon-edit"></i>&nbsp;编辑
               </el-button>
               <el-button type="primary" plain size="mini" 
                    v-if="scope.row.checked == false"
                     @click="feedingStrategyEditOpen(scope.$index, scope.row)"
                     class="refresh-button">
                   <i class="el-icon-refresh"></i>&nbsp;更新
               </el-button>
               <el-button type="info" 
                     v-if="scope.row.checked == false" @click="getParams"
                                           size="mini">
                    <i class="el-icon-close"></i>&nbsp;取消
                </el-button>
             </template>
       </el-table-column>
   </el-table>
</div>

 

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)
      } 
},

//表格事件   <el-table :row-class-name="tableRowClassName"
tableRowClassName({row}) {
      if (row.checked == false) {
           return 'strategy-row';
      }
},

//编辑操作事件
feedingStrategyOpen(row) {
     row.checked = false;
     this.disabledBtn = true;
     this.tableRowClassName({row})
},

//策略更新数据
feedingStrategyEditOpen(index, row) {
    this.disabledBtn = false;
    console.log(row)
    
    allFeedingStrategy('get', { //这里执行更新请求发送后台
                        
     }).then(res => {
         if (res.code == 200) {
                      
         } else {
            this.$message.error(res.desc)
      } 
     
},

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