vben admin BasicTable表格基本使用

vben admin是一款强大的后台管理系统，广泛应用于各种项目中。本文将为您详细介绍如何使用
便您更快地上手并充分发挥其功能。

Table 表格 | Vben Admin一个开箱即用的前端框架https://jeesite.com/front/vben-admin/docs/components/table.html#usage

1.register: 里面是table里面的一些配置项，比如header标题、内容、查询... 详情可以文档
2.#toolbar: 头部添加按钮
3.#bodyCell: 可以在这里面做一些表格内容的更改，比如图片展示、操作等
    record:为当条数据
    column:为字段名字，根据字段名称进行某一项的修改 

4.TableAction: 作用和button按钮一样

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button type="primary" @click="handleCreatedAdd">添加</Button>
      </template>
      <template #bodyCell="{ record, column }">
        <template v-if="column.key === 'userAvatar'">
          <div v-if="!record.userAvatar">-</div>
          <div v-else>
            <Image
              :width="40"
              style="border-radius: 50%"
              :src="globSetting.staticUrl + record.userAvatar"
            />
          </div>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '删除',
                color: 'error',
                onClick: handleDelete.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </div>
</template>

1. title:标题
2.columns：表格内容相关配置
3.formConfig：表单查询相关配置 
4.api：列表接口
5.useSearchForm： // 使用搜索表单 如果有查询表单 此项必填true
6.showTableSetting: true, //刷新按钮
7.bordered: true, //是否显示表格边框
8.showIndexColumn: false, // 是否显示序号
9.rowKey: 'id', //根据唯一的rowKey 动态删除指定行的数据.可用于不刷新整个表格而局部更新数据
10. actionColumn: {
         width: 80, /宽度
         title: '操作', 操作名称
         dataIndex: 'action', //字段
         fixed: 'right', // 显示到右边
      }
11.reload:渲染表格数据，可用于添加后或者删除后调用
更多配置可以去文档上查看

<script setup lang="ts">
   // 引入表格的
  import { BasicTable, useTable, TableAction } from '@/components/Table';
   //引入 表格内容和头部查询框
  import { columns, searchFormSchema } from './index.data';
   // 引入 ant-design-vue的button和image
  import { Button, Image } from 'ant-design-vue';
   // 引入 列表的接口
  import { welcomeMessageListApi } from '@/api/content/welcome-message/index';
   // 引入 图片的前缀
  import { useGlobSetting } from '@/hooks/setting';
  const globSetting = useGlobSetting();
    //表格的相关配置
  const [registerTable, { reload }] = useTable({
    title: '表格标题',
    columns,
    formConfig: {
      labelWidth: 100,
      schemas: searchFormSchema,
    },
    api: welcomeMessageListApi,
    useSearchForm: true, 
    showTableSetting: true,
    bordered: true, 
    showIndexColumn: false, 
    rowKey: 'id', 
    actionColumn: {
      width: 80, 
      title: '操作',
      dataIndex: 'action', 
      fixed: 'right', 
    },
  });
   //添加的相关操作
  const handleCreatedAdd = () => {};
   // 删除相关操作
  const handleDelete = (record: any) => {
    console.log(record);
    reload();
  };
</script>

index.data里面的相关配置

import { BasicColumn, FormSchema } from '@/components/Table';
export const columns: BasicColumn[] = [
  { title: '用户ID', dataIndex: 'userNo' },
  { title: '用户昵称', dataIndex: 'userNickname' },
  { title: '用户头像', dataIndex: 'userAvatar' },
  { title: '欢迎语内容', dataIndex: 'welcomeContent' },
  { title: '提交时间', dataIndex: 'createTime' },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'userNo',
    label: '用户ID',
    component: 'Input',
    defaultValue: '',
    componentProps: {
      placeholder: '请输入用户ID',
    },
    colProps: { span: 5 },
  },
];