ant design pro 的表分层级如何处理

于 2024-08-20 16:20:23 发布
阅读量406 收藏 5
点赞数 5
分类专栏： ant design pro 文章标签： javascript react.js 前端框架 前端 个人开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39637597/article/details/141360122
版权

在这里插入图片描述

如上图这样，经常我们要加一些分类表，但是这些表是有层次的，比如父级，这种应该如何来表达得更好呢。

在这里插入图片描述
首先得存数据了

后端得先处理好。

我是这样弄的。

一般我存一个 parent ，指向父级就好，这样能通过 parent 找到所有的 children.

当然你要两边都存也行，但是每次修改都要操作就比较麻烦，但胜在读取数据，得到 children 比较简单。

我一般只存 parent.

import mongoose, { Document } from 'mongoose';

export interface IPermissionGroup extends Document {
  name: string;
  parent?: IPermissionGroup;
  children?: IPermissionGroup[];
  createdAt?: Date;
  updatedAt?: Date;
}

const permissionGroupSchema = new mongoose.Schema(
  {
    name: { type: String, required: true, unique: true },
    parent: { type: mongoose.Schema.Types.ObjectId, ref: 'PermissionGroup' },
  },
  { timestamps: true },
);

const PermissionGroup = mongoose.model<IPermissionGroup>(
  'PermissionGroup',
  permissionGroupSchema,
);

export default PermissionGroup;

这里是没有存 children 的。但是需要把 children 返回给前端的。

// 获取权限组列表
const getPermissionGroups = handleAsync(async (req: Request, res: Response) => {
  const { current = '1', pageSize = '10' } = req.query;

  const query = buildQuery(req.query);

  // 执行查询
  const permissionGroups = await PermissionGroup.find(query)
    .populate('parent') // Assuming you want to populate parent
    .sort('-createdAt') // Sort by creation time in descending order
    .skip((+current - 1) * +pageSize)
    .limit(+pageSize)
    .exec();

  const total = await PermissionGroup.countDocuments(query).exec();

  const getChildren = async (parentId: string | null): Promise<any[]> => {
    const children = await PermissionGroup.find({ parent: parentId })
      .populate('parent')
      .exec();
    return Promise.all(
      children.map(async (child) => ({
        ...child.toObject(),
        children: await getChildren(child._id),
      })),
    );
  };

  const getPermissionGroupsWithChildren = async (
    permissionGroups: any[],
  ): Promise<any[]> => {
    return Promise.all(
      permissionGroups.map(async (permissionGroup) => ({
        ...permissionGroup.toObject(),
        children: await getChildren(permissionGroup._id),
      })),
    );
  };

  const permissionGroupsWithChildren =
    await getPermissionGroupsWithChildren(permissionGroups);

  res.json({
    success: true,
    data: permissionGroupsWithChildren,
    total,
    current: +current,
    pageSize: +pageSize,
  });
});

多加了个循环，但胜在数据不会太多，没啥问题。

返回给前端的数据是这样的：

{
    "success": true,
    "data": [
        {
            "_id": "66b1b54ef8871ea52a7e3de9",
            "name": "认证管理",
            "createdAt": "2024-08-06T05:31:58.495Z",
            "updatedAt": "2024-08-10T02:24:31.070Z",
            "__v": 0,
            "children": [
                {
                    "_id": "66b1b00bb5d937a0aef34034",
                    "name": "权限",
                    "createdAt": "2024-08-06T05:09:31.292Z",
                    "updatedAt": "2024-08-10T02:24:41.759Z",
                    "__v": 0,
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "children": []
                },
                {
                    "_id": "66b6d2c9b9ad87dfa985f34f",
                    "name": "用户",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:05.563Z",
                    "updatedAt": "2024-08-10T02:39:05.563Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d2ddb9ad87dfa985f362",
                    "name": "菜单",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:25.628Z",
                    "updatedAt": "2024-08-10T02:39:25.628Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d2e9b9ad87dfa985f377",
                    "name": "角色",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:37.339Z",
                    "updatedAt": "2024-08-10T02:39:37.339Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d2fdb9ad87dfa985f38e",
                    "name": "数据权限",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:39:57.756Z",
                    "updatedAt": "2024-08-10T02:39:57.756Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b6d314b9ad87dfa985f3a7",
                    "name": "权限组",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-10T02:40:20.528Z",
                    "updatedAt": "2024-08-10T02:40:20.528Z",
                    "__v": 0,
                    "children": []
                },
                {
                    "_id": "66b9ad348554e602536acc67",
                    "name": "认证管理菜单",
                    "parent": {
                        "_id": "66b1b54ef8871ea52a7e3de9",
                        "name": "认证管理",
                        "createdAt": "2024-08-06T05:31:58.495Z",
                        "updatedAt": "2024-08-10T02:24:31.070Z",
                        "__v": 0
                    },
                    "createdAt": "2024-08-12T06:35:32.560Z",
                    "updatedAt": "2024-08-12T06:35:32.560Z",
                    "__v": 0,
                    "children": []
                }
            ]
        },
        {
            "_id": "66adec30d647a4fde5546b1c",
            "name": "材料类目",
            "createdAt": "2024-08-03T08:37:04.433Z",
            "updatedAt": "2024-08-10T02:24:51.188Z",
            "__v": 0,
            "children": []
        }
    ],
    "total": 2,
    "current": 1,
    "pageSize": 20
}

