Welcome to ZaiZheLe Developer Zone-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
799 views
in Technique[技术] by (71.8m points)

iview Tabs 标签页 超出当前标签页的部分被隐藏

出问题的地方:
image
检查页面元素后,发现可能是组件靠display: none,来控制标签页的显示。这就造成了超出的部分被隐藏掉了。目前没有什么好的思路解决,求教。
期望的结果是下拉框超出的部分不会被影响到
image

相关代码

 <TabPane label="事件维度" name="tab2" >
   <div class="tabDiv">
       <Row>
        <Col span="12">
            <FormItem label="地域范围">
                <Input v-model="formValidate.eventDimension.spaceAttribute.diYuFanWei" clearable></Input>
            </FormItem>
        </Col>
        <Col span="12">
            <FormItem label="人员伤亡">
                <!-- <Input v-model="formValidate.eventDimension.spaceAttribute.renYuanShangWang" clearable></Input> -->
                <Select v-model="formValidate.eventDimension.spaceAttribute.renYuanShangWang" clearable>
                   <Option v-for="item in select_items.casualties_List" :value="item.dictValue" :key="item.id">{{ item.dictLabel }}</Option>
                </Select>
            </FormItem>
        </Col>
    </Row>
      <Row>
        <Col span="12">
            <FormItem label="装备损失">
                <Input v-model="formValidate.eventDimension.spaceAttribute.zhuangBeiSunShi" clearable></Input>
            </FormItem>
        </Col>
        <Col span="12">
            <FormItem label="次生威胁">
                <Input v-model="formValidate.eventDimension.spaceAttribute.ciShengWeiXie" clearable></Input>
            </FormItem>
        </Col>
   </Row>
   </div>
 </TabPane>
  <TabPane label="指挥维度" name="tab3" >
     .........
  </TabPane>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

这个是下拉列表挂载的dom节点的 某一个父节点有overflow:hidden属性,导致被隐藏了。
解决方案是把下拉列表挂载到body元素下,配置方法见如下官网截图
图片.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to ZaiZheLe Developer Zone-Open, Learning and Share
...