Element Plus

https://element-plus.org/zh-CN/
Admin
Element Plus is a Vue 3 component library designed for designers and developers to build user...
Tokens:290,692
Snippets:1,652
Trust Score:9.1
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://element-plus.org/zh-CN/guide/dev-guide

Run this command to install all necessary project dependencies before starting development.

```shell
pnpm i
```

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

### Install @element-plus/icons-vue with npm

Source: https://element-plus.org/zh-CN/component/icon

Use npm to install the Element Plus icons package.

```shell
$ npm install @element-plus/icons-vue
```

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

### Complete Page Header Example

Source: https://element-plus.org/zh-CN/component/page-header.html

A comprehensive example featuring breadcrumbs, custom content with avatars and tags, action buttons, and a description list.

```vue
<template>  <div aria-label="A complete example of page header">    <el-page-header @back="onBack">      <template #breadcrumb>        <el-breadcrumb separator="/">          <el-breadcrumb-item :to="{ path: './page-header.html' }">            homepage          </el-breadcrumb-item>          <el-breadcrumb-item>            <a href="./page-header.html">route 1</a>          </el-breadcrumb-item>          <el-breadcrumb-item>route 2</el-breadcrumb-item>        </el-breadcrumb>      </template>      <template #content>        <div class="flex items-center">          <el-avatar            class="mr-3"            :size="32"            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"          />          <span class="text-large font-600 mr-3"> Title </span>          <span            class="text-sm mr-2"            style="color: var(--el-text-color-regular)"          >            Sub title          </span>          <el-tag>Default</el-tag>        </div>      </template>      <template #extra>        <div class="flex items-center">          <el-button>Print</el-button>          <el-button type="primary" class="ml-2">Edit</el-button>        </div>      </template>      <el-descriptions :column="3" size="small" class="mt-4">        <el-descriptions-item label="Username">          kooriookami        </el-descriptions-item>        <el-descriptions-item label="Telephone">          18100000000        </el-descriptions-item>        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>        <el-descriptions-item label="Remarks">          <el-tag size="small">School</el-tag>        </el-descriptions-item>        <el-descriptions-item label="Address">          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province        </el-descriptions-item>      </el-descriptions>      <p class="mt-4 text-sm">        Element Plus team uses <b>weekly</b> release strategy under normal        circumstance, but critical bug fixes would require hotfix so the actual        release number <b>could be</b> more than 1 per week.      </p>    </el-page-header>  </div></template><script setup lang="ts">import { ElNotification as notify } from 'element-plus'const onBack = () => {  notify('Back')}</script>
```

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

### Install @element-plus/icons-vue with pnpm

Source: https://element-plus.org/zh-CN/component/icon

Use pnpm to install the Element Plus icons package.

```shell
$ pnpm install @element-plus/icons-vue
```

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

### Preview Website Locally

Source: https://element-plus.org/zh-CN/guide/dev-guide

Use this command to start the documentation website locally. You can then preview all existing components within the site.

```shell
pnpm docs:dev
```

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

### Popover Placement Examples

Source: https://element-plus.org/zh-CN/component/popover

Demonstrates the nine available placement positions for the Popover component using the placement attribute.

