关于elementui样式修改后无点击效果的解决方案

使用栅格布局后(其他方式也会无效)下拉和checkbox都无反应
解决办法:在最外层套个盒子 给个overflow: hidden属性

<div style="overflow: hidden">
          <el-col :span="12">
            <el-form-item label="分组名称1" prop="region">
              <el-select
                v-model="ruleForm.region"
                :placeholder="tableData[0].lxmc"
                style="width: 80%"
              ><div  v-for="(item, i) in tableData"
            :key="item.lxmc+i">
                <el-option :label="item.lxmc" :value="item.lxmc"></el-option>
                </div>
              </el-select>
            </el-form-item>
            <el-form-item label="分组名称2" prop="name">
              <el-input
                v-model="ruleForm.name"
                style="width: 80%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动区域" prop="region">
              <el-select
                v-model="ruleForm.region"
                placeholder="请选择活动区域"
                style="width: 80%"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="本地" style="margin-right: 10px"></el-radio>
                <el-radio label="全国" style="margin-right: 10px"></el-radio>
                <el-tag
                  type="info"
                  style="background-color: white; border: none"
                  >(单选)</el-tag
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </div>

关于下拉遍历后出现多个下拉框和一个选项
解决方案:外层套盒子 在盒子上进行遍历 就会展示为一个下拉框展示多个选项
添加盒子前:

<el-form-item label="活动区域" prop="region">
              <el-select
                v-model="ruleForm.region"
                placeholder="请选择活动区域"
                style="width: 80%"
               v-for="(item, i) in tableData"
            :key="item.lxmc+i"
              ><div>
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                </div>
              </el-select>
            </el-form-item>

在这里插入图片描述
添加盒子后

<el-form-item label="分组名称" prop="region">
              <el-select
                v-model="ruleForm.region"
                :placeholder="tableData[0].lxmc"
                style="width: 80%"
              ><div  v-for="(item, i) in tableData"
            :key="item.lxmc+i">
                <el-option :label="item.lxmc" :value="item.lxmc"></el-option>
                </div>
              </el-select>
            </el-form-item>

在这里插入图片描述
或者直接遍历本标签(我给自己蠢哭了)

<el-option  v-for="(item, i) in tableData"
            :key="item.lxmc+i" :label="item.lxmc" :value="item.lxmc"></el-option>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值