vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。求助前端大神。

# ## #vue中使用iview,在table表格中使用render()函数返回的下拉框被挡住了。 网上百度的给下拉框加z-index和设置position:absolute都不好使,求助前端大神。

<template>
  <!--添加数据 - 单次引入-->
  <div>
    <!--在这里指定目标列和tagging列 表单-->
    <div style="width: 90%; margin-left: 50px; margin-top: 10px; background-color: white;overflow: hidden;">
      <Form :model="formItem" ref="formValidate" :rules="ruleValidate" :label-width="200" style="width: 70%;margin-top: 30px;">
        <FormItem label="命名空间" prop="nameSpace">
          <Select v-model="formItem.nameSpace" placeholder="输入命名空间,支持英文字母、数字、下划线和加减号">
            <Option v-for="(item, index) in formItem.nameSpace" :key="index" :value="item.value">
              <span>{{item.name}}</span>
            </Option>
          </Select>
        </FormItem>
        <FormItem label="导入数据组" prop="dataGroup">
          <RadioGroup v-model="formItem.dataGroup">
            <Radio label="not">不导入数据组</Radio>
            <Radio label="female">导入已有数据组</Radio>
            <Radio label="male">创建新数据组</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="数据表名" prop="dataTableName">
          <Input v-model="formItem.dataTableName" placeholder="输入数据表名,支持英文字母、数字、下划线和加减号"></Input>
        </FormItem>
        <FormItem label="类型异常行" prop="excepRow">
          <RadioGroup v-model="formItem.excepRow">
            <Radio label="not">设置为null</Radio>
            <Radio label="female">抛掉异常行</Radio>
            <Radio label="male">放弃本次引入</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="与标准列数不一致" prop="excepCol">
          <RadioGroup v-model="formItem.excepCol">
            <Radio label="female">抛掉异常行</Radio>
            <Radio label="male">放弃本次引入</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="高级参数" prop="seniorParam">
          <RadioGroup v-model="formItem.seniorParam">
            <Radio label="not">使用默认配置</Radio>
            <Radio label="female">自定义高级参数</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
    </div>

    <!--编辑字段名、类型表格-->
    <div style="width: 90%; margin: 10px 0 0 50px; background-color: white;overflow: hidden;" align="center">
      <Row style="width: 90%;">
        <Col span="10">
          <h2 align="left" style="margin: 20px 0 20px 0;">编辑字段</h2>
        </Col>
        <Col span="14">
          <h2 align="right" style="margin: 20px 0 20px 0;">点击字段名或字段类型进入批量编辑模式</h2>
        </Col>
      </Row>
      <div style="width: 90%;">
        <Table :columns="dataPreviewColumns" :data="dataPreviewData"></Table>
        <!--分页-->
        <div style="margin: 10px;overflow: hidden">
          <div style="float: left;">
            <Page :total="dataPreviewData.length" :current="1" prev-text="上一页" next-text="下一页" show-total show-sizer show-elevator></Page>
          </div>
        </div>
      </div>
      <Button @click="importData" type="primary" size="large" style="float: right;margin: 0 100px 30px 0;width: 150px;">下一步</Button>
    </div>
  </div>

</template>