```vue
<template>  <div class="popover-base-box">    <div class="row center">      <el-popover        title="Title"        content="Top Left prompts info"        placement="top-start"      >        <template #reference>          <el-button>top-start</el-button>        </template>      </el-popover>      <el-popover        title="Title"        content="Top Center prompts info"        placement="top"      >        <template #reference>          <el-button>top</el-button>        </template>      </el-popover>      <el-popover        title="Title"        content="Top Right prompts info"        placement="top-end"      >        <template #reference>          <el-button>top-end</el-button>        </template>      </el-popover>    </div>    <div class="row">      <el-popover        title="Title"        content="Left Top prompts info"        placement="left-start"      >        <template #reference>          <el-button>left-start</el-button>        </template>      </el-popover>      <el-popover        title="Title"        content="Right Top prompts info"        placement="right-start"      >        <template #reference>          <el-button>right-start</el-button>        </template>      </el-popover>    </div>    <div class="row">      <el-popover        title="Title"        content="Left Center prompts info"        placement="left"      >        <template #reference>          <el-button class="mt-3 mb-3">left</el-button>        </template>      </el-popover>      <el-popover        title="Title"        content="Right Center prompts info"        placement="right"      >        <template #reference>          <el-button>right</el-button>        </template>      </el-popover>    </div>    <div class="row">      <el-popover        title="Title"        content="Left Bottom prompts info"        placement="left-end"      >        <template #reference>          <el-button>left-end</el-button>        </template>      </el-popover>      <el-popover        title="Title"        content="Right Bottom prompts info"        placement="right-end"      >        <template #reference>          <el-button>right-end</el-button>        </template>      </el-popover>    </div>    <div class="row center">      <el-popover        title="Title"        content="Bottom Left prompts info"        placement="bottom-start"      >        <template #reference> <el-button>bottom-start</el-button></template>      </el-popover>      <el-popover        title="Title"        content="Bottom Center prompts info"        placement="bottom"      >        <template #reference> <el-button>bottom</el-button></template>      </el-popover>      <el-popover        title="Title"        content="Bottom Right prompts info"        placement="bottom-end"      >        <template #reference>          <el-button>bottom-end</el-button>        </template>      </el-popover>    </div>  </div></template><style>.popover-base-box {  width: 600px;}.popover-base-box .row {  display: flex;  align-items: center;  justify-content: space-between;}.popover-base-box .center {  justify-content: center;}</style>
```

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

### Start Local Development Environment

Source: https://element-plus.org/zh-CN/guide/dev-guide

This command launches the local development environment for the project. Ensure your custom component is registered in @element-plus/components.

```shell
pnpm dev
```

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

### Install @element-plus/icons-vue with yarn

Source: https://element-plus.org/zh-CN/component/icon

Use yarn to install the Element Plus icons package.

```shell
$ yarn add @element-plus/icons-vue
```

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

### 注入应用程序上下文

Source: https://element-plus.org/zh-CN/component/message

在 setup 方法中通过 getCurrentInstance 获取 appContext 并将其作为第二个参数传递给 ElMessage。

```ts
import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'

// 在你的 setup 方法中
const { appContext } = getCurrentInstance()!
ElMessage({}, appContext)
```

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

### Install Auto-Import and Components Plugins

Source: https://element-plus.org/zh-CN/guide/quickstart

Install `unplugin-vue-components` and `unplugin-auto-import` for on-demand component import. Use npm, yarn, or pnpm.

```shell
$ npm install -D unplugin-vue-components unplugin-auto-import
```

```shell
$ yarn add -D unplugin-vue-components unplugin-auto-import
```

```shell
$ pnpm install -D unplugin-vue-components unplugin-auto-import
```

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

### Install Nuxt Module for Element Plus

Source: https://element-plus.org/zh-CN/guide/quickstart

Install the `@element-plus/nuxt` package for seamless integration with Nuxt.js. Use npm, yarn, or pnpm.

```shell
$ npm install -D @element-plus/nuxt
```

```shell
$ yarn add -D @element-plus/nuxt
```

```shell
$ pnpm install -D @element-plus/nuxt
```

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

### Radio API Versioning Example

Source: https://element-plus.org/zh-CN/component/radio

Demonstrates the transition from the deprecated label attribute to the new value attribute for Radio components.

```vue
<template>
  <el-radio-group v-model="radio1">
    <!-- works when >=2.6.0, recommended ✔️ not work when <2.6.0 ❌ -->
    <el-radio value="Value 1">Option 1</el-radio>
    <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
    <el-radio label="Label 2 & Value 2">Option 2</el-radio>
  </el-radio-group>
</template>
```

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

### Implement a Dashboard Layout with Container

Source: https://element-plus.org/zh-CN/component/container

A complete example demonstrating a sidebar navigation, header toolbar, and main content area with a scrollable data table.

