在使用el-table-column的时候,发现v-show不会起作用

<el-table-column v-if="['partner', 'final_leader'].includes(editType)" prop="partner" label="合伙人" header-align="center" align="center" width="200">
              <template>
                <el-table-column v-for="(single, index) of selfData" :label="single.label" header-align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.$index === tableData.length - 1" :disabled="showEdit('partner')">{{ scope.row.partnerValue }}</div>
                    <el-select
                      v-else-if="index === 0 && scope.row.quota_dict !== YDYESORNO"
                      v-model="scope.row.partnerValue"
                      :disabled="showEdit('partner')"
                      placeholder="请选择"
                      @change="partnerChange(scope.row, scope.$index)"
                    >
                      <el-option v-for="item in options" :key="item.value" :label="item.value" :value="item.text" />
                    </el-select>
                    <el-checkbox v-else-if="index === 0 && scope.row.quota_dict === YDYESORNO" v-model="scope.row.partnerValue" :disabled="showEdit('partner')" label="是" />
                    <el-input v-else-if="index === 1" v-model="scope.row.partnerReson" :disabled="showEdit('partner')" clearable />

                  </template>
                </el-table-column>
              </template>
            </el-table-column>

el-table-column会生成多行标签元素,根据v-show是不支持template语法的,推断出v-show不能显示隐藏多个元素,所以这种情况下只能用v-if来实现.
v-show是修改style,将display置为none,必定会渲染
v-if是将元素不断从dom里面增加或者删除,false不会渲染
如果元素是动态显示隐藏的,推荐使用v-show

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值