listTableDialog

List table dialog with ListTableDialog component and options interface.

Source

File: plugs/element/listTableDialog.ts

Interface: ListTableProps

Configuration props for the list table component used within the dialog.

export interface ListTableProps {
  props: TableColumn[];        // Column definitions for the table
  rowKey: string;               // Unique row identifier field
  initialPage?: number;         // Starting page number (default: 1)
  initialPageSize?: number;     // Rows per page (default: varies)
  initExample?: Record<string, any>;  // Initial filter/query parameters
  useDicts?: string[];          // Dictionary keys to load for this table
}

Interface: Options

Configuration for showListTableDialog function.

interface Options {
  title: string;                                    // Dialog title
  props: ListTableProps;                            // Table configuration
  query: (example: Record<string, any>) => Promise<PageResponse<Row>>;  // Fetch data callback
  confirm: (rows: Row[]) => Promise<void>;         // Confirm selection callback
  children?: any;                                   // Optional slot content
}

Function: showListTableDialog

Opens a modal dialog containing a list table for row selection.

Signature

export function showListTableDialog({ title, props, query, confirm, children }: Options): {
  open: () => Promise<void>;
  close: () => void;
}

Usage Example

import { showListTableDialog } from 'plugs/element';

const { open, close } = showListTableDialog({
  title: 'Select Items',
  props: {
    props: [
      { label: 'Name', property: 'name' },
      { label: 'Status', property: 'status' }
    ],
    rowKey: 'id',
    initialPage: 1,
    initialPageSize: 20,
    useDicts: ['status']
  },
  query: async (example) => {
    const response = await api.fetchItems(example);
    return response.data;
  },
  confirm: async (rows) => {
    console.log('Selected:', rows);
  }
});

await open();

Error Handling

const open = async () => {
  try {
    await ElMessageBox({ ... });
  } catch (err) {
    if (err === 'cancel' || err === 'close') {
      return;  // User dismissed, not an error
    }
    throw err;  // Re-throw actual errors
  }
};

Dialog Behavior

Modal dialog with ListTableDialog component from noob-mengyxu
onQuery handles async data fetching with handleAsync
onConfirm logs and calls the confirm callback
onClose closes the message box programmatically
Max width set to 80% via customStyle
No default confirm/cancel buttons (handled by ListTableDialog internally)

plugs/element/index.ts exports this module
Uses ElMessageBox from Element Plus for dialog container
Uses h() from Vue for render function

2.8 KiB Raw Blame History