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>

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