Vben Admin 自学记录 —— Table组件的基本使用及练习（持续更新中...）

Table 表格

对 antv 的 table 组件进行封装

table相关使用及概念

练习 —— 画一个简单的包含增删改查的表格静态页面（不包含相关逻辑和处理）

之前相关记录： Vben Admin 自学记录 —— 介绍及使用

1.在之前添加的新路由模块中添加一个表格练习页面

在 src/router/routes/modules/test.ts中添加

// 添加表格路由
{
      path: 'tableTest',
      name: 'tableTest',
      component: () => import('/@/views/myComponents/tableTest/basicTable.vue'),
      meta: {
        title: t('routes.test.tableTest'),
      },
},

设置路由title

export default {
    testRoute: '测试路由',
    test1: '测试子路由 1',
    test2: '测试子路由 2',
    test3: '测试子路由 3',
    tableTest:'表格测试'
  };

src/views/myComponents中添加文件

2.在tableTest中添加data.ts，用来配置表格、搜索表单的配置，以及初始数据

data.ts

import { FormProps, FormSchema } from '/@/components/Form';
import { BasicColumn } from '/@/components/Table';
import { formatToDate } from '/@/utils/dateUtil';

// 搜索Form展示信息
// 姓名 name
// 性别 sex
// 出生日期 dt
// 年龄 age

// 表格展示信息
// 姓名 name
// 性别 sex
// 出生日期 dt
// 年龄 age
// 电话 tel
// 住址 address


type sexOptionType = [{ label: string; value: string }, { label: string; value: string }];

const sexOption: sexOptionType = [
  { value: '0', label: '男' },
  { value: '1', label: '女' },
];

// 配置表格SearchForm字段
export const formConfig: Partial<FormProps> = {
  labelWidth: 120,
  actionColOptions: {
    span: 25,
  },
  //自动展开行
  autoAdvancedLine: 1,
  showAdvancedButton: true,

  baseColProps: {
    span: 8,
  },
  schemas: [
    {
      field: 'name',
      label: '姓名',
      component: 'Input',
    },
    {
      field: 'sex',
      label: '性别',
      component: 'Select',
      componentProps: {
        options: sexOption,
      },
    },
    {
      field: 'dt',
      label: '出生日期',
      component: 'DatePicker',
      componentProps: {
        style: {
          width: '100%',
        },
        valueFormat: 'YYYYMMDD',
      },
    },
    {
      field: 'age',
      label: '年龄',
      component: 'InputNumber',
      componentProps: {
        style: {
          width: '100%',
        },
      },
    },
  ],
};

// 配置表格表头字段
export const columns: BasicColumn[] = [
  {
    title: '姓名',
    width: 200,
    dataIndex: 'name',
  },
  {
    title: '性别',
    width: 200,
    dataIndex: 'sex',
  },
  {
    title: '出生日期',
    width: 200,
    dataIndex: 'dt',
    customRender: function (text) {
      return formatToDate(text.text);
    },
  },
  {
    title: '年龄',
    width: 200,
    dataIndex: 'age',
  },
  {
    title: '电话',
    width: 200,
    dataIndex: 'tel',
  },
  {
    title: '住址',
    width: 200,
    dataIndex: 'address',
  },
];

// 自定义表单数据，我这里是写死的数据
export function initData() {
  return [
    {
      name: '张三',
      sex: '男',
      dt: '20200701',
      age: '22',
      tel: '13789890909',
      address: '北京市北京小区',
    },
    {
      name: '李四',
      sex: '女',
      dt: '20230507',
      age: '27',
      tel: '15477778888',
      address: '大连市大连小区',
    },
    {
      name: '王五',
      sex: '男',
      dt: '20221001',
      age: '26',
      tel: '15477778888',
      address: '大连市大连小区',
    },
    {
      name: '小明',
      sex: '男',
      dt: '20220701',
      age: '25',
      tel: '15477778888',
      address: '大连市大连小区',
    },
    {
      name: '小红',
      sex: '女',
      dt: '20180808',
      age: '28',
      tel: '15477778888',
      address: '大连市大连小区',
    },
  ];
}

3.在 basicTable.vue 引入 table组件及配置等

<template>
  <div
    :style="{
      overflow: 'hidden',
      position: 'relative',
      height: '100%',
    }"
  >
    <!-- 注册table -->
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              tooltip: '查看',
              icon: 'clarity:info-standard-line',
              // onClick: handleView.bind(null, { data: record,}),
            },
            {
              tooltip: '编辑',
              icon: 'clarity:note-edit-line',
              // onClick: handleEdit.bind(null, { data: record,}),
            },
            {
              tooltip: '删除',
              color: 'error',
              icon: 'ant-design:delete-outlined',
              // popConfirm: {
              //   title: '是否确定删除？',
              //   confirm: handleDel.bind(null, record),
              // },
            },
          ]"
        />
      </template>
      <template #toolbar>
        <a-button type="primary">{{ '新增' }}</a-button>
      </template>
    </BasicTable>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { formConfig, columns, initData } from './data';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';

  const data = initData();
  export default defineComponent({
    name: 'tableTest',
    components: {
      BasicTable,
      TableAction,
    },
    setup() {
      // 设置table
      const [registerTable, { reload }] = useTable({
        title: '查询结果',
        dataSource: data,		 //数据
        columns: columns,        //表头配置
        bordered: true,
        useSearchForm: true,     //开启搜索区域
        formConfig: formConfig,  //搜索字段配置
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        rowSelection: { type: 'radio' },
        pagination: { pageSize: 10 },  
        showTableSetting: true,  // 显示表格设置
        tableSetting: { fullScreen: true },
        showIndexColumn: true,
        indexColumnProps: { fixed: 'left' },
      });
      return {
        registerTable,
        reload,
      };
    },
  });
</script>

<style scoped></style>

页面效果