children 就是显示出层次。

在这里插入图片描述
前端的代码是这样的：

import { useIntl } from '@umijs/max';
import { addItem, queryList, removeItem, updateItem } from '@/services/ant-design-pro/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns, ProDescriptionsItemProps } from '@ant-design/pro-components';
import { FooterToolbar, PageContainer, ProFormText, ProTable } from '@ant-design/pro-components';
import { FormattedMessage, useAccess } from '@umijs/max';
import { Button, message, TreeSelect } from 'antd';
import React, { useRef, useState } from 'react';
import type { FormValueType } from './components/Update';
import Update from './components/Update';
import Create from './components/Create';
import useQueryList from '@/hooks/useQueryList';
import Show from './components/Show';
import DeleteButton from '@/components/DeleteButton';
import DeleteLink from '@/components/DeleteLink';

/**
 * @en-US Add node
 * @zh-CN 添加节点
 * @param fields
 */
const handleAdd = async (fields: API.ItemData) => {
  const hide = message.loading(<FormattedMessage id="adding" defaultMessage="Adding..." />);
  try {
    await addItem('/permission-groups', { ...fields });
    hide();
    message.success(<FormattedMessage id="add_successful" defaultMessage="Added successfully" />);
    return true;
  } catch (error: any) {
    hide();
    message.error(
      error?.response?.data?.message ?? (
        <FormattedMessage id="upload_failed" defaultMessage="Upload failed, please try again!" />
      ),
    );
    return false;
  }
};

/**
 * @en-US Update node
 * @zh-CN 更新节点
 *
 * @param fields
 */
const handleUpdate = async (fields: FormValueType) => {
  const hide = message.loading(<FormattedMessage id="updating" defaultMessage="Updating..." />);
  try {
    await updateItem(`/permission-groups/${fields._id}`, fields);
    hide();

    message.success(<FormattedMessage id="update_successful" defaultMessage="Update successful" />);
    return true;
  } catch (error: any) {
    hide();
    message.error(
      error?.response?.data?.message ?? (
        <FormattedMessage id="update_failed" defaultMessage="Update failed, please try again!" />
      ),
    );
    return false;
  }
};

/**
 *  Delete node
 * @zh-CN 删除节点
 *
 * @param selectedRows
 */
const handleRemove = async (ids: string[]) => {
  const hide = message.loading(<FormattedMessage id="deleting" defaultMessage="Deleting..." />);
  if (!ids) return true;
  try {
    await removeItem('/permission-groups', {
      ids,
    });
    hide();
    message.success(
      <FormattedMessage
        id="delete_successful"
        defaultMessage="Deleted successfully and will refresh soon"
      />,
    );
    return true;
  } catch (error: any) {
    hide();
    message.error(
      error.response.data.message ?? (
        <FormattedMessage id="delete_failed" defaultMessage="Delete failed, please try again" />
      ),
    );
    return false;
  }
};

