vbenAdmin切换表头以和数据的记录

不写项目不知道，一写项目发现还得多学习记录笔记吖～

效果图展示：

注意：这段代码就是动态修改表头以及数据的方法

1.  
   afterFetch:(params)=>{
2.  
   console.log(params,"afterFetch")
3.  
   setColumns(params.columnList)
4.  
   },

整体代码展示如下： 

1.  
   <template>
2.  
   <div>
3.  
   <a-radio-group @change="group" v-model:value="mode" button-style="solid" :style="{ marginTop: '8px' , padding:'10px'}">
4.  
   <a-radio-button value="2">技术学校</a-radio-button>
5.  
   <a-radio-button value="3">中等职业学校</a-radio-button>
6.  
   </a-radio-group>
7.  
   <!--引用表格-->
8.  
   <BasicTable @register="registerTable">
9.  
   <template #orgType>1234123</template>
10.  
    <!--插槽:table标题-->
11.  
    <template #tableTitle>
12.  
    <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
13.  
    <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsAll"> 批量导入</a-button>
14.  
    <!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
15.  
    <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> -->
16.  
    <a-dropdown v-if="selectedRowKeys.length > 0">
17.  
    <template #overlay>
18.  
    <a-menu>
19.  
    <a-menu-item key="1" @click="batchHandleDelete">
20.  
    <Icon icon="ant-design:delete-outlined"></Icon>
21.  
    删除
22.  
    </a-menu-item>
23.  
    </a-menu>
24.  
    </template>
25.  
    <a-button
26.  
    >批量操作
27.  
    <Icon icon="mdi:chevron-down"></Icon>
28.  
    </a-button>
29.  
    </a-dropdown>
30.  
    </template>
31.  
    <!--操作栏-->
32.  
    <template #action="{ record }">
33.  
    <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
34.  
    </template>
35.  
    <!--字段回显插槽-->
36.  
    <template #htmlSlot="{ text }">
37.  
    <div v-html="text"></div>
38.  
    </template>
39.  
    <!--省市区字段回显插槽-->
40.  
    <template #pcaSlot="{ text }">
41.  
    {{ getAreaTextByCode(text) }}
42.  
    </template>
43.  
    <template #fileSlot="{ text }">
44.  
    <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
45.  
    <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
46.  
    </template>
47.  
    </BasicTable>
48.  
     
49.  
    <!-- 表单区域 -->
50.  
    <HzkMajorModal @register="registerModal" @success="handleSuccess"></HzkMajorModal>
51.  
    <!--
52.  
    批量导入
53.  
    @customChange:成功回调
54.  
    visible：展开关闭弹出层
55.  
    orgType：tab切换值
56.  
    excelUrl：导入接口
57.  
    -->
58.  
    <ExcelMoadl @customChange="successHandle" :excelUrl="importExcels" :key="upkey" v-model:visible="Turnswitch" :orgType="mode" :isYearSelect="false" @downLoadTmp="downLoadTmp"/>
59.  
    </div>
60.  
    </template>
61.  
     
62.  
    <script lang="ts" name="hzkMajor-hzkMajor" setup>
63.  
    import { ref, computed, unref } from 'vue';
64.  
    import { BasicTable, useTable, TableAction } from '/@/components/Table';
65.  
    import { useModal } from '/@/components/Modal';
66.  
    import { useListPage } from '/@/hooks/system/useListPage';
67.  
    import HzkMajorModal from './components/HzkMajorModal.vue';
68.  
    import { columns, searchFormSchema } from './HzkMajor.data';
69.  
    import { list, deleteOne, batchDelete, getImportUrl, getExportUrl ,exportXlsDownload ,importExcels } from './HzkMajor.api';
70.  
    import { downloadFile } from '/@/utils/common/renderUtils';
71.  
    import { useUserStore } from '/@/store/modules/user';
72.  
    // 导入导出组件
73.  
    import ExcelMoadl from '../../components/upLoadExel.vue';
74.  
    const userStore = useUserStore();
75.  
    const checkedKeys = ref<Array<string | number>>([]);
76.  
    let HzkMajorRm = userStore.dictItems['hky-hzkMajor'];
77.  
    import {downloadByData} from "/@/utils/file/download";
78.  
     
79.  
    //注册model
80.  
    const [registerModal, { openModal }] = useModal();
81.  
    const mode = ref('2');
82.  
    const group = (val) => {
83.  
    mode.value = val.target.value;
84.  
    reload();
85.  
    };
86.  
    //注册table数据
87.  
    const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
