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

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
*/exportconstmyFileList=(params)=> defHttp.get({url: Api.base, params})

myfile.data.ts文件

import{ BasicColumn }from'/@/components/Table';exportconstreportcolumns: BasicColumn[]=[{title:'报表名称',dataIndex:'name',//这里写与接口对应的参数align:'left',//左对齐},]

第三步

在script中写入数据

。

// vue3中setup语法糖的写法 ＜script lang=“ts“ setup＞//注册table数据const[registerTable,{ reload }]=useTable({api: myFileList ,//这里写后端提供的 apicolumns: 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,},});//获取操作栏事件functiongetTableAction(record){return[{label:'进入',//   判断是否有权限显示ifShow:()=>{return record.id && record.id!='';},placement:'left',//抽屉的位置。placement?: 'top' | 'right' | 'bottom' | 'left';onClick:handleEnter.bind(null, record),},];}// 进入项目事件处理functionhandleEnter(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 ,//这里写后端提供的 apicolumns: 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,},});//获取操作栏事件functiongetTableAction(record){return[{label:'弹窗',//   判断是否有权限显示ifShow:()=>{return record.id && record.id!='';},placement:'left',//抽屉的位置。placement?: 'top' | 'right' | 'bottom' | 'left';onClick:handleEnter.bind(null, record),},];}// 弹窗事件处理functionhandleEnter(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();//配置授权弹窗// 弹窗事件处理functionhandleEnter(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)=>{//重置表单awaitresetFields();
  expandedRowKeys.value =[];setModalProps({confirmLoading:false,minHeight:80});
  isUpdate.value =!!data?.isUpdate;if(data?.record){//表单赋值awaitsetFieldsValue({...data.record,});}});//表单提交事件asyncfunctionhandleSubmit(){try{let values =awaitvalidate();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>

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