table行内编辑

实现table行内编辑
示例项目

image.png

点击update

image.png

出现编辑框 输入编辑值 点击save 切换会update按钮

部分源码

date 参数 主要有 
        showEdit: [], //显示编辑框
        showBtn: [] //按钮切换
<el-table-column
    :label="$t('setting.configval')"
    min-width="150">
    <template  slot-scope="{row,$index}">
        <span v-show="!showEdit[$index]">
        <b>
            {{row.configval==null?row.defaultval:row.configval}}
            <span v-if="row.valtype == 2">%</span>
        </b>
        </span>
        <el-input
            min-width="90"
            type="number"
            v-show="showEdit[$index]"
            v-model="row.configval"
            clearable>
        </el-input>
   </template>
</el-table-column>

<el-table-column v-if="this.perms.includes('systemsetting.mgmt')" :label="$t('setting.actions')" align="center" min-width="200">
  <template slot-scope="{row,$index}">
     <el-button
      size="small"
      type="warning"
      @click.native="handleUpdate($index, row)" v-if="!showBtn[$index]">{{$t('setting.update')}}</el-button>
     <el-button
      size="small"
      type="danger"
      @click.native="handleReset($index, row)" v-if="!showBtn[$index]">{{$t('setting.reset')}}</el-button> 
    <el-button
      size="small"
      type="primary"
      @click.native="handleSave($index, row,'save')" v-if="showBtn[$index]">{{$t('setting.save')}}</el-button>
      <el-button
      size="small"
      type="info"
      @click.native="handleCancel($index, row)" v-if="showBtn[$index]">{{$t('setting.cancel')}}</el-button>
  </template>
</el-table-column>

method 方法
handleCancel(index, row){
    this.showEdit[index] = false;
    this.showBtn[index] = false;
    this.getSettingList();
},
handleUpdate(index, row){
    this.showEdit[index] = true;
    this.showBtn[index] = true;
},
handleSave(index, row, type){
     //请求后台 保存数据
},
handleReset(index, row, type){
    //这边调用的是save方法 传类型为default将值初始化
    if(row.configval == null){
      this.$message.error(this.$t('setting.defaultalready'))
    }else{
      this.$confirm(this.$t('setting.surereset'), this.$t('common.message'), {
         type: 'warning',
         confirmButtonText: this.$t('common.confirm'),
             cancelButtonText: this.$t('common.cancel'),
         }).then(() => {
             row.configval = null;
             this.handleSave(index, row, 'default');
         }).catch(() => {
             return;
         }); 
      }
      this.getSettingList();
    },