88.  
    tableProps: {
89.  
    title: 'hzk_major',
90.  
    api: list,
91.  
    columns:columns,
92.  
    canResize: false,
93.  
    useSearchForm: true, // 启用搜索框
94.  
    tableLayout: 'fixed',
95.  
    formConfig: {
96.  
    //labelWidth: 120,
97.  
    schemas: searchFormSchema,
98.  
    autoSubmitOnEnter: true,
99.  
    showAdvancedButton: true,
100.  
     fieldMapToNumber: [],
101.  
     fieldMapToTime: [],
102.  
     baseRowStyle: {
103.  
     display: 'flex',
104.  
     alignItems: 'center',
105.  
     justifyContent: 'center',
106.  
     },
107.  
     },
108.  
     actionColumn: {
109.  
     width: 120,
110.  
     fixed: 'right',
111.  
     },
112.  
     beforeFetch: (params) => {
113.  
     HzkMajorRm.forEach((element) => {
114.  
     if (element.value == params.parentName) {
115.  
     params.parentName = element.title;
116.  
     params.rmMajorId = element.value;
117.  
     }
118.  
     });
119.  
     params.column = 'oprDate';
120.  
     params.orgType = mode.value;
121.  
     },
122.  
     afterFetch:(params)=>{
123.  
     console.log(params,"afterFetch")
124.  
     setColumns(params.columnList)
125.  
     },
126.  
     },
127.  
     });
128.  
      
129.  
     const [registerTable, { reload ,setColumns}, { rowSelection, selectedRowKeys }] = tableContext;
130.  
      
131.  
     /***
132.  
     * 批量导入
133.  
     */
134.  
     const Turnswitch = ref(false);
135.  
     const upkey = ref(13);
136.  
     function onExportXlsAll() {
137.  
     Turnswitch.value = true;
138.  
     upkey.value = new Date().getTime();
139.  
     }
140.  
     /**
141.  
     * execl导入成功回调
142.  
     */
143.  
     const successHandle = (e) =>{
144.  
     if(e)reload();
145.  
     }
146.  
      
147.  
     /*
148.  
     * 下载模块
149.  
     */
150.  
     function downLoadTmp(){
151.  
     let orgTypeStr = mode.value == '2' ? '专业名录-技术学校' : mode.value == '3' ? '专业名录-中等职业学校': '';
152.  
     /*
153.  
     * 下载文件
154.  
     */
155.  
     exportXlsDownload({ orgType: mode.value }).then((response) => {
156.  
     downloadByData(response,orgTypeStr,'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
157.  
     });
158.  
     }
159.  
     /**
160.  
     * 新增事件
161.  
     */
162.  
     function handleAdd() {
163.  
     openModal(true, {
164.  
     isUpdate: false,
165.  
     showFooter: true,
166.  
     });
167.  
     }
168.  
     /**
169.  
     * 编辑事件
170.  
     */
171.  
     function handleEdit(record: Recordable) {
172.  
     record.orgType =
173.  
     record.orgType == 1
174.  
     ? '普通'
175.  
     : record.orgType == 2
176.  
     ? '技工'
177.  
     : record.orgType == 3
178.  
     ? '中职'
179.  
     : record.orgType == 4
180.  
     ? '五年'
181.  
     : record.orgType == 5
182.  
     ? '(3 2)贯通'
183.  
     : '';
184.  
     openModal(true, {
185.  
     record,
186.  
     isUpdate: true,
187.  
     showFooter: true,
188.  
     });
189.  
     }
190.  
     /**
191.  
     * 详情
192.  
     */
193.  
     function handleDetail(record: Recordable) {
194.  
     openModal(true, {
195.  
     record,
196.  
     isUpdate: true,
197.  
     showFooter: false,
198.  
     });
199.  
     }
200.  
     /**
201.  
     * 删除事件
202.  
     */
203.  
     async function handleDelete(record) {
204.  
     console.log(record, 'opop');
205.  
     await deleteOne({ majorId: record.majorId }, handleSuccess);
206.  
     }
207.  
     /**
208.  
     * 批量删除事件
209.  
     */
210.  
     async function batchHandleDelete() {
211.  
     await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
212.  
     }
213.  
     /**
214.  
     * 成功回调
215.  
     */
216.  
     function handleSuccess() {
217.  
     (selectedRowKeys.value = []) && reload();
218.  
     }
219.  
     /**
220.  
     * 操作栏
221.  
     */
222.  
     function getTableAction(record) {
223.  
     return [
224.  
     {
225.  
     label: '编辑',
226.  
     onClick: handleEdit.bind(null, record),
227.  
     },
228.  
     ];
229.  
     }
230.  
     /**
231.  
     * 下拉操作栏
232.  
     */
233.  
     function getDropDownAction(record) {
234.  
     return [
235.  
     {
236.  
     label: '详情',
237.  
     onClick: handleDetail.bind(null, record),
238.  
     },
239.  
     {
240.  
     label: '删除',
241.  
     popConfirm: {
242.  
     title: '是否确认删除',
243.  
     confirm: handleDelete.bind(null, record),
244.  
     },
245.  
     },
246.  
     ];
247.  
     }
248.  
     </script>
249.  
      
250.  
     <style scoped></style>

这篇好文章是转载于：学新通技术网