如何解决Quasar q-tabs:如何通过代码动态显示/隐藏 q-tab?
有一个下拉列表,如果用户选择一个选项,一些 q-tab-panel 将显示/隐藏以做出响应。但是如何通过代码动态设置 q-tab-panel 显示/隐藏?希望有人可以在这里提出建议。谢谢
<q-select filled
v-model="datasource.datasourcetype"
:options="datasource.options"
option-value="value"
option-label="label"
emit-value
map-options
:label="ui.datasourcetype" />
<q-tabs v-model="dataEntryTab"
dense
class="bg-grey-2 text-teal"
align="left">
<q-tab name="tabCustomized" v-if="dataentry.showOptionsTab" icon="mail" :label="ui.datasourceOptions" />
<q-tab name="tabEntryInfo" v-if="dataentry.showDataEntryTab" icon="alarm" :label="ui.datasourceEntryInfo" />
<q-tab name="tabCascadeField" v-if="dataentry.showCascadeFieldTab" icon="movie" :label="ui.datasourceCascadeField" />
</q-tabs>
<q-tab-panels v-model="dataEntryTab" animated>
<q-tab-panel name="tabCustomized">
<q-input :label="ui.dataentryOptions"
v-model="dataentry.options"
filled
type="textarea" />
</q-tab-panel>
<q-tab-panel name="tabEntryInfo">
</q-tab-panel>
<q-tab-panel name="tabCascadeField">
</q-tab-panel>
</q-tab-panels>
例如,有 3 个 q-tabs,如果用户只想让其中 2 个显示,选择一个下拉选项后隐藏其中 1 个。
解决方法
有一个关于q-select的事件@input,我们可以为每个q-tab触发一个模型变量。对我有用
onDataSourceTypeChanged (event) {
var dstype = this.datasource.datasourcetype
if (dstype === 'datasourcetype.Customized') {
this.dataentry.showOptionsTab = true
this.dataentry.showDataEntryTab = false
this.dataentry.showCasacdeFieldTab = false
} else {
this.dataentry.showOptionsTab = false
this.dataentry.showDataEntryTab = true
this.dataentry.showCasacdeFieldTab = true
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。