前端在表单中修改数据

第一步

 第二步（添加使用输入框）

第三步（添加按钮）

第四步（让input和span）只显示一个

第五步（让编辑显示，其他隐藏）

第六步（√  提交 和 ×  刷新   ）

第七步 （修改价格后，变成付费视频）

 第八步（下架后才能修改）

第一步 

<el-table-column label="视频定价" align="center" prop="videoPrice" show-overflow-tooltip>
</el-table-column>

第二步

<el-table-column label="视频定价" align="center" prop="videoPrice" show-overflow-tooltip>
  <template slot-scope="scope">
    <span>￥</span><span > {{scope.row.videoPrice}}</span>
    <el-input  style="width:60px;" v-model="scope.row.videoPrice"/>
  </template>
</el-table-column>

 第三步

<el-table-column label="视频定价" align="center" prop="videoPrice" show-overflow-tooltip>
  <template slot-scope="scope">
    <span>￥</span><span> {{scope.row.videoPrice}}</span>
    <el-input  style="width:60px;" v-model="scope.row.videoPrice"/>
    <el-button icon="el-icon-edit" type="text"></el-button>
    <el-button icon="el-icon-check" type="text"></el-button>
    <el-button icon="el-icon-close" type="text"></el-button>
  </template>
</el-table-column>

第四步

在data中先定义一个modifyPrice（默认为true）

modifyPrice: true,

<el-table-column label="视频定价" align="center" prop="videoPrice" show-overflow-tooltip>
  <template slot-scope="scope">
    <span>￥</span><span  v-show="modifyPrice"> {{scope.row.videoPrice}}</span>
    <el-input  style="width:60px;"  v-show="!modifyPrice" v-model="scope.row.videoPrice"/>
    <el-button icon="el-icon-edit"  type="text"></el-button>
    <el-button icon="el-icon-check" type="text"></el-button>
    <el-button icon="el-icon-close" type="text"></el-button>
  </template>
</el-table-column>

给编辑一个点击事件（点击为false）

<el-table-column label="视频定价" align="center" prop="videoPrice" show-overflow-tooltip>
  <template slot-scope="scope">
    <span>￥</span><span  v-show="modifyPrice"> {{scope.row.videoPrice}}</span>
    <el-input  style="width:60px;"  v-show="!modifyPrice" v-model="scope.row.videoPrice"/>
    <el-button icon="el-icon-edit"  type="text" v-model="scope.row.videoPrice" @click="modifyPrice = false"/>
    <el-button icon="el-icon-check" type="text"/>
    <el-button icon="el-icon-close" type="text"/>
  </template>
</el-table-column>

第五步

<template slot-scope="scope">
  <span>￥</span><span  v-show="modifyPrice"> {{scope.row.videoPrice}}</span>
  <el-input  style="width:60px;"  v-show="!modifyPrice" v-model="scope.row.videoPrice"/>
  <el-button icon="el-icon-edit"  type="text" v-if="modifyPrice==true " v-model="scope.row.videoPrice" @click="modifyPrice = false"/>
  <el-button icon="el-icon-check" type="text" v-else-if="!modifyPrice"/>
  <el-button icon="el-icon-close" type="text" v-if="!modifyPrice"/>
</template>

第六步

<template slot-scope="scope">
  <span>￥</span><span  v-show="modifyPrice"> {{scope.row.videoPrice}}</span>
  <el-input  style="width:60px;"  v-show="!modifyPrice" v-model="scope.row.videoPrice"/>
  <el-button icon="el-icon-edit"  type="text" v-if="modifyPrice==true " v-model="scope.row.videoPrice" @click="modifyPrice = false"/>
  <el-button icon="el-icon-check" type="text" v-else-if="!modifyPrice" @click="updatePrice(scope.row) "/>
  <el-button icon="el-icon-close" type="text"v-if="!modifyPrice" @click="resetPrice"/>
</template>

//关闭刷新
resetPrice() {
  this.getList();
  this.modifyPrice = true;
},

//修改价格
updatePrice(val) {
  this.form.id = val.id;                       
  this.form.videoPrice = val.videoPrice       //将id和价格传过去
  this.modifyPrice = true;                    //关闭√和× 
  if (this.form.id != null) {                 //id为空判断
    updateVideo(this.form).then(res => {      //调用提交接口
      if (res.code === 200) {
        this.msgSuccess("修改成功");
        this.getList();
      }
    })
  }
},

第七步

//修改价格
updatePrice(val) {
  this.form.id = val.id;
  this.form.videoPrice = val.videoPrice
  this.modifyPrice = true;
  if (val.videoPrice <= 0) {
    this.form.videoStatus = '2'  //价格小于等于0 变成付费
  } else {
    this.form.videoStatus = '1'
  }
  if (this.form.id != null) {
    updateVideo(this.form).then(res => {
      if (res.code === 200) {
        this.msgSuccess("修改成功");
        this.getList();
      }
    })
  }
},

 第八步

<template slot-scope="scope">
  <span>￥</span><span  v-show="modifyPrice || scope.row.isPutaway == '1'"> {{scope.row.videoPrice}}</span>
  <el-input  style="width:60px;"  v-show="!modifyPrice && scope.row.isPutaway == '0'" v-model="scope.row.videoPrice"/>
  <el-button icon="el-icon-edit"  type="text" v-if="modifyPrice==true && scope.row.isPutaway == '0' " v-model="scope.row.videoPrice" @click="modifyPrice = false"/>
  <el-button icon="el-icon-check" type="text" v-else-if="!modifyPrice && scope.row.isPutaway == '0'" @click="updatePrice(scope.row) "/>
  <el-button icon="el-icon-close" type="text"v-if="!modifyPrice && scope.row.isPutaway == '0'" @click="resetPrice"/>
</template>