位置: 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 桌面右键)

  • 固定资产清理应该在年报中怎么填写
  • 递延所得税费用在资产负债表哪一项
  • 为什么要交税钱
  • 个体工商户怎么注销
  • 员工工伤住院伙食补助标准是多少
  • 公司无偿更换产品账务如何处理
  • 审核通过的红字发票怎么作废
  • 住宿开发票的税率是多少
  • 季报利润表本期数
  • 贴现的日期怎么算
  • 一般纳税人开专票几个点
  • 资本金利息收入算业务收入吗
  • 支票承兑是什么意思要带什么材料
  • 处置使用过的固定资产,税率按多少
  • 个人住房契税2021年收费标准
  • 机动车发票红冲可以作废吗
  • 存货质押贷款风险
  • 增资扩股如何操作
  • 一次性补缴的社保能全额退吗
  • 送现金券活动方案
  • 持有至到期投资属于什么科目
  • 技术开发合同可以开专票吗
  • 加油站的印花税计税金额
  • 泡菜增值税率
  • 企业单位名称变更说明
  • 本期销售额未达起征点请将本期应纳税额
  • 季度收入超过30万但开票只有10万
  • 允许扣除的土地价款怎么计算例题
  • 鼠标玩游戏飘怎么回事
  • win7网络无连接
  • 行政单位上年支出退回
  • 如何关闭开始菜单快捷键
  • composer.json和composer.lock
  • 工程改造怎么做账
  • 银行承兑汇票背书人和被背书人什么关系
  • 工作组只能看到自己
  • phpmemcached使用
  • 最奢华的女士腕表
  • 母子公司吸收合并税务处理
  • php代码报错
  • vue docx-preview实现docx文件在线预览
  • php pdo连接mysql
  • php如何继承多个类
  • 金蝶存货核算不能结账,能强制结账吗
  • 银行存款手工明细分类账
  • sql server ceiling
  • 织梦如何使用
  • 发票商品分类
  • 专利年费的滞纳金怎么做账
  • 公司注销了就可以不发工资么
  • 建筑附加税税率
  • 财政拨入的专项款专账怎么做
  • 保险收入如何做账
  • 加计减免其他收入怎么填
  • 其他应付款的有
  • 会计凭证审核标准有哪些
  • 一个完整的活动策划方案范文
  • mysql完整教程
  • linux常用命令sed
  • freebsd wifi设置
  • win8如何安装win10系统
  • ubuntu2004分区教程
  • win10双击打开文件设置方法
  • redhat下载教程
  • linuxzen
  • 在linux系统中拥有
  • win7怎么禁止程序自启动
  • win7如何安装iis7.0
  • android 游戏平台
  • css实现下拉菜单的思路是
  • perl变量后拼接字符串
  • 设计一个windows
  • Unity同时接入ShareSdk和微派支付sdk(二)
  • 基于javascript的毕业设计
  • javascript常用语句
  • 福建省个人所得税税率表查询
  • 怎么在电脑上下载浙政钉
  • 税务局组织收入存在的问题
  • 国际税务师证书
  • 福建农村医保怎么报销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设