vue element ui 实现表格内编辑

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)

      },