Vue3 Vite TypeScript Element-Plus Admin Template

https://github.com/wjw-gavin/vue3-vite-ts-element-plus
Admin
This is an admin backend project template built using Vue3, Vite, TypeScript, and Element-Plus,...
Tokens:874
Snippets:3
Trust Score:7.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Handle Form Submission with Loading State (TypeScript)

Source: https://github.com/wjw-gavin/vue3-vite-ts-element-plus/blob/main/docs/pages/components/form-wrap.md

Demonstrates how to handle form submission in Vue3 using TypeScript with Element Plus. It includes form validation, calling an API (createRole), displaying success messages, managing a loading state for the submit button, and navigating back after submission. The 'loading' callback is provided to control the button's visual state.

```typescript
const onConfirm = (loading: TLoading) => {
  ruleForm.value?.validate(async (valid) => {
    if (valid) {
      loading(true) // 提交按钮会显示 loading 状态

      await createRole(formData)
      ElMessage.success('添加成功')

      loading(false)
      router.back()
    } else {
      return false
    }
  })
}
```

--------------------------------

### Define Table Data Types (TypeScript)

Source: https://github.com/wjw-gavin/vue3-vite-ts-element-plus/blob/main/docs/pages/components/table.md

Defines TypeScript interfaces for configuring a table component, including headers, operation buttons, operation columns, and general table settings. These types facilitate type-safe data management for the table's functionality and appearance.

```typescript
import type { DatePickType, LinkProps, RenderRowData } from 'element-plus'
import type { ComponentPublicInstance } from 'vue'

// 表头
interface ITableHead {
  /** 表头名称 */
  label: string

  /** 对应列的字段名 */
  prop: string

  /** 列宽 */
  width?: number

  /** 是否排序 */
  sortable?: boolean

  /** 插槽 name */
  slot?: string
}

// 操作按钮
interface IButtons {
  /** 按钮文字 */
  text: string

  /** 按钮类型 */
  type?: LinkProps['type']

  /** 是否显示， 默认 false */
  show: boolean

  /** 点击回调 */
  click?(scope: RenderRowData<any>): void
}

// 操作列
interface ITableOperation {
  /** 操作栏列宽 */
  width?: number

  /** 是否悬浮，默认 right */
  fixed?: string

  /** 操作栏按钮 */
  buttons?: Array<IButtons | ((scope: RenderRowData<any>) => IButtons)> 
}

// 列表配置
interface ITableConfig {
  /** 列表请求地址 */
  api: string

  /** 是否显示索引 */
  index?: boolean

  /** 列表请求参数 */
  params?: TObject

  /** 列表表头 */
  headers: ITableHead[]

  /** 是否显示复选框 */
  selection?: boolean

  /** 列表操作栏按钮 */
  operations?: ITableOperation
}

// 暴露的实例类型及方法
export type TableExpose = {
  dispatchLoad: () => void
}

export type TableInstance = ComponentPublicInstance<TableExpose>

```

--------------------------------

### Define Search Item Types (TypeScript)

Source: https://github.com/wjw-gavin/vue3-vite-ts-element-plus/blob/main/docs/pages/components/search.md

Defines the `TSearchItemType` union type for various search input field types and the `ISearchItem` interface for structuring search configurations. It includes properties for field ID, name, type, placeholder, options for selects, and children for cascaded inputs.

```typescript
import type { DatePickType } from 'element-plus'

type TSearchItemType =
  | 'text'
  | 'date'
  | 'select'
  | 'complex'
  | 'date_time'
  | 'date_range'
  | 'time_range'
  | 'multi_select'
  | 'auto_complete'

interface IOptionProp {
  key: string
  value: string
}

interface ISearchItem {
  /** 绑定搜索项值的 id */
  id: string

  /** 搜索项名称 */
  name: string

  /** 搜索项类型 */
  type: TSearchItemType

  /** 搜索项占位字符 */
  hint: string

  /** select 搜索项下拉数据 */
  options?: IOptionProp[]

  /** 级联子数据 */
  children?: ISearchItem[]

  /** 是否多选 */
  multi_select?: boolean
}
```
Tokens:
Raw