```vue
<template>  <el-container class="layout-container-demo" style="height: 500px">    <el-aside width="200px">      <el-scrollbar>        <el-menu :default-openeds="['1', '3']">          <el-sub-menu index="1">            <template #title>              <el-icon><message /></el-icon>Navigator One            </template>            <el-menu-item-group>              <template #title>Group 1</template>              <el-menu-item index="1-1">Option 1</el-menu-item>              <el-menu-item index="1-2">Option 2</el-menu-item>            </el-menu-item-group>            <el-menu-item-group title="Group 2">              <el-menu-item index="1-3">Option 3</el-menu-item>            </el-menu-item-group>            <el-sub-menu index="1-4">              <template #title>Option4</template>              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>            </el-sub-menu>          </el-sub-menu>          <el-sub-menu index="2">            <template #title>              <el-icon><icon-menu /></el-icon>Navigator Two            </template>            <el-menu-item-group>              <template #title>Group 1</template>              <el-menu-item index="2-1">Option 1</el-menu-item>              <el-menu-item index="2-2">Option 2</el-menu-item>            </el-menu-item-group>            <el-menu-item-group title="Group 2">              <el-menu-item index="2-3">Option 3</el-menu-item>            </el-menu-item-group>            <el-sub-menu index="2-4">              <template #title>Option 4</template>              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>            </el-sub-menu>          </el-sub-menu>          <el-sub-menu index="3">            <template #title>              <el-icon><setting /></el-icon>Navigator Three            </template>            <el-menu-item-group>              <template #title>Group 1</template>              <el-menu-item index="3-1">Option 1</el-menu-item>              <el-menu-item index="3-2">Option 2</el-menu-item>            </el-menu-item-group>            <el-menu-item-group title="Group 2">              <el-menu-item index="3-3">Option 3</el-menu-item>            </el-menu-item-group>            <el-sub-menu index="3-4">              <template #title>Option 4</template>              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>            </el-sub-menu>          </el-sub-menu>        </el-menu>      </el-scrollbar>    </el-aside>    <el-container>      <el-header style="text-align: right; font-size: 12px">        <div class="toolbar">          <el-dropdown>            <el-icon style="margin-right: 8px; margin-top: 1px">              <setting />            </el-icon>            <template #dropdown>              <el-dropdown-menu>                <el-dropdown-item>View</el-dropdown-item>                <el-dropdown-item>Add</el-dropdown-item>                <el-dropdown-item>Delete</el-dropdown-item>              </el-dropdown-menu>            </template>          </el-dropdown>          <span>Tom</span>        </div>      </el-header>      <el-main>        <el-scrollbar>          <el-table :data="tableData">            <el-table-column prop="date" label="Date" width="140" />            <el-table-column prop="name" label="Name" width="120" />            <el-table-column prop="address" label="Address" />          </el-table>        </el-scrollbar>      </el-main>    </el-container>  </el-container></template><script lang="ts" setup>import { ref } from 'vue'import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'const item = {  date: '2016-05-02',  name: 'Tom',  address: 'No. 189, Grove St, Los Angeles',}const tableData = ref(Array.from({ length: 20 }).fill(item))</script><style scoped>.layout-container-demo .el-header {  position: relative;  background-color: var(--el-color-primary-light-7);  color: var(--el-text-color-primary);}.layout-container-demo .el-aside {  color: var(--el-text-color-primary);  background: var(--el-color-primary-light-8);}.layout-container-demo .el-menu {  border-right: none;}.layout-container-demo .el-main {  padding: 0;}.layout-container-demo .toolbar {  display: inline-flex;  align-items: center;  justify-content: center;  height: 100%;  right: 20px;}</style>
```

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

### Implement Image Preview with el-image

Source: https://element-plus.org/zh-CN/component/image

Use the preview-src-list property to enable the image preview feature. The initial-index property sets the starting image index in the preview list.

