element ui表格可编辑 和 v-if 和 v-show的区别

今天要做一个表格来展示数据,但是其中某一项是要可以编辑的,然后写一下大致的思路顺便贴一下代码,感觉有点拉。我是在数据对象当中添了一项,我是使用this.$set( 返回的数据, isTable ,true )当我请求到数据的时候然后我往里面添了一个isTable有条件的可以让后台给返回的boolean 值。

<el-table-column label="xx''  prop="esEnergy" header-align="center" align="center">
      <template slot-scope="scope">
         <span v-if="scope.row.isTable"  @click="handlebtnClick(scope,minTable)">
         	{{ scope.row.esEnergy }}
         </span>
         <el-input v-else size="small" v-model="scope.row.esEnergy" @blur="handleInputBlur(scope,minTable)" />
      </template>
</el-table-column>

然后不就是有手就行 判断一下当前的数据是点击的还是失去焦点的,当失去焦点的时候 保存一下当前的数据。

然后里面我用的是span 但是要设置一下它的宽高 ,或者你用其他块级标签也可以

里面我用的 v-if 来进行判断的 v-if 和 v-show 有什么区别那?我又为什么会用v-if那
v-if 元素是被销毁和重新渲染的,使用在不需要频繁切换较的场景下
那 v-show 是使用 css属性display:none来进行隐藏的,因为它不用销毁所以它适合频繁切换的场景下

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值