<el-main :style="{ left: !LayOutSettingStore.isCollapse ? '200px' : '56px', width: LayOutSettingStore.isCollapse ? 'calc(100% - 56px)' : 'calc(100% - 200px)', }"有什么用
时间: 2024-02-14 12:19:13 浏览: 29
这是一段 Vue.js 代码,用于设置一个元素的样式。具体来说,这段代码设置了一个名为 `el-main` 的元素的 `left` 和 `width` 样式,这两个样式的值根据 `LayOutSettingStore.isCollapse` 的值而变化。
如果 `LayOutSettingStore.isCollapse` 为 `false`,即侧边栏未被收起,那么 `left` 的值为 `'200px'`,`width` 的值为 `'calc(100% - 200px)'`,即元素的左侧距离为 `200px`,宽度为浏览器窗口宽度减去 `200px`。
如果 `LayOutSettingStore.isCollapse` 为 `true`,即侧边栏已被收起,那么 `left` 的值为 `'56px'`,`width` 的值为 `'calc(100% - 56px)'`,即元素的左侧距离为 `56px`,宽度为浏览器窗口宽度减去 `56px`。
相关问题
<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
你可以在第一个 `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` 的选项卡为第一个订单的第一个发票。
<div style="display: flex"> <div style="width: 200px; min-height: calc(100vh - 60px); border-right: 1px solid #ccc"> <el-menu :default-active="activePath" :default-openeds="menus.map(v => v.id + '')" class="el-menu-demo" style="border: none" router > <div v-for="item in menus" :key="item.id"> <div v-if="item.type === 2"> <el-menu-item :index="item.path" v-if="!item.hide"> <el-icon v-if="item.icon"> <component :is="item.icon"></component> </el-icon> <span>{{ item.name }}</span> </el-menu-item> </div> <div v-else> <el-sub-menu :index="item.id + ''" v-if="!item.hide"> <template #title> <el-icon v-if="item.icon"> <component :is="item.icon"></component> </el-icon> <span>{{ item.name }}</span> </template> <div v-for="subItem in item.children" :key="subItem.id"> <el-menu-item :index="subItem.path" v-if="!subItem.hide"> <template #title> <el-icon v-if="subItem.icon"> <component :is="subItem.icon"></component> </el-icon> <span>{{ subItem.name }}</span> </template> </el-menu-item> </div> </el-sub-menu> </div> </div> </el-menu> </div> <div style="flex: 1; padding: 10px"> <router-view v-slot="{ Component }"> <component @getAvatar="getAvatarHandler" ref="childRef" :is="Component" /> </router-view> </div> </div> </div>
这是一个Vue.js的模板代码,它包含了一个使用了Flex布局的div元素,其中包含了两个子元素。第一个子元素是一个el-menu组件,它使用了Vue.js的数据绑定语法,根据menus数组的内容动态生成菜单项和子菜单项。第二个子元素是一个router-view组件,它用于渲染当前路由对应的组件。这个组件是使用了一个名为"childRef"的ref属性,用于在父组件中访问子组件的方法。另外,当子组件触发了"getAvatar"事件时,父组件的"getAvatarHandler"方法会被调用。这个模板代码中还包含了一些行内样式,用于设置元素的宽度、高度、边框、内边距等。