const TableList: React.FC = () => {
  const intl = useIntl();
  /**
   * @en-US Pop-up window of new window
   * @zh-CN 新建窗口的弹窗
   *  */
  const [createModalOpen, handleModalOpen] = useState<boolean>(false);
  /**2024fc.xyz
   * @en-US The pop-up window of the distribution update window
   * @zh-CN 分布更新窗口的弹窗
   * */
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  // const [batchUploadPriceModalOpen, setBatchUploadPriceModalOpen] = useState<boolean>(false);

  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<API.ItemData>();
  const [selectedRowsState, setSelectedRows] = useState<API.ItemData[]>([]);
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const access = useAccess();
  const { items: permissionGroup, loading } = useQueryList('/permission-groups');

  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */
  // Define roles object with index signature

  const columns: ProColumns<API.ItemData>[] = [
    {
      title: intl.formatMessage({ id: 'name' }),
      dataIndex: 'name',
      copyable: true,
      renderFormItem: (item, { ...rest }) => {
        return <ProFormText {...rest} placeholder={intl.formatMessage({ id: 'enter_name' })} />;
      },
      render: (dom, entity) => {
        return (
          <a
            onClick={() => {
              setCurrentRow(entity);
              setShowDetail(true);
            }}
          >
            {dom}
          </a>
        );
      },
    },
    {
      title: intl.formatMessage({ id: 'parent_permissionGroup' }),
      dataIndex: ['parent', 'name'],
      hideInSearch: true,
      // @ts-ignore
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      renderFormItem: (_, { type, defaultRender, formItemProps, fieldProps, ...rest }, form) => {
        if (type === 'form') {
          return null;
        }
        return (
          <TreeSelect
            showSearch
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            placeholder={intl.formatMessage({ id: 'parent_permissionGroup' })}
            allowClear
            treeNodeFilterProp="name"
            fieldNames={{ label: 'name', value: '_id', children: 'children' }}
            treeDefaultExpandAll
            treeData={permissionGroup}
            loading={loading}
            {...fieldProps}
          />
        );
      },
    },
    {
      title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating" />,
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        access.canSuperAdmin && (
          <a
            key="edit"
            onClick={() => {
              // Replace `handleUpdateModalOpen` and `setCurrentRow` with your actual functions
              handleUpdateModalOpen(true);
              setCurrentRow(record);
            }}
          >
            {intl.formatMessage({ id: 'edit' })}
          </a>
        ),
        access.canSuperAdmin && (
          <DeleteLink
            onOk={async () => {
              await handleRemove([record._id!]);
              setSelectedRows([]);
              actionRef.current?.reloadAndRest?.();
            }}
          />
        ),
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<API.ItemData, API.PageParams>
        headerTitle={intl.formatMessage({ id: 'list' })}
        actionRef={actionRef}
        rowKey="_id"
        search={{
          labelWidth: 100,
        }}
        toolBarRender={() => [
          (access.canSuperAdmin || access.canUpdatePermissionGroup) && (
            <Button
              type="primary"
              key="primary"
              onClick={() => {
                handleModalOpen(true);
              }}
            >
              <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
            </Button>
          ),
        ]}
        request={async (params, sort, filter) =>
          queryList('/permission-groups', params, sort, filter)
        }
        columns={columns}
        rowSelection={
          access.canSuperAdmin && {
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }
        }
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              <FormattedMessage id="pages.searchTable.chosen" defaultMessage="Chosen" />{' '}
              <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
              <FormattedMessage id="pages.searchTable.item" defaultMessage="项" />
            </div>
          }
        >
          {(access.canSuperAdmin || access.canDeletePermissionGroup) && (
            <DeleteButton
              onOk={async () => {
                await handleRemove(selectedRowsState?.map((item: any) => item._id!));
                setSelectedRows([]);
                actionRef.current?.reloadAndRest?.();
              }}
            />
          )}
        </FooterToolbar>
      )}
      {(access.canSuperAdmin || access.canCreatePermissionGroup) && (
        <Create
          open={createModalOpen}
          onOpenChange={handleModalOpen}
          onFinish={async (value) => {
            const success = await handleAdd(value as API.ItemData);
            if (success) {
              handleModalOpen(false);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
        />
      )}
      {(access.canSuperAdmin || access.canUpdatePermissionGroup) && (
        <Update
          onSubmit={async (value) => {
            const success = await handleUpdate(value);
            if (success) {
              handleUpdateModalOpen(false);
              setCurrentRow(undefined);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            }
          }}
          onCancel={handleUpdateModalOpen}
          updateModalOpen={updateModalOpen}
          values={currentRow || {}}
        />
      )}
      <Show
        open={showDetail}
        currentRow={currentRow as API.ItemData}
        columns={columns as ProDescriptionsItemProps<API.ItemData>[]}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
      />
    </PageContainer>
  );
};

export default TableList;

表单的话比较简单：

import { useIntl } from '@umijs/max';
import React from 'react';
import { ProForm, ProFormText } from '@ant-design/pro-components';
import { Form, Input } from 'antd';
import PermissionGroupSelect from '@/components/PermissionGroupSelect';

interface Props {
  newRecord?: boolean;
  onFinish: (formData: any) => Promise<void>;
  values?: any;
}

const BasicForm: React.FC<Props> = ({ newRecord, onFinish, values }) => {
  const intl = useIntl();

  return (
    <ProForm
      initialValues={{
        ...values,
        parent: values?.parent?._id,
      }}
      onFinish={async (values) => {
        await onFinish({
          ...values,
        });
      }}
    >
      <ProForm.Group>
        <ProFormText
          rules={[{ required: true, message: intl.formatMessage({ id: 'enter_name' }) }]}
          width="md"
          label={intl.formatMessage({ id: 'name' })}
          name="name"
        />

        <PermissionGroupSelect name="parent" label="permission_group" />
      </ProForm.Group>

      {!newRecord && (
        <Form.Item name="_id" label={false}>
          <Input type="hidden" />
        </Form.Item>
      )}
    </ProForm>
  );
};

export default BasicForm;

initialValues={{
…values,
parent: values?.parent?._id,
}}

这块仍然跟编辑的时候有关，可以填上它的值

PermissionGroupSelect 的源码是这样的：

import React from 'react';
import { ProFormTreeSelect } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import useQueryList from '@/hooks/useQueryList';

const PermissionGroupSelect = ({ name, label }: { name: string; label: string }) => {
  const intl = useIntl();
  const { items: permissionGroups, loading } = useQueryList('/permission-groups');

  return (
    <ProFormTreeSelect
      name={name}
      rules={[{ required: false }]}
      width="md"
      label={intl.formatMessage({ id: label })}
      allowClear
      secondary
      fieldProps={{
        showArrow: false,
        treeDefaultExpandAll: true,
        filterTreeNode: true,
        showSearch: true,
        dropdownMatchSelectWidth: false,
        autoClearSearchValue: true,
        treeNodeFilterProp: 'name',
        fieldNames: {
          label: 'name',
          value: '_id',
          children: 'children',
        },
        treeData: permissionGroups,
        loading,
      }}
    />
  );
};

export default PermissionGroupSelect;

在这里插入图片描述
我们拥有 12 年建站编程经验

  1. 虚拟产品交易平台定制开发
  2. WordPress 外贸电商独立站建站

我的网站

程序员随风
关注
专栏目录
vue3-pro-table:一个基于ElementPlus封装的table列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件
04-19
vue3-pro-table 之前有一个是基于 vue2 开发的 vue3-pro-table 是基于 vue3 开发 一个基于 ElementPlus 封装的 table 列表页组件，将包含搜索、列表、分页等功能的页面封装成一个组件 特性 将搜索、列表、分页三者的交互逻辑封装到组件中，节省开发者代码量 配置化的请求函数，自动发送请求，自动获取请求参数，自动显示 loading 效果 配置化的表格项，跟 el-table-column 的配置属性类似 配置化的搜索表单，支持大部分表单元素 配置化的分页，跟 el-pagination 的配置属性类似 自定义是否显示搜索和分页 自定义标题栏和工具栏 丰富的插槽提供功能扩展 使用 安装和引入 安装 // npm npm install vue3-pro-table // yarn yarn add vue3-pro-table 引入 该组件依赖
【ele-pro-table】表格一些常用方法
pmywy的博客
05-24 3994
【ele-pro-table】表格一些常用方法
Ant Design Pro 使用教程
最新发布
gitblog_00226的博客
08-07 363
Ant Design Pro 使用教程 ant-design-pro????????‍????????????‍???? Use Ant Design like a Pro!项目地址:https://gitcode.com/gh_mirrors/an/ant-design-pro 项目介绍 Ant Design Pro 是一个开箱即用的企业级应用 UI 解决方案，作为 React 脚手架。它提供了一套完整的 UI 组件和模板，帮助...
ele-admin产品的ele-pro-table在第一次正常加载数据，第二次返回错误时仍然显示第一次数据的问题。
zongmaomx的博客
02-20 1920
问题出现在，比如用户加载第一页返回了正常的十条数据，但是在加载第二页的时候报错了，我们返回了一条错误信息，这个时候希望页面上显示的是错误信息。但实际情况是页面上显示的任然是第一页的数据，没有任何报错。反过来却不会出现问题。于是猜想，应该是当后续出现报错的时候，组件没有清空第一页的data，所以表格也就没更新。于是找到ele-admin组件依赖中相关的代码，在报错的时候及时清空tableData即可。当初始化第一次返回正常的数据数组或者报错信息，页面上都能正常显示。
vue-ele-protable一个类似 antd pro中protable的强大组件
still_relive的博客
07-10 1660
vue-ele-protable一个类似 antd pro中protable的强大组件。
@mosowe2/element-pro：【proTable】基于elementUI2.x版本的高级表格
mosowe
07-03 2534
主要的配置是el-table-item的prop，新增其他的配置项。支持搜索单元lable、value插槽。可编辑，可获取编辑后table数据。main.js配置，因为是依赖。，所以这两个也是要安装和配置的。内部翻页/页数修改等事件处理。自动生成search表单。自动生成table表格。搜索栏默认收起，可展开。支持表格单元/表头插槽。支持用户表格紧凑度改变。支持用户表格展示项改变。.vue文件中直接使用。可拦截翻页/页数修改。支持搜索表单单元联动。.........
ant design pro动态菜单
03-30
在Ant Design Pro中实现动态菜单是一项常见的需求，尤其是在构建企业级后台管理系统时。Ant Design Pro是一个基于Ant Design和React的高级UI框架，它提供了一系列组件和解决方案，帮助开发者快速搭建和定制后台应用...
Ant Design Pro 下实现文件下载的实现代码
10-15
本文将详细介绍如何在Ant Design Pro中实现文件下载功能，涉及到的关键知识点包括如何使用Ajax发送请求，如何处理响应数据，以及如何通过React组件触发下载行为。 首先，要在Ant Design Pro中实现文件下载，需要...
AntDesignPro开发手册.doc
12-13
AntDesignPro 开发手册 AntDesignPro 是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成包括 ES2015+ JavaScript 语言的新标准、React 用于构建用户界面的 JavaScript 库、dva 是基于(redux...
Ant Design pro入门
MC_666的博客
02-23 4859
读此文章需要优先掌握知识:React、ts、ant-design
Ant Design Pro入门
qq_61313896的博客
12-28 3030
Ant Design Pro入门
Vue3.2 + Element-Plus 二次封装 el-table（Pro版）
sybh的博客
11-17 1342
ProTable 组件目前已是2.0版本🌈，在1.0版本中大家提出的问题与功能优化，目前已经得到优化和解决。😀 欢迎大家在使用过程中发现任何问题或更好的想法，都可以在下方评论区留言，或者我的开源项目 issues 中提出。如果你觉得还不错，请帮我点个小小的Star🧡🤔前提：首先我们在封装 ProTable 组件的时候，在不影响 el-table 原有的属性、事件、方法的前提下，然后在其基础上做二次封装，否则做得再好，也不太完美。🧐。
ANT-DESIGN_PRO的使用
weixin_41191739的博客
08-02 625
Ant Design Pro文档链接 https://pro.ant.design/zh-CN/docs/getting-started Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多设计模式和相应的代码实现，阐述中后
ant-design-pro介绍与使用(读懂框架结构)
m0_67388537的博客
07-29 2840
我们基本上已经搞清楚了 ant design pro 后台框架模板的基本结构,接下来我们需要按照自己的需求进行开发.因为默认模板的登录页相对复杂,也不符合我们需求,我们可以自行替换需要的登录模板. 我们将在下一节开始具体开发.
vue element ui 自定义组件的使用
lfkabb的博客
06-23 3611
前端菜鸟，都这个年代了，vue出来那么久了，自定义组件的使用，组件间的传值还不会使用~ 最近用element ui做了一个项目，终于用了一次自定义组件。 下面是设计图： 但是因为有几个界面的差异较大，不只是操作栏的按钮不同，所以这个要用自定义组件，根据上面状态栏的条件下面表格切换。 文件布局如图： 代码如下： jzdd.vue <template> <div class="el-body"> <el-card shadow="never"..
element-UI：el-table 表格排序
qq_45927262的博客
04-09 538
3、声明sortChange方法，其中column.prop指的是字段列名称prop值，column.order指的是排序方式，有三种值ascending、descending和null。注意：前端接口联调时传的参数是array数组形式处理，要确定后端使用什么注解。4、给后端接口getReportsData传了个数组参数。
【Ant Design Vue】封装导出Excel文件的功能模块到ele-pro-table
weixin_42113613的博客
12-20 2752
antd vue 导出excel
elementUI Table 自定义表头 动态数据及插槽
xuelong的博客
10-24 5545
项目需求是高度自定义列表界面，表格的表头由后端返回，并且用户可以自定义。而且需要根据用户自定义的表头，数据显示不同的样式。比如有些字段是标签，有些字段是id需要根据数据字典查询对应的name。
前端框架：Ant Design Pro
qq_43559922的博客
10-08 392
Ant Design Pro 是由蚂蚁金服开发的、基于 Ant Design 组件库的开发框架，专门用于构建企业级管理后台和前端应用。它提供了一整套前端中后台项目的解决方案，包括路由、权限管理、国际化、数据 mock、工程化等，帮助开发者快速搭建功能丰富的管理系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员随风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值