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屬性，也是可以的；當然還有其他辦法，先這么用着。