zoukankan      html  css  js  c++  java
  • antDesign 的row的col嵌套后底层row中的事件触发失败 ---已解决

    antDesign 的row的col嵌套后底层row中的事件触发失败

      工作中遇到的问题,附上代码:

        <a-row
          ><a-col :span="8"></a-col>
          <a-col :span="15" offset="1">
            <a-row class="opt-pannel">
              <a-col :span="8">
                <a-button
                  type="primary"
                  class="addErrBtn"
                  @click="addErrCodeModal = true"
                  >添加错误码</a-button
                >
              </a-col>
              <a-col :span="16">
                <div class="searchArea">
                  <a-input-search
                    class="ipt-search"
                    size="default"
                    placeholder="错误码(十进制)"
                  ></a-input-search>
                  <a-input-search
                    class="ipt-search"
                    size="default"
                    placeholder="错误码(十六进制)"
                  ></a-input-search>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>

      在这段代码下边我还写了一个<a-table>组件,不知道有没有影响。

      然后我鼠标移到“添加错误码”按钮上之后,没有出现手形,移到<a-input-search>上也没有出现编辑符号。然后点击按钮,click事件也没有被触发!请大佬帮我看看这是为什么呀???

      虽然后面我用div代替了row和col,并且问题得到了解决:

      

              <div class="opt-pannel">
                <a-button
                  type="primary"
                  class="addErrBtn"
                  @click="addErrCodeModal = true"
                  >添加错误码</a-button
                >
                <div class="searchArea">
                  <a-input-search
                    class="ipt-search"
                    size="default"
                    placeholder="错误码(十进制)"
                  ></a-input-search>
                  <a-input-search
                    class="ipt-search"
                    size="default"
                    placeholder="错误码(十六进制)"
                  ></a-input-search>
                </div>
              </div>

      经过指导人的指点,我已经找到了问题所在,并且完美解决了。

      原因就是<a-col>组件有一个默认的浮动属性,导致它的父组件失去了高度,所以底下的table组件就往上移了一行,占据了原本该是搜索行的位置,所以点击的时候实际上是作用到了下一行的table区域。

      

      解决办法:给<a-col>的父元素清除浮动。我是直接给父元素加了overflow:hidden属性,也是可以的;当然还有其他办法,先这么用着。

  • 相关阅读:
    Dapr微服务应用开发系列1:环境配置
    酷炫的终端模拟器eDEX-UI
    man 命令显示简体中文帮助
    通过二维码传输文件到linux
    awk命令使用实例
    Centos安装vncserver虚拟网络控制台
    使用SSHFS文件系统远程挂载目录
    搜狗服务器引擎Sogou C++ Workflow开源啦!
    网站服务器系统,选windows还是linux?
    TikTok总部将留在美国 字节跳动保有控制权和核心算法
  • 原文地址:https://www.cnblogs.com/lindang/p/14180130.html
Copyright © 2011-2022 走看看