Vben Admin框架 table的使用以及相关的内容

一             、table的使用基础示例：

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>

今天就先写到这吧

 

 

 

 

 

 
，有啥疑问欢迎底下留言