91 lines
2.0 KiB
Vue
91 lines
2.0 KiB
Vue
<template>
|
||
<el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
|
||
<template v-for="item in tabsPaneList" :key="item.name">
|
||
<el-tab-pane :label="item.label" :name="item.name">
|
||
<LowTable
|
||
:ref="(el) => (tableRef[item.name] = el)"
|
||
:tableId="item.formId"
|
||
:calcHeight="item.calcHeight || undefined"
|
||
:enhanceData="item.enhanceData"
|
||
:fixed-search="item.fixedSearch || {}"
|
||
></LowTable>
|
||
</el-tab-pane>
|
||
</template>
|
||
</el-tabs>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 引入依赖低代码的table代码，这样就可以动态引入表格
|
||
import {LowTable} from "@/components/LowDesign";
|
||
|
||
// 定义该组件的选项
|
||
defineOptions({name: 'TabsCardDocument'})
|
||
|
||
const activeName = ref('institution')
|
||
const tableRef = ref({})
|
||
|
||
const tabsPaneList = ref([
|
||
{
|
||
label: '制度',
|
||
name: 'institution',
|
||
formId: '1966386366515343361',
|
||
calcHeight: 200,
|
||
enhanceData: {hideHeader: 'disabled'},
|
||
fixedSearch: {file_main_type: 0}
|
||
},
|
||
{
|
||
label: '预案',
|
||
name: 'plan',
|
||
formId: '1966386366515343361',
|
||
calcHeight: 200,
|
||
fixedSearch: {file_main_type: 1}
|
||
},
|
||
{
|
||
label: '标准',
|
||
name: 'standard',
|
||
formId: '1966386366515343361',
|
||
calcHeight: 200,
|
||
fixedSearch: {file_main_type: 2}
|
||
},
|
||
{
|
||
label: '规程',
|
||
name: 'regulations',
|
||
formId: '1966386366515343361',
|
||
calcHeight: 200,
|
||
fixedSearch: {file_main_type: 3}
|
||
},
|
||
{
|
||
label: '目标责任',
|
||
name: 'responsibility',
|
||
formId: '1966386366515343361',
|
||
calcHeight: 200,
|
||
fixedSearch: {file_main_type: 4}
|
||
},
|
||
])
|
||
|
||
// 定义点击tab的事件动作
|
||
const handleClick = (tab) => {
|
||
const key = tab.props.name
|
||
tableRef.value[key].initTableLayout()
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.demo-tabs > .el-tabs__content {
|
||
padding: 32px;
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: #6b778c;
|
||
}
|
||
|
||
.demo-tabs {
|
||
::v-deep(.el-tabs__nav-wrap) {
|
||
.el-tabs__item {
|
||
height: 50px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|