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

  • 什么叫应纳税所得额
  • 公司向个人借款是否合法
  • 研发费用明细账
  • 小规模纳税人可以开数电专票吗
  • 发票进项和销项差一个字
  • 营业外支出为负数怎么处理
  • 月末将应交未交增值税转入未交增值税
  • 转登记小规模纳税人留抵税额
  • 委托开发费用免所得税和增值税
  • 资本公积是属于什么类账户
  • 挂靠工程支付货款会计分录怎么写?
  • 出口货物如果没收怎么办
  • 生产企业电费要不要计提?
  • 一般纳税人可以开普票吗
  • 代开的专票作废了怎么做账?
  • 应收票据借方表示负债吗
  • 国税代开普通发票现需作废需要哪些资料?
  • 税务登记证遗失补办
  • 电子发票截图可以吗
  • 企业所得税是当期收入吗
  • 滴滴打车怎么整
  • 个体户营业收入超过500万
  • 工会职工活动支出标准
  • 母公司计提子公司投资收益
  • 发出商品发生损失
  • 宝塔linux面板怎么安装
  • 电脑玩游戏卡怎么弄
  • win10待机屏幕图片设置
  • 重楼的功效与作用价格
  • 一只草丛里的狐狸作文
  • 销售商品收取的运费会计分录
  • 其他业务成本的意思
  • 计提的发展基金如何使用
  • 苏格兰高地什么意思
  • yolo部署到服务器
  • 租赁收入确认时点
  • 文化体育用品批发城有哪些
  • face_recognition库采用了什么算法
  • python中文分词代码
  • 什么时候需要结转损益
  • 业务经费包括哪些内容
  • 织梦怎么建站
  • c语音中static
  • 织梦二次开发教程
  • 一般纳税人增值税可以抵扣吗
  • sqlserver数据导入mysql
  • 软件企业研发费用
  • SQL高级应用之同服务器上复制表到另一数据库中并实现去重复
  • 预缴增值税后期如何处理
  • 安装费用怎么做分录
  • 用友怎么取消月结
  • 公司库存现金提现流程
  • 人力资源公司的盈利模式
  • 加计扣除声明怎么填
  • 发票专用章盖在中间行不行
  • 住宿费电子发票
  • sql server用处
  • sqlserver查询数据库表名
  • winxp纯净版系统
  • linux安装c环境
  • window10打开rar文件
  • gcuservice.exe
  • win10 打开文件
  • packethsvc.exe - packethsvc是什么进程 有什么用
  • linuxzen
  • win8控制面板怎么打开
  • ExtJS 4.2 Grid组件单元格合并的方法
  • linux shell $1
  • unity热更新一般更新什么
  • python标准库os中的方法
  • 用shell脚本实现菜单页面
  • shell脚本 -ne 0
  • pypy 使用
  • javascript中window对象的子对象不包含
  • listview添加按钮
  • 税务系统干部选拔任用工作树立导向
  • 保险免保费是什么意思
  • 净化水服务税务分类
  • 宣传费是否要交消费税
  • 12月份医保没有到账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设