```vue
<template>  <div class="demo-image__preview">    <el-image      style="width: 100px; height: 100px"      :src="url"      :zoom-rate="1.2"      :max-scale="7"      :min-scale="0.2"      :preview-src-list="srcList"      show-progress      :initial-index="4"      fit="cover"    />  </div></template><script lang="ts" setup>const url =  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'const srcList = [  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',]</script><style scoped>.demo-image__error .image-slot {  font-size: 30px;}.demo-image__error .image-slot .el-icon {  font-size: 30px;}.demo-image__error .el-image {  width: 100%;  height: 200px;}</style>
```

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

### Implement Table V2 with Custom Filter Header

Source: https://element-plus.org/zh-CN/component/table-v2

This example demonstrates how to use a custom header renderer in Table V2 to integrate a popover-based filter interface.

```vue
<template>  <el-table-v2    fixed    :columns="fixedColumns"    :data="data"    :width="700"    :height="400"  /></template><script lang="tsx" setup>import { computed, ref } from 'vue'import {  ElButton,  ElCheckbox,  ElIcon,  ElPopover,  TableV2FixedDir,  useLocale,} from 'element-plus'import { Filter } from '@element-plus/icons-vue'import type { HeaderCellSlotProps } from 'element-plus'const generateColumns = (length = 10, prefix = 'column-', props?: any) =>  Array.from({ length }).map((_, columnIndex) => ({    ...props,    key: `${prefix}${columnIndex}`,    dataKey: `${prefix}${columnIndex}`,    title: `Column ${columnIndex}`,    width: 150,  }))const generateData = (  columns: ReturnType<typeof generateColumns>,  length = 200,  prefix = 'row-') =>  Array.from({ length }).map((_, rowIndex) => {    return columns.reduce(      (rowData, column, columnIndex) => {        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`        return rowData      },      {        id: `${prefix}${rowIndex}`,        parentId: null,      }    )  })const columns = generateColumns(10)const data = ref(generateData(columns, 200))const { t } = useLocale()const shouldFilter = ref(false)const popoverRef = ref()const ariaLabel = computed(() => {  return t('el.table.filterLabel', { column: columns[0].title })})const onFilter = () => {  popoverRef.value.hide()  if (shouldFilter.value) {    data.value = generateData(columns, 100, 'filtered-')  } else {    data.value = generateData(columns, 200)  }}const onReset = () => {  shouldFilter.value = false  onFilter()}const handleShowPopover = () => {  const button = document.querySelector('.el-table-v2__demo-filter button')  ;(button as HTMLElement)?.focus()}columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {  return (    <div class="flex items-center justify-center">      <span class="mr-2 text-xs">{props.column.title}</span>      <ElPopover        ref={popoverRef}        trigger="click"        width={200}        onAfter-enter={handleShowPopover}      >        {{          default: () => (            <div class="filter-wrapper">              <div class="filter-group">                <ElCheckbox v-model={shouldFilter.value}>                  Filter Text                </ElCheckbox>              </div>              <div class="el-table-v2__demo-filter">                <ElButton text onClick={onFilter}>                  Confirm                </ElButton>                <ElButton text onClick={onReset}>                  Reset                </ElButton>              </div>            </div>          ),          reference: () => (            <button              type="button"              aria-label={ariaLabel.value}              class="el-table-v2__demo-filter-btn"            >              <ElIcon size={14}>                <Filter />              </ElIcon>            </button>          ),        }}      </ElPopover>    </div>  )}const fixedColumns = columns.map((column, columnIndex) => {  let fixed: TableV2FixedDir | undefined = undefined  if (columnIndex < 2) fixed = TableV2FixedDir.LEFT  if (columnIndex > 9) fixed = TableV2FixedDir.RIGHT  return { ...column, fixed, width: 100 }})</script><style>.el-table-v2__demo-filter {  border-top: var(--el-border);  margin: 12px -12px -12px;  padding: 0 12px;  display: flex;  justify-content: space-between;}.el-table-v2__demo-filter-btn {  display: flex;  cursor: pointer;  padding: 0;  margin: 0;  background-color: transparent;  appearance: none;  border: none;}</style>
```

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

### Hello World 示例

Source: https://element-plus.org/zh-CN/guide/installation

通过 CDN 快速构建一个简单的 Element Plus 页面。

```html
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-button>{{ message }}</el-button>
    </div>
    <script>
      const App = {
        data() {
          return {
            message: "Hello Element Plus",
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
```

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

### Basic Usage of Virtualized Select

Source: https://element-plus.org/zh-CN/component/select-v2

Demonstrates a standard select component with a large dataset.

```vue
<template>  <el-select-v2    v-model="value"    :options="options"    placeholder="Please select"    style="width: 240px"  /></template><script lang="ts" setup>import { ref } from 'vue'const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']const value = ref()const options = Array.from({ length: 1000 }).map((_, idx) => ({  value: `Option ${idx + 1}`,  label: `${initials[idx % 10]}${idx}`,}))</script>
```

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

### Set Default Start and End Times

Source: https://element-plus.org/zh-CN/component/datetime-picker

Use the default-time attribute to specify the exact time for the start and end dates in a range picker. It accepts an array of Date objects to define the time values.

```vue
<template>  <div class="demo-datetime-picker">    <div class="block">      <span class="demonstration">Start and end date time 12:00:00</span>      <el-date-picker        v-model="value1"        type="datetimerange"        start-placeholder="Start Date"        end-placeholder="End Date"        :default-time="defaultTime1"      />    </div>    <div class="block">      <span class="demonstration">        Start date time 12:00:00, end date time 08:00:00      </span>      <el-date-picker        v-model="value2"        type="datetimerange"        start-placeholder="Start Date"        end-placeholder="End Date"        :default-time="defaultTime2"      />    </div>  </div></template><script lang="ts" setup>import { ref } from 'vue'const value1 = ref('')const value2 = ref('')const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'const defaultTime2: [Date, Date] = [  new Date(2000, 1, 1, 12, 0, 0),  new Date(2000, 2, 1, 8, 0, 0),] // '12:00:00', '08:00:00'</script><style scoped>.demo-datetime-picker {  display: flex;  width: 100%;  padding: 0;  flex-wrap: wrap;}.block {  padding: 30px 0;  text-align: center;  border-right: solid 1px var(--el-border-color);  flex: 1;  min-width: 300px;}.block:last-child {  border-right: none;}.block .demonstration {  display: block;  color: var(--el-text-color-secondary);  font-size: 14px;  margin-bottom: 20px;}@media (max-width: 768px) {  .block {    flex: 100%;    border-right: none;    border-bottom: solid 1px var(--el-border-color);  }  .block:last-child {    border-bottom: none;  }  :deep(.el-date-editor.el-input) {    width: 100%;  }  :deep(.el-date-editor.el-input__wrapper) {    width: 100%;    max-width: 300px;  }}</style>
```

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

### Basic Virtualized Table Usage

Source: https://element-plus.org/zh-CN/component/table-v2

Demonstrates rendering a table with 10 columns and 1,000 rows using the el-table-v2 component.

```vue
<template>  <el-table-v2    :columns="columns"    :data="data"    :width="700"    :height="400"    fixed  /></template><script lang="ts" setup>const generateColumns = (length = 10, prefix = 'column-', props?: any) =>  Array.from({ length }).map((_, columnIndex) => ({    ...props,    key: `${prefix}${columnIndex}`,    dataKey: `${prefix}${columnIndex}`,    title: `Column ${columnIndex}`,    width: 150,  }))const generateData = (  columns: ReturnType<typeof generateColumns>,  length = 200,  prefix = 'row-') =>  Array.from({ length }).map((_, rowIndex) => {    return columns.reduce(      (rowData, column, columnIndex) => {        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`        return rowData      },      {        id: `${prefix}${rowIndex}`,        parentId: null,      }    )  })const columns = generateColumns(10)const data = generateData(columns, 1000)</script>
```

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

### Basic Usage of Cascader

Source: https://element-plus.org/zh-CN/component/cascader

Demonstrates how to implement a basic Cascader with click-to-expand and hover-to-expand trigger configurations.

```vue
<template>  <div class="m-4">    <p>Child options expand when clicked (default)</p>    <el-cascader v-model="value" :options="options" @change="handleChange" />  </div>  <div class="m-4">    <p>Child options expand when hovered</p>    <el-cascader      v-model="value"      :options="options"      :props="props"      @change="handleChange"    />  </div></template><script lang="ts" setup>import { ref } from 'vue'const value = ref([])const props = {  expandTrigger: 'hover' as const,}const handleChange = (value) => {  console.log(value)}const options = [  {    value: 'guide',    label: 'Guide',    children: [      {        value: 'disciplines',        label: 'Disciplines',        children: [          {            value: 'consistency',            label: 'Consistency',          },          {            value: 'feedback',            label: 'Feedback',          },          {            value: 'efficiency',            label: 'Efficiency',          },          {            value: 'controllability',            label: 'Controllability',          },        ],      },      {        value: 'navigation',        label: 'Navigation',        children: [          {            value: 'side nav',            label: 'Side Navigation',          },          {            value: 'top nav',            label: 'Top Navigation',          },        ],      },    ],  },  {    value: 'component',    label: 'Component',    children: [      {        value: 'basic',        label: 'Basic',        children: [          {            value: 'layout',            label: 'Layout',          },          {            value: 'color',            label: 'Color',          },          {            value: 'typography',            label: 'Typography',          },          {            value: 'icon',            label: 'Icon',          },          {            value: 'button',            label: 'Button',          },        ],      },      {        value: 'form',        label: 'Form',        children: [          {            value: 'radio',            label: 'Radio',          },          {            value: 'checkbox',            label: 'Checkbox',          },          {            value: 'input',            label: 'Input',          },          {            value: 'input-number',            label: 'InputNumber',          },          {            value: 'select',            label: 'Select',          },          {            value: 'cascader',            label: 'Cascader',          },          {            value: 'switch',            label: 'Switch',          },          {            value: 'slider',            label: 'Slider',          },          {            value: 'time-picker',            label: 'TimePicker',          },          {            value: 'date-picker',            label: 'DatePicker',          },          {            value: 'datetime-picker',            label: 'DateTimePicker',          },          {            value: 'upload',            label: 'Upload',          },          {            value: 'rate',            label: 'Rate',          },          {            value: 'form',            label: 'Form',          },        ],      },      {        value: 'data',        label: 'Data',        children: [          {            value: 'table',            label: 'Table',          },          {            value: 'tag',            label: 'Tag',          },          {            value: 'progress',            label: 'Progress',          },          {            value: 'tree',            label: 'Tree',          },          {            value: 'pagination',            label: 'Pagination',          },          {            value: 'badge',            label: 'Badge',          },        ],      },      {        value: 'notice',        label: 'Notice',        children: [          {            value: 'alert',            label: 'Alert',          },          {            value: 'loading',            label: 'Loading',          },          {            value: 'message',            label: 'Message',          },          {            value: 'message-box',            label: 'MessageBox',          },          {            value: 'notification',            label: 'Notification',          },        ],      },      {        value: 'navigation',        label: 'Navigation',        children: [          {            value: 'menu',            label: 'Menu',          },          {            value: 'tabs',            label: 'Tabs',          },          {            value: 
```

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

### Arbitrary Level Selection Configuration

Source: https://element-plus.org/zh-CN/component/cascader

Example structure for defining hierarchical options for the Cascader component.

```javascript
          label: 'Dialog',          },          {            value: 'tooltip',            label: 'Tooltip',          },          {            value: 'popover',            label: 'Popover',          },          {            value: 'card',            label: 'Card',          },          {            value: 'carousel',            label: 'Carousel',          },          {            value: 'collapse',            label: 'Collapse',          },        ],      },    ],  },  {    value: 'resource',    label: 'Resource',    children: [      {        value: 'axure',        label: 'Axure Components',      },      {        value: 'sketch',        label: 'Sketch Templates',      },      {        value: 'docs',        label: 'Design Documentation',      },    ],  },]
```

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

### 配置 NPM 镜像源

Source: https://element-plus.org/zh-CN/guide/installation

在网络环境不佳时，设置 npm 镜像源以加速安装。

```shell
npm config set registry https://registry.npmmirror.com
```

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

### Basic Pagination Usage

Source: https://element-plus.org/zh-CN/component/pagination

Demonstrates standard pagination layouts with varying total item counts.

```vue
<template>  <div class="example-pagination-block">    <div class="example-demonstration">When you have few pages</div>    <el-pagination layout="prev, pager, next" :total="50" />  </div>  <div class="example-pagination-block">    <div class="example-demonstration">When you have more than 7 pages</div>    <el-pagination layout="prev, pager, next" :total="1000" />  </div></template><style scoped>.example-pagination-block + .example-pagination-block {  margin-top: 10px;}.example-pagination-block .example-demonstration {  margin-bottom: 16px;}</style>
```

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

### Customize Table Indexing

Source: https://element-plus.org/zh-CN/component/table

Use the index attribute on an el-table-column with type='index' to provide a custom numbering function or starting value.

```vue
<template>  <el-table :data="tableData" style="width: 100%">    <el-table-column type="index" :index="indexMethod" />    <el-table-column prop="date" label="Date" width="180" />    <el-table-column prop="name" label="Name" width="180" />    <el-table-column prop="address" label="Address" />  </el-table></template><script lang="ts" setup>const indexMethod = (index: number) => {  return index * 2}const tableData = [  {    date: '2016-05-03',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',    tag: 'Home',  },  {    date: '2016-05-02',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',    tag: 'Office',  },  {    date: '2016-05-04',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',    tag: 'Home',  },  {    date: '2016-05-01',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',    tag: 'Office',  },]</script>
```

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

### Example Git Commit Message Template

Source: https://element-plus.org/zh-CN/guide/commit-examples

A reference template for structuring your Git commit messages, including type, scope, and a detailed body.

```markdown
feat(components): [button] I implemented some functionality with the button

Separate the subject line and body content with a blank line (can include expected time)
Describe your modification information in one or more lines
Capitalize the first letter of each line
And the total character count of each line is optimally limited to 72, exceeding it will make it difficult for others to understand

- You can also add sub-item list symbols for content layout

```

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

### Set Fluid Height for el-table

Source: https://element-plus.org/zh-CN/component/table

Use the max-height attribute to constrain the table height and enable scrolling. The example includes dynamic row addition and removal.

```vue
<template>  <el-table :data="tableData" style="width: 100%" max-height="250">    <el-table-column fixed prop="date" label="Date" width="150" />    <el-table-column prop="name" label="Name" width="120" />    <el-table-column prop="state" label="State" width="120" />    <el-table-column prop="city" label="City" width="120" />    <el-table-column prop="address" label="Address" width="600" />    <el-table-column prop="zip" label="Zip" width="120" />    <!-- @vue-generic {UnwrapRef<typeof tableData>[number]} -->    <el-table-column fixed="right" label="Operations" min-width="120">      <template #default="scope">        <el-button          link          type="primary"          size="small"          @click.prevent="deleteRow(scope.$index)"        >          Remove        </el-button>      </template>    </el-table-column>  </el-table>  <el-button class="mt-4" style="width: 100%" @click="onAddItem">    Add Item  </el-button></template><script lang="ts" setup>import { ref } from 'vue'import dayjs from 'dayjs'import type { UnwrapRef } from 'vue'const now = new Date()const tableData = ref([  {    date: '2016-05-01',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',  },  {    date: '2016-05-02',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',  },  {    date: '2016-05-03',    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',  },])const deleteRow = (index: number) => {  tableData.value.splice(index, 1)}const onAddItem = () => {  now.setDate(now.getDate() + 1)  tableData.value.push({    date: dayjs(now).format('YYYY-MM-DD'),    name: 'Tom',    state: 'California',    city: 'Los Angeles',    address: 'No. 189, Grove St, Los Angeles',    zip: 'CA 90036',  })}</script>
```

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

### ElLoading.service(options, appContext?)

Source: https://element-plus.org/zh-CN/component/loading

Programmatically trigger a loading instance. Returns a Loading instance with a close method.

```APIDOC
## ElLoading.service(options, appContext?)

### Description
Creates and displays a loading instance. If called multiple times with fullscreen: true, it returns the existing singleton instance.

### Parameters
- **options** (Object) - Configuration object for the loading instance.
- **appContext** (Object) - Optional. The application context to inject into the loading instance (available since 2.9.10).

### Returns
- **LoadingInstance** - An object with a `close()` method to hide the loading overlay.
```

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

### Implement basic Segmented component

Source: https://element-plus.org/zh-CN/component/segmented

Demonstrates basic usage with v-model binding and different size configurations.

```vue
<template>  <div class="flex flex-col items-start gap-4">    <el-segmented v-model="value" :options="options" size="large" />    <el-segmented v-model="value" :options="options" size="default" />    <el-segmented v-model="value" :options="options" size="small" />  </div></template><script lang="ts" setup>import { ref } from 'vue'const value = ref('Mon')const options = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']</script>
```

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

### Configure Tab Position

Source: https://element-plus.org/zh-CN/component/tabs

Use the tab-position property to align tabs at the top, right, bottom, or left. This example uses a radio group to dynamically switch between positions.

```vue
<template>  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">    <el-radio-button value="top">top</el-radio-button>    <el-radio-button value="right">right</el-radio-button>    <el-radio-button value="bottom">bottom</el-radio-button>    <el-radio-button value="left">left</el-radio-button>  </el-radio-group>  <el-tabs :tab-position="tabPosition" style="height: 200px" class="demo-tabs">    <el-tab-pane label="User">User</el-tab-pane>    <el-tab-pane label="Config">Config</el-tab-pane>    <el-tab-pane label="Role">Role</el-tab-pane>    <el-tab-pane label="Task">Task</el-tab-pane>  </el-tabs></template><script lang="ts" setup>import { ref } from 'vue'import type { TabsInstance } from 'element-plus'const tabPosition = ref<TabsInstance['tabPosition']>('left')</script><style>.demo-tabs > .el-tabs__content {  padding: 32px;  color: #6b778c;  font-size: 32px;  font-weight: 600;}.el-tabs--right .el-tabs__content,.el-tabs--left .el-tabs__content {  height: 100%;}</style>
```

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

### Implementing Responsive Layouts

Source: https://element-plus.org/zh-CN/component/layout

Configures column widths across five responsive breakpoints: xs, sm, md, lg, and xl.

```vue
<template>  <el-row :gutter="10">    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">      <div class="grid-content ep-bg-purple" />    </el-col>    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">      <div class="grid-content ep-bg-purple-light" />    </el-col>    <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">      <div class="grid-content ep-bg-purple" />    </el-col>    <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">      <div class="grid-content ep-bg-purple-light" />    </el-col>  </el-row></template><style>.el-col {  border-radius: 4px;}.grid-content {  border-radius: 4px;  min-height: 36px;}</style>
```

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

### Control Upload File List with Vue

Source: https://element-plus.org/zh-CN/component/upload

Uses the on-change hook to manage the file list state. The example demonstrates limiting the displayed file list to the last three items.

```vue
<template>  <el-upload    v-model:file-list="fileList"    class="upload-demo"    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"    :on-change="handleChange"  >    <el-button type="primary">Click to upload</el-button>    <template #tip>      <div class="el-upload__tip">        jpg/png files with a size less than 500kb      </div>    </template>  </el-upload></template><script lang="ts" setup>import { ref } from 'vue'import type { UploadProps, UploadUserFile } from 'element-plus'const fileList = ref<UploadUserFile[]>([  {    name: 'food.jpeg',    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',  },  {    name: 'food2.jpeg',    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',  },])const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {  fileList.value = fileList.value.slice(-3)}</script>
```

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

### Basic Card Usage

Source: https://element-plus.org/zh-CN/component/card

Demonstrates a card with a header, body content, and a footer using slots.

```vue
<template>  <el-card style="max-width: 480px">    <template #header>      <div class="card-header">        <span>Card name</span>      </div>    </template>    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>    <template #footer>Footer content</template>  </el-card></template>
```
Tokens:
Raw