vbenAdmin切换表头以和数据的记录
不写项目不知道,一写项目发现还得多学习记录笔记吖~
效果图展示:
注意:这段代码就是动态修改表头以及数据的方法
-
afterFetch:(params)=>{
-
console.log(params,"afterFetch")
-
setColumns(params.columnList)
-
},
整体代码展示如下:
-
<template>
-
<div>
-
<a-radio-group @change="group" v-model:value="mode" button-style="solid" :style="{ marginTop: '8px' , padding:'10px'}">
-
<a-radio-button value="2">技术学校</a-radio-button>
-
<a-radio-button value="3">中等职业学校</a-radio-button>
-
</a-radio-group>
-
<!--引用表格-->
-
<BasicTable @register="registerTable">
-
<template #orgType>1234123</template>
-
<!--插槽:table标题-->
-
<template #tableTitle>
-
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsAll"> 批量导入</a-button>
-
<!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> -->
-
<a-dropdown v-if="selectedRowKeys.length > 0">
-
<template #overlay>
-
<a-menu>
-
<a-menu-item key="1" @click="batchHandleDelete">
-
<Icon icon="ant-design:delete-outlined"></Icon>
-
删除
-
</a-menu-item>
-
</a-menu>
-
</template>
-
<a-button
-
>批量操作
-
<Icon icon="mdi:chevron-down"></Icon>
-
</a-button>
-
</a-dropdown>
-
</template>
-
<!--操作栏-->
-
<template #action="{ record }">
-
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
-
</template>
-
<!--字段回显插槽-->
-
<template #htmlSlot="{ text }">
-
<div v-html="text"></div>
-
</template>
-
<!--省市区字段回显插槽-->
-
<template #pcaSlot="{ text }">
-
{{ getAreaTextByCode(text) }}
-
</template>
-
<template #fileSlot="{ text }">
-
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
-
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
-
</template>
-
</BasicTable>
-
-
<!-- 表单区域 -->
-
<HzkMajorModal @register="registerModal" @success="handleSuccess"></HzkMajorModal>
-
<!--
-
批量导入
-
@customChange:成功回调
-
visible:展开关闭弹出层
-
orgType:tab切换值
-
excelUrl:导入接口
-
-->
-
<ExcelMoadl @customChange="successHandle" :excelUrl="importExcels" :key="upkey" v-model:visible="Turnswitch" :orgType="mode" :isYearSelect="false" @downLoadTmp="downLoadTmp"/>
-
</div>
-
</template>
-
-
<script lang="ts" name="hzkMajor-hzkMajor" setup>
-
import { ref, computed, unref } from 'vue';
-
import { BasicTable, useTable, TableAction } from '/@/components/Table';
-
import { useModal } from '/@/components/Modal';
-
import { useListPage } from '/@/hooks/system/useListPage';
-
import HzkMajorModal from './components/HzkMajorModal.vue';
-
import { columns, searchFormSchema } from './HzkMajor.data';
-
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl ,exportXlsDownload ,importExcels } from './HzkMajor.api';
-
import { downloadFile } from '/@/utils/common/renderUtils';
-
import { useUserStore } from '/@/store/modules/user';
-
// 导入导出组件
-
import ExcelMoadl from '../../components/upLoadExel.vue';
-
const userStore = useUserStore();
-
const checkedKeys = ref<Array<string | number>>([]);
-
let HzkMajorRm = userStore.dictItems['hky-hzkMajor'];
-
import {downloadByData} from "/@/utils/file/download";
-
-
//注册model
-
const [registerModal, { openModal }] = useModal();
-
const mode = ref('2');
-
const group = (val) => {
-
mode.value = val.target.value;
-
reload();
-
};
-
//注册table数据
-
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
-
tableProps: {
-
title: 'hzk_major',
-
api: list,
-
columns:columns,
-
canResize: false,
-
useSearchForm: true, // 启用搜索框
-
tableLayout: 'fixed',
-
formConfig: {
-
//labelWidth: 120,
-
schemas: searchFormSchema,
-
autoSubmitOnEnter: true,
-
showAdvancedButton: true,
-
fieldMapToNumber: [],
-
fieldMapToTime: [],
-
baseRowStyle: {
-
display: 'flex',
-
alignItems: 'center',
-
justifyContent: 'center',
-
},
-
},
-
actionColumn: {
-
width: 120,
-
fixed: 'right',
-
},
-
beforeFetch: (params) => {
-
HzkMajorRm.forEach((element) => {
-
if (element.value == params.parentName) {
-
params.parentName = element.title;
-
params.rmMajorId = element.value;
-
}
-
});
-
params.column = 'oprDate';
-
params.orgType = mode.value;
-
},
-
afterFetch:(params)=>{
-
console.log(params,"afterFetch")
-
setColumns(params.columnList)
-
},
-
},
-
});
-
-
const [registerTable, { reload ,setColumns}, { rowSelection, selectedRowKeys }] = tableContext;
-
-
/***
-
* 批量导入
-
*/
-
const Turnswitch = ref(false);
-
const upkey = ref(13);
-
function onExportXlsAll() {
-
Turnswitch.value = true;
-
upkey.value = new Date().getTime();
-
}
-
/**
-
* execl导入成功回调
-
*/
-
const successHandle = (e) =>{
-
if(e)reload();
-
}
-
-
/*
-
* 下载模块
-
*/
-
function downLoadTmp(){
-
let orgTypeStr = mode.value == '2' ? '专业名录-技术学校' : mode.value == '3' ? '专业名录-中等职业学校': '';
-
/*
-
* 下载文件
-
*/
-
exportXlsDownload({ orgType: mode.value }).then((response) => {
-
downloadByData(response,orgTypeStr,'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-
});
-
}
-
/**
-
* 新增事件
-
*/
-
function handleAdd() {
-
openModal(true, {
-
isUpdate: false,
-
showFooter: true,
-
});
-
}
-
/**
-
* 编辑事件
-
*/
-
function handleEdit(record: Recordable) {
-
record.orgType =
-
record.orgType == 1
-
? '普通'
-
: record.orgType == 2
-
? '技工'
-
: record.orgType == 3
-
? '中职'
-
: record.orgType == 4
-
? '五年'
-
: record.orgType == 5
-
? '(3 2)贯通'
-
: '';
-
openModal(true, {
-
record,
-
isUpdate: true,
-
showFooter: true,
-
});
-
}
-
/**
-
* 详情
-
*/
-
function handleDetail(record: Recordable) {
-
openModal(true, {
-
record,
-
isUpdate: true,
-
showFooter: false,
-
});
-
}
-
/**
-
* 删除事件
-
*/
-
async function handleDelete(record) {
-
console.log(record, 'opop');
-
await deleteOne({ majorId: record.majorId }, handleSuccess);
-
}
-
/**
-
* 批量删除事件
-
*/
-
async function batchHandleDelete() {
-
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess);
-
}
-
/**
-
* 成功回调
-
*/
-
function handleSuccess() {
-
(selectedRowKeys.value = []) && reload();
-
}
-
/**
-
* 操作栏
-
*/
-
function getTableAction(record) {
-
return [
-
{
-
label: '编辑',
-
onClick: handleEdit.bind(null, record),
-
},
-
];
-
}
-
/**
-
* 下拉操作栏
-
*/
-
function getDropDownAction(record) {
-
return [
-
{
-
label: '详情',
-
onClick: handleDetail.bind(null, record),
-
},
-
{
-
label: '删除',
-
popConfirm: {
-
title: '是否确认删除',
-
confirm: handleDelete.bind(null, record),
-
},
-
},
-
];
-
}
-
</script>
-
-
<style scoped></style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfaabf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01