說明： iview組件中當嵌套使用 Tabs時，需要在Tabs中指定 name 屬性來區(qū)分層級，然后在TabPane 中設置 tab 屬性指向?qū)?Tabs 的 name 字段。

正確示例： 在每一個Tabs中都需要設置name屬性，然后在其包含的所有直接TabPane中設置tab屬性指向其對應的Tabs的 name 字段。

<Tabs name="tab1" ><TabPane label="標簽1" tab="tab1"><Tabs name="tab1-1"><TabPane label="標簽1-1" tab="tab1-1">標簽1-1的內(nèi)容</TabPane><TabPane label="標簽1-2" tab="tab1-1">標簽1-2的內(nèi)容</TabPane></Tabs></TabPane><TabPane label="標簽2" tab="tab1"><Tabs name="tab1-2"><TabPane label="標簽2-1" tab="tab1-2">標簽2-1的內(nèi)容</TabPane><TabPane label="標簽2-2" tab="tab1-2">標簽2-2的內(nèi)容</TabPane></Tabs></TabPane> </Tabs>

運行結果：


錯誤示例： 如果不設置 name 或 tab 屬性，則會導致標簽位置錯亂。

<Tabs name="tab1" ><TabPane label="標簽1" tab="tab1"><Tabs><TabPane label="標簽1-1" tab="tab1-1">標簽1-1的內(nèi)容</TabPane><TabPane label="標簽1-2" tab="tab1-1">標簽1-2的內(nèi)容</TabPane></Tabs></TabPane><TabPane label="標簽2" tab="tab1"><Tabs name="tab1-2"><TabPane label="標簽2-1" >標簽2-1的內(nèi)容</TabPane><TabPane label="標簽2-2" tab="tab1-2">標簽2-2的內(nèi)容</TabPane></Tabs></TabPane> </Tabs>

運行結果：

https://blog.csdn.net/wang_xiao_ye/article/details/90023979

總結

以上是生活随笔為你收集整理的iview中嵌套使用tabs注意事项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。