当前位置：首页 > news >正文

Vxe UI 根据vxe-tabs 绑定不同的值，渲染生成不同的 tabls（页签）内容

news 2025/2/27 11:44:50

VxeUI tabs控件，根据绑定不同的内容，动态渲染不同的表格数据放置在不同的 tab 页

效果图如下：

在这里插入图片描述

代码实现

<template><vxe-tabs :options="detailTabList"><vxe-tab-pane v-for="(item, index) in detailTabList" :key="index" :name="item.name" :title="item.title"><!-- 根据当前 Tab 名称动态绑定配置 --><vxe-grid :ref="`detailTableRef_${item.name}`" v-bind="gridDetailOptions[item.name]":row-config="{ isCurrent: true }"></vxe-grid></vxe-tab-pane></vxe-tabs>
</template><script setup>// Tab 列表 const detailTabList = ref([{ name: 'tab1', title: '明细1' },{ name: 'tab2', title: '明细2' }]);const gridDetailOptions = {tab1: {border: true,columns: [{ type: 'seq', width: 70 },{ field: 'name', title: 'Name' },{ field: 'sex', title: 'Sex' },{ field: 'age', title: 'Age' }],data: [{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }]},tab2: {border: false,columns: [{ type: 'seq', width: 60 },{ field: 'product', title: 'Product' },{ field: 'price', title: 'Price' }],data: [{ product: 'Test1',  price: 'test abc' },{ product: 'Test2', price: 'test abc' },{ product: 'Test3', price: 'test abc' },]}};
</script>