Vben Admin框架 table的使用以及相关的内容(vben admin框架怎么实现上传文件时拿到文件参数)

Vben Admin框架 table的使用以及相关的内容 Vben Admin框架 table的使用以及相关的内容一、table的使用基础示例：

推荐整理分享Vben Admin框架 table的使用以及相关的内容(vben admin框架怎么实现上传文件时拿到文件参数)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vb框架控件在哪,vben admin框架怎么实现上传文件时传给后端为数组参数,vben-admin教程,vben admin框架怎么实现上传文件时传给后端为数组参数,vben-admin教程,vben admin框架怎么实现上传文件时拿到文件参数,vben admin框架怎么实现导出excel,vben admin框架怎么实现上传文件时拿到文件参数,内容如对您有帮助，希望把文章链接给更多的朋友！

Vben Admin官网链接: 官网组件页链接 这是我使用此框架的用法，仅供参考，我是vue3项目中使用此框架，写法是vue3的写法

第一步 引入BasicTable 组件。// register 用于注册 useTable size="small"给表格设定大小<BasicTable @register="registerTable" size="small" ><!--操作栏--> <template #action="{ record }"> <TableAction :actions="getTableAction(record)" /> </template></BasicTable>第二步 引入页面需要的包。// vue3项目不是在main.js中全局引入vben框架的包，所以需要按需引入表格相关的包 import { BasicTable, useTable } from '/@/components/Table';//按需引入表格相关的包 import { myFileList } from "./myfile.api";//引入myfile.api.ts文件 import { reportcolumns } from '../myfile.data';//引入封装好的data文件myfile.api.ts文件import {defHttp} from "/@/utils/http/axios";enum Api { base = 'api路径',}/*** @param params*/export const myFileList = (params) => defHttp.get({url: Api.base, params})myfile.data.ts文件import { BasicColumn } from '/@/components/Table';export const reportcolumns: BasicColumn[] = [ { title: '报表名称', dataIndex: 'name',//这里写与接口对应的参数 align: 'left',//左对齐 }, ]第三步 在script中写入数据。// vue3中setup语法糖的写法 ＜script lang=“ts“ setup＞//注册table数据const [registerTable, { reload }] = useTable({ api: myFileList ,//这里写后端提供的 api columns: reportcolumns,//这里写表格需要的列配置 striped: false,///是否斑马纹 useSearchForm: false,// 使用搜索表单 showTableSetting: false,// 显示表格设置 tableSetting: { fullScreen: true },// 表格配置 bordered: true,//边框配置 showIndexColumn: false,// 是否显示序号列 pagination: {//分页的配置 pageSize : 5, size: "small", simple: true }, canResize: false,// 是否可以自适应高度 actionColumn: {// 操作列配置 width: 150, title:'操作', dataIndex: 'action', slots: { customRender: 'action' }, fixed: undefined, },});//获取操作栏事件function getTableAction(record) { return [ { label: '进入', // 判断是否有权限显示 ifShow: () => { return record.id && record.id!=''; }, placement: 'left',//抽屉的位置。placement?: 'top' | 'right' | 'bottom' | 'left'; onClick: handleEnter.bind(null, record), }, ];}// 进入项目事件处理function handleEnter(record) {}

全部代码如下：

<template> <div class="p-4"> <BasicTable @register="registerTable" size="small"> <!--操作栏--> <template #action="{ record }"> <TableAction :actions="getTableAction(record)" /> </template> </BasicTable> </div></template><script lang="ts" setup> import { BasicTable, useTable } from '/@/components/Table';//按需引入表格相关的包 import { myFileList } from "./myfile.api";//引入myfile.api.ts文件 import { reportcolumns } from '../myfile.data';//引入封装好的data文件//注册table数据 以下表格的配置不完整，如有其他需要可以进入Vben Admin官网查看相关配置const [registerTable, { reload }] = useTable({ api: myFileList ,//这里写后端提供的 api columns: reportcolumns,//这里写表格需要的列配置 striped: false,///是否斑马纹 useSearchForm: false,// 使用搜索表单 showTableSetting: false,// 显示表格设置 tableSetting: { fullScreen: true },// 表格配置 bordered: true,//边框配置 showIndexColumn: false,// 是否显示序号列 pagination: {//分页的配置 pageSize : 5, size: "small", simple: true }, canResize: false,// 是否可以自适应高度 actionColumn: {// 操作列配置 width: 150, title:'操作', dataIndex: 'action', slots: { customRender: 'action' }, fixed: undefined, },});//获取操作栏事件function getTableAction(record) { return [ { label: '弹窗', // 判断是否有权限显示 ifShow: () => { return record.id && record.id!=''; }, placement: 'left',//抽屉的位置。placement?: 'top' | 'right' | 'bottom' | 'left'; onClick: handleEnter.bind(null, record), }, ];}// 弹窗事件处理 function handleEnter(record) {}</script>结果图如下：

二、table中操作列弹窗的使用：

接着上面的弹窗事件来写

引入弹窗的页面

在视图区引入弹窗组件

<authorizeModel @register="registerModal"></authorizeModel>

引入弹窗需要的包

import authorizeModel from './component/authorizeModel.vue' //引入弹出的页面import { useModal } from '/@/components/Modal'; //弹窗需要的包

＜script lang=“ts“ setup＞中配置弹窗

//如果此页面只有一个弹窗可以直接使用openModal//如果有多个可以给弹窗取别名openModal: openeditModal const [registerModal, { openModal: openeditModal }] = useModal(); //配置授权弹窗// 弹窗事件处理 function handleEnter(record) { openeditModal(true, { record,//传入表格数据 isUpdate: false, });}弹窗页面<template> <div> //弹窗页面必须使用 BasicModal 组件包裹，不然不会出现弹窗效果 <BasicModal v-bind="$attrs" ref="createCreative" @register="registerModal" title="授权" @ok="handleSubmit" destroyOnClose> <BasicForm @register="registerForm" style="height: 250px;" /> //表单 </BasicModal> </div></template><script lang="ts" setup>//引入相关的包import { ref, computed, unref } from 'vue';import { BasicModal, useModalInner } from '/src/components/Modal';import { BasicForm, useForm } from '/src/components/Form';// import { editFormSchema } from '../report.data';// import { getproject, saveMembers, deletemembers, getmembers } from '../data.api';const isUpdate = ref(true);//表单配置const [registerForm, { resetFields, setFieldsValue, validate, updateSchema }] = useForm({ schemas: editFormSchema, showActionButtonGroup: false,});//表单赋值const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { //重置表单 await resetFields(); expandedRowKeys.value = []; setModalProps({ confirmLoading: false, minHeight: 80 }); isUpdate.value = !!data?.isUpdate; if (data?.record) { //表单赋值 await setFieldsValue({ ...data.record, }); }});//表单提交事件async function handleSubmit() { try { let values = await validate(); setModalProps({ confirmLoading: true }); //提交表单 调用接口 // await saveMembers(props.id, values); //关闭弹窗 closeModal(); emit('memberreload', '调用父组件的方法'); //刷新列表(isUpdate:是否编辑;values:表单信息;expandedArr:展开的节点信息) emit('success', { isUpdate: unref(isUpdate), values: { ...values }, expandedArr: unref(expandedRowKeys).reverse() }); } finally { setModalProps({ confirmLoading: false }); }}</script><style lang="less" scoped>.create-creative { :deep(.ant-modal-header) { text-align: center; }}</style>

今天就先写到这吧，有啥疑问欢迎底下留言