位置: IT常识 - 正文

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

编辑:rootadmin
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>结果图如下:Vben Admin框架 table的使用以及相关的内容(vben admin框架怎么实现上传文件时拿到文件参数)

二、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>

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

本文链接地址:https://www.jiuchutong.com/zhishi/277874.html 转载请保留说明!

上一篇:删除系统中的帐户(怎样删除电脑系统账户)

下一篇:Win11 全新右键菜单获开发者支持,WinRAR 已完成适配:无须再忍受二级菜单(win11 桌面右键)

  • 计提个税与实际缴纳不一致
  • 现代服务印花税属于哪项
  • 什么叫风险纳税人员
  • 公司卫生纸是自己带还是公司买
  • 可供出售金融资产会计处理
  • 更改开票信息需要多久
  • 小规模纳税人未开票收入填在哪里
  • 分公司独立核算的利弊
  • 农产品增值税抵扣政策文件
  • 单位注册表从哪里获取
  • 应收账款的账面价值等于什么
  • 分类账和明细账平行登记规则
  • 用现金购买的股票
  • 车子按揭利息
  • 企业亏损会影响利润吗
  • 在建工程转固定资产当月提折旧吗?
  • 小规模纳税人季报是哪几个月
  • 增值税发票普票和专票有什么区别
  • 个人报销汽油费会计分录
  • 知道发票代码怎么查询发票号码
  • 监证方什么意思
  • 投资活动净现金流为负说明什么
  • 收到的劳务费发票可以抵扣吗
  • 网络不通怎么拼ip
  • 上月材料入库会计分录
  • 产品分仓
  • PHP:mb_internal_encoding()的用法_mbstring函数
  • PHP:Memcached::addServer()的用法_Memcached类
  • 用支票购入厂部办公用品2000元,车间办公用品1000元
  • php _dir_
  • 企业养老金有几个档次
  • php实现购物车功能的方法
  • 销售提成收入证明怎么写
  • php cache缓存
  • python基础100例
  • 如何利用数据有效性制作单元格菜单
  • 预缴和缴纳的区别
  • 租房开的发票收的税怎么做账?
  • 推广费的比例
  • 退回上年度企业所得税小规模怎么做分录
  • 会计成本确认
  • php框架 hyperf
  • html前端技术
  • 商品发生报废如何处罚
  • 工程公司的材料员考试难吗
  • 最新版税控盘怎么设置打印机
  • 进项税大于销项税,不用缴纳增值税
  • 工程施工属于什么经营范围
  • 固定资产大修理和更新改造的区别
  • 对方公司已注销还能起诉吗
  • 线上销售会计分录
  • 新会计准则报表模板
  • 关于租金收入确认的说法
  • 小规模公司购买汽车如何抵税
  • 计划成本法和实际成本法的适用范围
  • 防伪税控技术维护费
  • mysql 压测
  • win8系统怎么设置投屏
  • xp如何把ie浏览器设置为默认浏览器
  • wp8.1怎么升级wp10
  • 优盘安装系统
  • 在windows 7中任务栏儿
  • win8.0升级win8.1
  • virtualbox虚拟机旋转屏幕
  • dell t110服务器
  • 手机找回删除的文件
  • linux日志内容
  • windows无法访问\\192.168.1.104
  • linux的含义
  • win7系统怎么启用本地连接
  • win8怎么调整屏幕分辨率
  • linux系统怎么启动软件
  • 恶意软件清理
  • python怎么用
  • js字符串的操作方法
  • android反编译apk
  • unity3d物理现象模拟
  • 2022年最新最全执业药师继续教育考试答案
  • 北京市地方税务局2015第10号文件
  • 所得税汇算清缴退税税务局要来查账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设