<el-tabs v-if="orderInvoiceData.length" class='invoice_list' v-model="currentOrderTab" @tab-click="clickOrderTab"> <el-tab-pane :label="numToStr(order.order_info.order_no)" :name="numToStr(order.order_info.order_no)" :key="order.order_info.order_no" v-for="order in orderInvoiceData"> <el-tabs v-if="!order.order_info.is_error" tab-position="left" style="height:calc(100% - 96px);" v-model="currentInvoiceTab"> <el-tab-pane :label="invoice.invoice_info.label" :key="invoice.invoice_info.label" :name="invoice.invoice_info.name" v-for='(invoice, index) in order.invoiceList'> </el-tab-pane> </el-tabs> </el-tab-pane> </el-tabs> vue3 如何点击第一个el-tabs时,触发第二个el-tabs
时间: 2023-11-11 22:27:50 浏览: 108
手动动态改变el-tabs标签页顺序
你可以在第一个 `el-tabs` 的 `tab-click` 事件中调用一个方法,在这个方法中切换第二个 `el-tabs` 的选项卡,例如:
```html
<el-tabs v-if="orderInvoiceData.length" class='invoice_list' v-model="currentOrderTab" @tab-click="clickOrderTab">
<el-tab-pane :label="numToStr(order.order_info.order_no)" :name="numToStr(order.order_info.order_no)" :key="order.order_info.order_no" v-for="order in orderInvoiceData">
<el-tabs v-if="!order.order_info.is_error" tab-position="left" style="height:calc(100% - 96px);" v-model="currentInvoiceTab">
<el-tab-pane :label="invoice.invoice_info.label" :key="invoice.invoice_info.label" :name="invoice.invoice_info.name" v-for='(invoice, index) in order.invoiceList'>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
```
```js
methods: {
clickOrderTab(tab) {
// 切换第二个 el-tabs 的选项卡为第一个 invoice
this.currentInvoiceTab = this.orderInvoiceData[0].invoiceList[0].invoice_info.name;
}
}
```
这样,当你点击第一个 `el-tabs` 的选项卡时,就会触发 `clickOrderTab` 方法,然后切换第二个 `el-tabs` 的选项卡为第一个订单的第一个发票。
阅读全文