<script>
  /* eslint-disable */
  export default {
    name: 'once-import-next',
    data () {
      return {
        columnName: ['String', 'SmallInt', 'Int', 'BigInt', 'Float', 'Double', 'Date', 'TimeStamp'],
        formItem: { // 表单项集合
          nameSpace: [{name:'data_test', value:'data_test'}],
          dataGroup: '',
          dataTableName: '',
          excepRow: '',
          excepCol: '',
          seniorParam: ''
        },
        ruleValidate: { // 表单字段校验规则
          nameSpace: [
            { required: true, message: '请选择命名空间', trigger: 'change' }
          ],
          dataGroup: [
            { required: true, message: '请选择数据组', trigger: 'change' }
          ],
          dataTableName: [
            { required: true, message: '请输入数据表名', trigger: 'blur' }
          ]
        },
        dataPreviewColumns: [
          {type: 'selection', width: 100, align: 'center'},
          {title: '字段名', key: 'nameSpace'},
          { title: '字段类型',  key: 'name',
            render: (h, params) => {
              return h('Select',{style: {width: '100px'}, attrs: {placeholder: params.row.name}},
                this.columnName.map((column) => {
                  return h('Option', {attrs: {value: column}}, [h('span',[column])]);
                })
              );
            }
          },
          { title: '引入类型', key: 'type' },
          { title: '引入完整性', key: 'integrity' },
          { title: '占用存储', key: 'storage' },
          { title: '创建时间', key: 'createTime', sortable: true},
          { title: '修改时间', key: 'editTime', sortable: true}
        ],
        dataPreviewData: [
          { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝', integrity: '引入完整性',
            storage: '19 KB', createTime: 12, editTime: 12
          },
          { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝',
            integrity: '引入完整性', storage: '19 KB', createTime: 11, editTime: 2
          },
          { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝',
            integrity: '引入完整性', storage: '19 KB', createTime: 1, editTime: 222
          },
          { nameSpace: 'test_data ', name: '呵呵', type: '深拷贝',
            integrity: '引入完整性', storage: '19 KB', createTime: 22, editTime: 12
          }
        ]
      }
    },
    methods: {
      importData(){
        this.$emit('importStatus', true);
        const id = parseInt(Math.random() * 100000)
        const route = {
          name: 'import-status',
          params: {
            id
          },
          meta: {
            title: `动态路由-${id}`
          }
        }
        this.$router.push(route)
      }
    },
    mounted(){

    }
  }
</script>

<style >
.ivu-select-dropdown{
  z-index: 99999;
  position: relative;
}
</style>
![图片说明](https://img-ask.csdn.net/upload/201909/02/1567420031_279292.png)
![图片说明](https://img-ask.csdn.net/upload/201909/02/1567420041_157300.png)


1个回答

加上这个这个属性就好了
图片说明

或者加个!important
.ivu-select-dropdown{z-index: 99999!important;}

weixin_41939424
weixin_41939424 非常感谢,加上这个transfer这个属性就好了,是我没有仔细阅读文档,很感谢您!
5 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

0
请问下在vue中使用echarts,echarts中的X轴data为分钟,怎么写?
1
Vue中表格的组件数据显示问题
0
Vue+iview锚点组件使用没有效果,怎么回事?
1
Vue中在<a-menu-item>下使用<router-link>报"Cannot read property '_normalized' of undefined"?
0
iview中使用render渲染table,加入input和select,导致table的多选框失效
1
vue中结合ant-design-vue框架, 标签中使用箭头函数报错
2
VUE element 自定义检验规则函数中使用的this指向了第一个参数?
0
VUE框架使用bootstrop-table时候,引入样式报错Unknown browser query `dead`
1
哪位大佬知道在vue中使用element-ui的弹出框(dialog)写的公共组件,关闭时会闪烁一下?
2
Vue全局函数无法在钩子函数里调用
1
如何解决vue和iview组件库结合适合时在某些情况下的内存泄漏问题
4
vue项目如何使用render函数写一个类似组件模版的递归组件?
3
怎么在vue单页面项目用一个公共函数监听到所有页面上按钮的点击事件???
1
vue中使用echarts双层仪表盘
1
vue中使用这个不知道是什么的图
1
vue element-ui table多级表头嵌套的问题
1
iview中表格的展开项如何实现点击切换的是不同的内容啊
0
使用iview组件样式没有办法显示出来,求大神解答哪里出了问题
5
vue使用this.$router.push的时候出现了this.$router.push is not a function,为什么?
3
vue项目在路由中使用history模式访问不到页面怎么回事呢?