table的行字段折叠效果

Question

问题描述

我想实现点击试算后，产品名称之后的才显示出来，之前都不显示的，类似于折叠的效果，该如何实现呢？用三目运算符吗？

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div class="" style="margin-left:10px;margin-top:10px;margin-bottom:10px;">
    <i-button type="success" icon="md-add" @click="addnew">新增</i-button>&nbsp&nbsp&nbsp
    <i-button type="primary" @click="spreadsheet">试算</i-button>
</div>

<tr ref="item" v-for="(item,index) in items" :id="index">
        <td><i-input v-model="item.STOCKCODE" size="small" placeholder="请输入"/></td>
        <td><i-input v-model="item.QUANTITY" size="small" placeholder="请输入"/></td>
        <td><i-input v-model="item.PRICE" size="small" placeholder="请输入"/></td>
        <td><i-input v-model="item.BUSINESS" size="small" placeholder="请输入"/></td>
        <td class="green_bg4">深A股票普通买卖</td>
        <td class="green_bg4">1</td>
        <td class="green_bg4">1</td>
        <td class="green_bg4">9</td>
        <td class="green_bg4">5</td>
        <td class="green_bg4">5555</td>
    </tr>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

如果只是简单的显示隐藏右边的，用一个布尔值来控制显示隐藏

Answer 2

给表格使用v-if绑定一个参数如isShow，默认给布尔值false的，点击试算，在试算的调用的方法里把isShow装换true;如this.isShow = true