el-table动态编辑表格内容

el-table动态编辑表格内容

需求样式:
在这里插入图片描述
点击编辑/保存按钮切换状态,value均为输入框状态
在这里插入图片描述

  <!-- 编辑保存按钮 -->
  <div class="">
    <el-button v-show="!editing" class="btnEdit" type="primary" @click="editAll">编辑</el-button>
    <el-button v-show="editing" class="btnEdit" type="primary" @click="saveAll">保存</el-button>
  </div>

 <el-table :data="tableData">
   <el-table-column v-for="(item, index) in tableKey" :key="index" :label="item.label" :prop="item.prop">
     <template slot-scope="scope">
        <span v-if="scope.row.show&&item.prop!='executionDate'&&item.prop!='recordComeType'">
          <el-input size="mini" placeholder="请输入内容" v-model="scope.row[item.prop]"></el-input>
        </span>
        <span v-else>{{scope.row[item.prop]}}</span>
     </template>          
   </el-table-column>
 </el-table>
   editAll(){
     this.editing = true
     this.tableData.map((i, index) => {
       i.show = true   // 显示编辑input框
       i.id = i.id||''
       i.height=i.height=='--'?i.height.replace('--',''):i.height  // 编辑时清空输入框
       this.$set(this.tableData, index, i)
     })
   },
   saveAll(){
   	 this.editing = false
     this.tableData.map((i, index) => {
       i.show = false
       this.$set(this.tableData, index, i)
     })
     let arr = []
     this.tableData.map((item,idx)=>{
       if(item.height==''){return} // 将有值的传给后台
       let obj = {execution:item.executionDate,id: item.id, height:item.height,patId:this.patId}
       arr.push(obj)
     })
     updateHeightRecord(arr).then(res=>{
       this.$message.success("更新成功");
       this.listRecord()
     })     
   },
  listRecord(){
  	let param = {...}
  	listRecord(param).then(res=>{
  	  let data = res.data
      let list = data.monitorHeightRecordDTOList
      list.forEach(item=>{
        if(!item.height){
          item.height='--'
          item.recordComeType = '--'
        }else{
          item.recordComeType = JSON.stringify(item.recordComeType)==1?'医护录入':'患者录入'
        }
      })
      this.tableData = list
    }
  }    

数据格式:
数据格式

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值