# ElementUi组件扩展

**Repository Path**: ruovea-component/element-ui-component-extension

## Basic Information

- **Project Name**: ElementUi组件扩展
- **Description**: ElementUi 组件扩展是一套基于 Vue.js 和 Element UI 的增强型组件库，旨在提供更丰富的功能和更便捷的开发体验。通过这些扩展组件，开发者可以快速构建复杂的 Web 应用，提升开发效率和用户体验。

- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-06
- **Last Updated**: 2026-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ElementUi组件扩展

## 📊 详细介绍
ElementUi 组件扩展是一套基于 Vue.js 和 Element UI 的增强型组件库，旨在提供更丰富的功能和更便捷的开发体验。通过这些扩展组件，开发者可以快速构建复杂的 Web 应用，提升开发效率和用户体验。

### **核心组件**
1. **ElAdmin**：完整的后台管理系统布局，包含侧边栏菜单、顶部导航栏、面包屑导航、标签页管理等功能。
2. **ElExtendHeader**：增强型头部导航组件，集成 Logo、菜单、用户信息和登出功能。
3. **ElExtendDialog**：增强型对话框组件，支持关闭确认、表单提交和取消功能。
4. **ElExtendForm**：增强型表单组件，支持多种表单字段类型和表单验证。
5. **ElExtendTable**：增强型表格组件，集成分页、操作列等功能。
6. **ElExtendSearch**：增强型搜索表单组件，支持多种表单字段类型。
7. **ElSelectIcon**：图标选择组件，允许从预定义的图标列表中选择图标。
8. **ElOpenWeb 和 ElOpen**：用于在对话框中嵌入外部网页或 iframe。
9. **ModifyRecord**：显示记录的修改详情。
10. **Vue 工具函数**：包括防抖函数、本地存储封装、消息提示封装等。

## 🛠️ 软件架构
**技术栈**：基于 Vue.js 和 Element UI 构建，确保组件的高性能和跨平台兼容性。

### **架构优势**
- **跨平台支持**：在多种操作系统和浏览器上无缝运行。
- **高性能**：优化的代码结构和高效的算法，确保组件在处理复杂数据时依然流畅。
- **安全性**：内置的数据加密和访问控制，保护用户数据的隐私和安全。
- **可扩展性**：模块化设计，方便未来功能的扩展和集成。

## 📥 安装教程
**安装方式**：直接引用组件库。

### **详细步骤**
1. **下载组件库**：从官方网站或 GitHub 仓库下载最新版本的组件库。
2. **引入组件**：在项目中引入组件库，确保所有依赖都已正确配置。
3. **配置项目**：按照指南配置项目，确保组件能够正常运行。

## Vue 组件概述

### 1. ElAdmin
- **功能**：完整的后台管理系统布局，包含侧边栏菜单、顶部导航栏、面包屑导航、标签页管理等功能。
- **适用场景**：用于快速搭建后台管理系统。

2. ElExtendHeader

- **功能**：增强型头部导航组件，集成 Logo、菜单、用户信息和登出功能。
- **适用场景**：需要自定义头部导航的页面。

### 3. ElExtendDialog
- **功能**：增强型对话框组件，支持关闭确认、表单提交和取消功能。
- **适用场景**：需要创建复杂对话框的场景。

### 4. ElExtendForm
- **功能**：增强型表单组件，支持多种表单字段类型和表单验证。
- **适用场景**：需要创建复杂表单的场景。

### 5. ElExtendTable
- **功能**：增强型表格组件，集成分页、操作列等功能。
- **适用场景**：需要进行数据列表展示和操作的场景。

### 6. ElExtendSearch
- **功能**：增强型搜索表单组件，支持多种表单字段类型。
- **适用场景**：需要进行数据筛选和查询的场景。

### 7. ElSelectIcon
- **功能**：图标选择组件，允许从预定义的图标列表中选择图标。
- **适用场景**：需要选择图标的场景，如设置按钮图标、菜单图标等。

### 8. ElOpenWeb 和 ElOpen
- **功能**：用于在对话框中嵌入外部网页或 iframe。
- **适用场景**：需要在当前应用中展示外部网页内容的场景。

### 9. ModifyRecord
- **功能**：显示记录的修改详情。
- **适用场景**：需要展示记录修改历史的场景。

### 10. Vue 工具函数
- **功能**：包括防抖函数、本地存储封装、消息提示封装等。
- **适用场景**：提高代码复用性和可维护性，简化开发过程。

## 软件架构

js、element.js

## 安装教程

直接引用

## 使用说明

### 1. 防抖函数 `debounce`

**功能概述**：
`debounce` 是一个防抖函数，用于限制函数的执行频率，常用于输入框的搜索建议、窗口大小调整等场景。

**参数说明**：
- `func`：需要防抖处理的函数。
- `wait`：防抖等待的时间，单位为毫秒。
- `immediate`：是否立即执行，布尔值。

**使用示例**：
```javascript
// 定义一个需要防抖的函数
function search(query) {
  console.log('执行搜索:', query);
}

// 创建防抖函数
const debouncedSearch = Vue.prototype.debounce(search, 500, false);

// 使用防抖函数
debouncedSearch('apple'); // 输入后等待500ms再执行
debouncedSearch('banana'); // 输入后等待500ms再执行
```

### 2. 本地存储封装 `Vue.prototype.Storage`

**功能概述**：
封装了 `localStorage` 的常用操作，提供了更便捷的接口。

**方法说明**：
- `setKey(key)`：生成存储键，格式为 `webapp:${key}`。
- `set(key, val)`：设置存储项，自动将值转换为 JSON 字符串。
- `get(key)`：获取存储项，自动将 JSON 字符串转换为对象。
- `remove(key)`：移除存储项。
- `clear()`：清空所有存储项。

**使用示例**：
```javascript
// 设置存储项
Vue.prototype.Storage.set('user', { name: '张三', age: 25 });

// 获取存储项
const user = Vue.prototype.Storage.get('user');
console.log(user); // 输出: { name: '张三', age: 25 }

// 移除存储项
Vue.prototype.Storage.remove('user');

// 清空所有存储项
Vue.prototype.Storage.clear();
```

### 3. 消息提示封装 `Vue.prototype.Alert`

**功能概述**：
封装了 Element UI 的 `MessageBox.alert` 方法，提供了成功、警告、错误和信息四种类型的消息提示。

**方法说明**：
- `success(msg, callback)`：显示成功提示。
- `warning(msg, callback)`：显示警告提示。
- `error(msg, callback)`：显示错误提示。
- `info(msg, callback)`：显示信息提示。

**使用示例**：
```javascript
// 成功提示
Vue.prototype.Alert.success('操作成功');

// 警告提示
Vue.prototype.Alert.warning('这是一个警告');

// 错误提示
Vue.prototype.Alert.error('发生错误');

// 信息提示
Vue.prototype.Alert.info('这是一个信息提示');
```

### 4. 通知组件 `Vue.prototype.Notification`

**功能概述**：
封装了 Element UI 的 `Notification` 组件，用于显示通知消息。

**使用示例**：
```javascript
// 显示通知
Vue.prototype.Notification({
  title: '通知标题',
  message: '这是一个通知消息',
  type: 'success' // 可选值: success、warning、info、error
});
```



### 5. ElAdmin 组件详细使用说明

#### 组件功能概述

`ElAdmin` 是一个基于 Vue.js 和 Element UI 的自定义管理后台组件，集成了侧边栏菜单、顶部导航栏、标签页、面包屑导航和用户信息下拉菜单等功能，适用于快速构建管理后台系统。

#### 组件属性说明

| 属性名          | 类型     | 默认值       | 描述                     |
| --------------- | -------- | ------------ | ------------------------ |
| showTags        | Boolean  | false        | 是否显示标签页           |
| dropList        | Array    | []           | 用户下拉菜单项数组       |
| logo_url        | String   | -            | 侧边栏 Logo 图片地址     |
| title           | String   | -            | 侧边栏标题文本           |
| handleEditPass  | Function | -            | 处理编辑密码的函数       |
| handleLogout    | Function | -            | 处理登出的函数           |
| handleSelect    | Function | -            | 处理菜单选中的函数       |
| menuData        | Array    | []           | 侧边栏菜单数据           |
| currentPath     | String   | -            | 当前路径                 |
| user            | Object   | null         | 用户信息对象             |
| menuItems       | Array    | -            | 用户下拉菜单项数组       |
| uniqueOpened    | Boolean  | false        | 是否只保持一个子菜单展开 |
| showBreadcrumb  | Boolean  | false        | 是否显示面包屑导航       |
| asideStyle      | String   | 线性渐变背景 | 侧边栏样式               |
| tagselect       | String   | ''           | 当前选中的标签页类型     |
| headerStyle     | String   | 线性渐变背景 | 顶部导航栏样式           |
| textColor       | String   | #ffffff      | 文本颜色                 |
| activeTextColor | String   | #409eff      | 活跃状态文本颜色         |

#### 方法说明

| 方法名              | 参数         | 描述                                                         |
| ------------------- | ------------ | ------------------------------------------------------------ |
| tagType             | (e)          | 内部方法，用于确定标签页的类型                               |
| handleMenuItemClick | (item)       | 内部方法，用于处理用户下拉菜单项的点击事件                   |
| handleTagSelect     | (e, index)   | 内部方法，用于处理标签页的选中事件                           |
| handleCloseTag      | (tag, index) | 内部方法，用于处理关闭单个标签页的事件                       |
| handleCloseTags     | (type)       | 内部方法，用于处理关闭多个标签页的事件                       |
| Logout              | -            | 内部方法，用于处理登出逻辑，支持默认登出确认对话框和自定义登出处理函数 |
| handleOpen          | (p, s)       | 内部方法，用于处理菜单项的展开事件，更新面包屑导航和标签页   |
| handleCollapse      | -            | 内部方法，用于处理侧边栏的折叠和展开                         |

#### 使用示例

##### 父组件模板中使用

```html
<el-admin
  :showTags="true"
  :logo_url="logoUrl"
  :title="title"
  :handleEditPass="handleEditPass"
  :handleLogout="handleLogout"
  :handleSelect="handleMenuSelect"
  :menuData="menuData"
  :currentPath="currentPath"
  :user="user"
  :menuItems="menuItems"
  :uniqueOpened="true"
  :showBreadcrumb="true"
  :asideStyle="asideStyle"
  :headerStyle="headerStyle"
  :textColor="textColor"
  :activeTextColor="activeTextColor"
></el-admin>
```

#### 父组件脚本部分

```javascript
data() {
  return {
    logoUrl: 'https://via.placeholder.com/150', // Logo 图片地址
    title: '管理系统', // 标题
    currentPath: '/', // 当前路径
    menuData: [ // 侧边栏菜单数据
      {
        path: '/',
        title: '首页',
        icon: 'el-icon-house',
        children: []
      },
      {
        path: '/users',
        title: '用户管理',
        icon: 'el-icon-user',
        children: [
          {
            path: '/users/list',
            title: '用户列表'
          },
          {
            path: '/users/roles',
            title: '角色管理'
          }
        ]
      },
      {
        path: '/settings',
        title: '系统设置',
        icon: 'el-icon-setting',
        children: [
          {
            path: '/settings/general',
            title: '常规设置'
          },
          {
            path: '/settings/security',
            title: '安全设置'
          }
        ]
      }
    ],
    user: { // 用户信息
      username: '管理员',
      avatar: 'https://via.placeholder.com/50'
    },
    menuItems: [ // 用户下拉菜单项
      {
        title: '个人资料',
        icon: 'el-icon-user',
        click: () => {
        console.log('个人资料被点击');
      }
      },
      {
        title: '切换账号',
        icon: 'el-icon-switch-button',
        click: () => {
          console.log('切换账号被点击');
        }
      },
      {
        title: '退出登录',
        icon: 'el-icon-close',
        click: () => {
          this.handleLogout();
        }
      }
    ],
    asideStyle: "background-image: linear-gradient(#001529, #001529);", // 侧边栏样式
    headerStyle: "background-image:linear-gradient(to right,#ffffff, #ffffff);", // 顶部导航栏样式
    textColor: "#ffffff", // 文本颜色
    activeTextColor: "#409eff" // 活跃状态文本颜色
  };
},
methods: {
  handleMenuSelect(key, keyPath) {
    console.log('导航菜单被选中:', key, keyPath);
    // 在这里实现导航逻辑，例如路由跳转
  },
  handleEditPass() {
    console.log('编辑密码被点击');
    // 实现编辑密码逻辑
  },
  handleLogout() {
    console.log('执行退出登录逻辑');
    // 实现退出登录功能，例如清除用户信息、跳转到登录页
  }
}
```

#### 组件功能详解

##### 侧边栏菜单

通过 `menuData` 属性传入菜单数据，支持多级菜单结构。每级菜单项可以包含 `path`（路径）、`title`（标题）和 `icon`（图标类名）属性。通过 `handleSelect` 属性传入的函数，可以处理菜单项的选中事件，实现页面导航等功能。

##### 顶部导航栏

顶部导航栏包含系统 Logo 和标题，通过 `logo_url` 和 `title` 属性设置。支持折叠和展开侧边栏的功能，通过点击折叠/展开图标实现。

##### 用户信息和下拉菜单

通过 `user` 属性传入用户信息对象，可以显示用户的用户名和头像。用户头像显示为 40px x 40px 的圆形图片。通过 `menuItems` 属性传入用户下拉菜单项数组，可以自定义用户菜单的内容和功能。每个菜单项可以包含 `title`（菜单名称）、`icon`（图标类名）和 `click`（点击事件回调函数）属性。

##### 标签页

通过 `showTags` 属性控制是否显示标签页。标签页会根据 `menuData` 和 `handleSelect` 的交互自动更新，显示当前打开的页面标签。支持关闭单个标签页和批量关闭标签页（左侧、右侧、全部）。

##### 面包屑导航

通过 `showBreadcrumb` 属性控制是否显示面包屑导航。面包屑导航会根据 `handleOpen` 方法的调用自动更新，显示当前页面的位置路径。

##### 当前选中菜单高亮

通过 `currentPath` 属性，可以设置当前选中的导航菜单项的索引，实现高亮显示效果，帮助用户了解当前所在页面位置。

#### 注意事项

1. 确保传入的 `menuData` 和 `menuItems` 数据结构正确，以保证菜单正常渲染和功能实现。
2. 在处理菜单项点击事件时，根据实际需求实现对应的业务逻辑，例如页面跳转、弹出对话框等。
3. 用户头像和 Logo 图片的 URL 要确保有效，避免图片加载失败影响界面显示。
4. 如果需要扩展更多功能，可以在组件基础上进行二次开发，例如增加搜索框、通知提醒等功能。

- **使用示例**：

```vue
<template>
  <div>
    <el-admin
      :menuData="menuData"
      :currentPath="currentPath"
      :userName="userName"
      :userAvatar="userAvatar"
      @handleSelect="handleSelect"
      @handleLogout="handleLogout"
    ></el-admin>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          title: '首页',
          path: '/home',
          icon: 'el-icon-s-home',
          submenu: []
        },
        {
          title: '用户管理',
          path: '/user',
          icon: 'el-icon-user',
          submenu: [
            {
              title: '用户列表',
              path: '/user/list',
              icon: 'el-icon-menu'
            }
          ]
        }
      ],
      currentPath: '/home',
      userName: '管理员',
      userAvatar: 'https://example.com/avatar.jpg'
    };
  },
  methods: {
    handleSelect(p, s) {
      console.log('handleSelect', p, s);
    },
    handleLogout() {
      console.log('handleLogout');
    }
  }
};
</script>
```

### 6.ElExtendHeader 组件详细使用说明

### 组件功能概述

`ElExtendHeader` 是一个基于 Vue.js 和 Element UI 的自定义头部导航组件，集成了 Logo 显示、导航菜单、用户信息展示和下拉菜单等功能，适用于需要统一头部导航的单页面应用。

### 组件属性说明

| 属性名      | 类型     | 默认值 | 描述                                                 |
| ----------- | -------- | ------ | ---------------------------------------------------- |
| logo_url    | String   | -      | 用于绑定 Logo 图片的 URL 地址                        |
| title       | String   | -      | 用于绑定标题文本，显示在 Logo 旁边                   |
| activeIndex | String   | -      | 当前选中的导航菜单项的索引，用于高亮显示             |
| menuData    | Array    | []     | 导航菜单数据，支持多级菜单结构                       |
| user        | Object   | null   | 用户信息对象，包含用户名和头像                       |
| menuItems   | Array    | -      | 用户下拉菜单项数组，支持自定义菜单项                 |
| select      | Function | -      | 可选的菜单选中事件处理函数，当导航菜单项被选中时触发 |

### 方法说明

| 方法名              | 参数           | 描述                                                         |
| ------------------- | -------------- | ------------------------------------------------------------ |
| localSelect         | (key, keyPath) | 内部方法，用于处理导航菜单项的选中事件，调用父组件传入的 select 方法 |
| handleMenuItemClick | (item)         | 内部方法，用于处理用户下拉菜单项的点击事件，执行菜单项的 click 回调函数 |

### 使用示例

#### 父组件模板中使用

```html
<el-extend-header
  :logo_url="logoUrl"
  :title="title"
  :activeIndex="activeIndex"
  :menuData="menuData"
  :user="user"
  :menuItems="menuItems"
  :select="handleMenuSelect"
></el-extend-header>
```

#### 父组件脚本部分

```javascript
data() {
  return {
    logoUrl: 'https://via.placeholder.com/150', // Logo 图片地址
    title: '系统名称', // 标题
    activeIndex: '/', // 当前选中的导航菜单项
    menuData: [ // 导航菜单数据
      {
        path: '/',
        title: '首页',
        icon: 'el-icon-house'
      },
      {
        path: '/about',
        title: '关于',
        icon: 'el-icon-info',
        children: [
          {
            path: '/company',
            title: '公司介绍'
          },
          {
            path: '/team',
            title: '团队成员'
          }
        ]
      }
    ],
    user: { // 用户信息
      username: '张三',
      avatar: 'https://via.placeholder.com/50'
    },
    menuItems: [ // 用户下拉菜单项
      {
        name: '个人资料',
        icon: 'el-icon-user',
        click: () => {
          console.log('个人资料被点击');
        }
      },
      {
        name: '切换账号',
        icon: 'el-icon-switch-button',
        click: () => {
          console.log('切换账号被点击');
        }
      },
      {
        name: '退出登录',
        icon: 'el-icon-close',
        click: () => {
          this.handleLogout();
        }
      }
    ]
  };
},
methods: {
  handleMenuSelect(key, keyPath) {
    console.log('导航菜单被选中:', key, keyPath);
    // 在这里实现导航逻辑，例如路由跳转
  },
  handleLogout() {
    console.log('执行退出登录逻辑');
    // 实现退出登录功能，例如清除用户信息、跳转到登录页
  }
}
```

### 组件功能详解

#### Logo 和标题显示

通过 `logo_url` 和 `title` 属性，可以轻松设置头部左侧的 Logo 和系统标题。Logo 图片会显示为 40px 高度，标题文本紧随其后。

#### 导航菜单功能

使用 `menuData` 属性传入导航菜单数据，支持多级菜单结构。每级菜单项可以包含 `path`（路径）、`title`（标题）和 `icon`（图标类名）属性。通过 `select` 属性传入的函数，可以处理菜单项的选中事件，实现页面导航等功能。

#### 用户信息和下拉菜单

通过 `user` 属性传入用户信息对象，可以显示用户的用户名和头像。用户头像显示为 40px x 40px 的圆形图片。通过 `menuItems` 属性传入用户下拉菜单项数组，可以自定义用户菜单的内容和功能。每个菜单项可以包含 `name`（菜单名称）、`icon`（图标类名）和 `click`（点击事件回调函数）属性。

#### 当前选中菜单高亮

通过 `activeIndex` 属性，可以设置当前选中的导航菜单项的索引，实现高亮显示效果，帮助用户了解当前所在页面位置。

### 注意事项

1. 确保传入的 `menuData` 和 `menuItems` 数据结构正确，以保证菜单正常渲染和功能实现。
2. 在处理菜单项点击事件时，根据实际需求实现对应的业务逻辑，例如页面跳转、弹出对话框等。
3. 用户头像和 Logo 图片的 URL 要确保有效，避免图片加载失败影响界面显示。
4. 如果需要扩展更多功能，可以在组件基础上进行二次开发，例如增加搜索框、通知提醒等功能。

### 7. ElExtendDialog 组件详细使用说明

#### 功能概述
`ElExtendDialog` 是一个基于 Vue.js 和 Element UI 的增强型对话框组件，集成了关闭确认、表单提交和取消等功能，适用于需要创建自定义对话框的场景。

#### 参数说明

| 参数名          | 类型       | 默认值    | 描述                           |
| --------------- | ---------- | --------- | ------------------------------ |
| `buttonSize`    | `String`   | `"small"` | 按钮大小。                     |
| `dialogTitle`   | `String`   | -         | 对话框标题。                   |
| `closeConfirm`  | `Boolean`  | `true`    | 关闭对话框时是否显示确认提示。 |
| `dialogWidth`   | `String`   | `"40%"`   | 对话框宽度。                   |
| `dialogVisible` | `Boolean`  | `false`   | 控制对话框是否可见。           |
| `footerVisible` | `Boolean`  | `false`   | 是否显示对话框底部的按钮。     |
| `submit`        | `Function` | -         | 提交表单的函数，必填。         |
| `cancel`        | `Function` | -         | 取消表单的函数，必填。         |

#### 方法说明

| 方法名        | 描述                                               |
| ------------- | -------------------------------------------------- |
| `handleClose` | 处理对话框关闭，显示确认提示并调用 `cancel` 方法。 |
| `close`       | 关闭对话框并调用 `cancel` 方法。                   |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElExtendDialog 组件 -->
    <el-extend-dialog
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :footerVisible="footerVisible"
      :submit="handleSubmit"
      :cancel="handleCancel"
    >
      <div slot="default">
        <!-- 对话框内容 -->
        <p>这是一个自定义对话框内容区域。</p>
      </div>
    </el-extend-dialog>
    <el-button @click="openDialog">打开对话框</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 对话框标题
      dialogTitle: '提示',
      // 对话框是否可见
      dialogVisible: false,
      // 按钮大小
      buttonSize: 'small',
      // 对话框宽度
      dialogWidth: '40%',
      // 是否显示对话框底部按钮
      footerVisible: true
    };
  },
  methods: {
    // 打开对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 处理表单提交
    handleSubmit() {
      console.log('表单提交');
      // 在这里执行表单提交逻辑
      this.dialogVisible = false;
    },
    // 处理表单取消
    handleCancel() {
      console.log('表单取消');
      this.dialogVisible = false;
    }
  }
};
</script>
```

##### 子组件（ElExtendDialog）代码解析

```vue
<template>
  <el-dialog
    :title="dialogTitle || $i18n.t('tips')"
    :visible.sync="localDialogVisible"
    :before-close="handleClose"
    :width="dialogWidth"
  >
    <!-- 对话框内容区域 -->
    <slot></slot>

    <!-- 对话框底部按钮区域 -->
    <div slot="footer" class="dialog-footer" v-show="footerVisible">
      <el-button @click="close" :size="buttonSize">
        {{ $i18n.t('cancel') }}
      </el-button>
      <el-button type="primary" @click="submit" :size="buttonSize">
        {{ $i18n.t('determine') }}
      </el-button>
      <slot name="footerButton"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    buttonSize: { type: String, default: "small" },
    dialogTitle: { type: String },
    closeConfirm: { type: Boolean, default: true },
    dialogWidth: { type: String, default: "40%" },
    dialogVisible: { type: Boolean, default: false, required: true },
    footerVisible: { type: Boolean, default: false },
    submit: { type: Function, required: true },
    cancel: { type: Function, required: true }
  },
  data() {
    return {
      localDialogVisible: this.dialogVisible
    };
  },
  watch: {
    dialogVisible(newVal) {
      this.localDialogVisible = newVal;
    }
  },
  methods: {
    handleClose(done) {
      if (this.closeConfirm) {
        this.$confirm(this.$i18n.t('aresureclose'), this.$i18n.t("tips"), {
          type: 'warning',
          customClass: "elmessagebox"
        }).then(() => {
          done();
          this.close(false);
        }).catch(() => {});
      } else {
        this.close(false);
      }
    },
    close(e) {
      this.localDialogVisible = false;
      this.cancel(false);
    }
  }
};
</script>
```

#### 注意事项

1. **对话框内容**：通过插槽 `default` 自定义对话框的内容区域。

2. **底部按钮**：通过 `footerVisible` 控制是否显示底部按钮区域，可以通过插槽 `footerButton` 自定义底部按钮。

3. **国际化**：组件中使用了国际化文本（如 `$i18n.t('cancel')`），需要确保在项目中正确配置了 Vue I18n 并提供了相应的语言包。

4. **样式调整**：根据实际需求调整对话框和按钮的样式，如对话框宽度、按钮大小等。

5. **功能扩展**：组件提供了丰富的功能，可以根据项目需求选择性地使用，如不需要某些功能可以将对应的参数设置为 `false` 或不传递。

- **功能**：用于创建一个可配置的对话框组件。
- **参数**：
  - `buttonSize`：按钮大小，默认为`"small"`。
  - `dialogTitle`：对话框标题。
  - `closeConfirm`：关闭确认，默认为`true`。
  - `dialogWidth`：对话框宽度，默认为`"40%"`。
  - `dialogVisible`：对话框是否可见，默认为`false`。
  - `footerVisible`：底部区域是否可见，默认为`false`。
  - `submit`：提交函数，必填。
  - `cancel`：取消函数，必填。

- **使用示例**：

```vue
<template>
  <div>
    <el-extend-dialog
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :footerVisible="footerVisible"
      @submit="handleSubmit"
      @cancel="handleCancel"
    >
      <div>对话框内容</div>
    </el-extend-dialog>
    <el-button @click="openDialog">打开对话框</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: '提示',
      dialogVisible: false,
      buttonSize: 'small',
      dialogWidth: '40%',
      footerVisible: true
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleSubmit() {
      console.log('submit');
      this.dialogVisible = false;
    },
    handleCancel() {
      console.log('cancel');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 8. ElExtendForm 组件详细使用说明

#### 功能概述
`ElExtendForm` 是一个基于 Vue.js 和 Element UI 的增强型表单组件，支持多种表单字段类型（如输入框、文本域、单选框、复选框、日期选择器等），并集成了表单验证、对话框等功能，适用于需要创建复杂表单的场景。

#### 参数说明

| 参数名          | 类型       | 默认值    | 描述                           |
| --------------- | ---------- | --------- | ------------------------------ |
| `formJson`      | `Array`    | -         | 表单字段配置数组。             |
| `formData`      | `Object`   | -         | 表单数据，用于初始化表单。     |
| `buttonSize`    | `String`   | `"small"` | 按钮大小。                     |
| `dialogTitle`   | `String`   | -         | 对话框标题。                   |
| `popperClass`   | `String`   | -         | 日期选择器的弹出层类名。       |
| `closeConfirm`  | `Boolean`  | `true`    | 关闭对话框时是否显示确认提示。 |
| `dialogWidth`   | `String`   | `"40%"`   | 对话框宽度。                   |
| `dialogVisible` | `Boolean`  | `false`   | 控制对话框是否可见。           |
| `footerVisible` | `Boolean`  | `false`   | 是否显示对话框底部的按钮。     |
| `submit`        | `Function` | -         | 提交表单的函数，必填。         |
| `cancel`        | `Function` | -         | 取消表单的函数，必填。         |

#### 方法说明

| 方法名            | 描述                                                 |
| ----------------- | ---------------------------------------------------- |
| `generateMessage` | 生成表单验证消息。                                   |
| `handleClose`     | 处理对话框关闭，显示确认提示并调用 `cancel` 方法。   |
| `close`           | 关闭对话框并调用 `cancel` 方法。                     |
| `initForm`        | 初始化表单数据，根据 `formJson` 配置设置默认值。     |
| `submitForm`      | 提交表单，执行表单验证并通过 `submit` 方法提交数据。 |

#### 计算属性

| 计算属性名  | 描述                                   |
| ----------- | -------------------------------------- |
| `formRules` | 根据 `formJson` 配置生成表单验证规则。 |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElExtendForm 组件 -->
    <el-extend-form
      :formJson="formJson"
      :formData="formData"
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :footerVisible="footerVisible"
      :submit="handleSubmit"
      :cancel="handleCancel"
    ></el-extend-form>
    <el-button @click="openForm">打开表单</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单字段配置
      formJson: [
        { 
          label: '用户名', 
          prop: 'username', 
          type: 'input', 
          placeholder: '请输入用户名',
          default: '',
          rules: [
            { required: true, message: '用户名不能为空' }
          ]
        },
        { 
          label: '年龄', 
          prop: 'age', 
          type: 'input', 
          placeholder: '请输入年龄',
          default: ''
        },
        { 
          label: '性别', 
          prop: 'gender', 
          type: 'radio', 
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ],
          default: 'male'
        },
        { 
          label: '生日', 
          prop: 'birthday', 
          type: 'date',
          placeholder: '请选择生日',
          default: ''
        }
      ],
      // 表单数据
      formData: {},
      // 对话框标题
      dialogTitle: '用户表单',
      // 对话框是否可见
      dialogVisible: false,
      // 按钮大小
      buttonSize: 'small',
      // 对话框宽度
      dialogWidth: '40%',
      // 是否显示对话框底部按钮
      footerVisible: true
    };
  },
  methods: {
    // 打开表单
    openForm() {
      this.dialogVisible = true;
    },
    // 处理表单提交
    handleSubmit(form) {
      console.log('表单提交', form);
      // 在这里执行表单提交逻辑，比如向后端发送请求
      this.dialogVisible = false;
    },
    // 处理表单取消
    handleCancel() {
      console.log('表单取消');
      this.dialogVisible = false;
    }
  }
};
</script>
```

##### 子组件（ElExtendForm）代码解析

```vue
<template>
  <el-dialog
    :title="dialogTitle || $i18n.t('tips')"
    :visible.sync="localDialogVisible"
    :before-close="handleClose"
    :width="dialogWidth"
  >
    <el-form
      v-if="form"
      :model="form"
      :rules="formRules"
      ref="formRef"
      size="small"
      label-width="6em"
    >
      <el-row>
        <el-col
          v-for="(item, index) in formJson"
          :key="index"
          :span="item.span ? item.span : 12"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <template v-if="item.type === 'input'">
              <el-input
                v-model="form[item.prop]"
                :placeholder="item.placeholder || $i18n.t('pleaseenter')"
                autocomplete="off"
                class="elmy"
              ></el-input>
            </template>
            <template v-if="item.type === 'textarea'">
              <el-input
                type="textarea"
                :rows="item.rows || 2"
                v-model="form[item.prop]"
                autocomplete="off"
                class="elmy"
              ></el-input>
            </template>
            <template v-if="item.type === 'radio'">
              <el-radio-group v-model="form[item.prop]">
                <el-radio
                  v-for="radio in item.options"
                  :label="radio.value"
                  :key="radio.value"
                  :border="item.border"
                >
                  {{ radio.label }}
                </el-radio>
              </el-radio-group>
            </template>
            <template v-if="item.type === 'icon'">
              <el-select-icon
                :chooseIcons="form[item.prop]"
                @update:chooseIcons="form[item.prop] = $event"
                :placeholder="item.placeholder || $i18n.t('pleasechoose')"
                :clearable="!item.required"
              ></el-select-icon>
            </template>
            <template v-if="item.type === 'checkbox'">
              <el-checkbox-group v-model="form[item.prop]" class="elmy">
                <el-checkbox-button
                  v-for="checkbox in item.options"
                  :label="checkbox.value"
                  :key="checkbox.value"
                  :border="item.border"
                >
                  {{ checkbox.label }}
                </el-checkbox-button>
              </el-checkbox-group>
            </template>
            <template v-if="item.type === 'number'">
              <el-input-number
                v-model="form[item.prop]"
                :min="item.min || 1"
                :max="item.max || 10"
                :step="item.step || 1"
                :placeholder="item.placeholder || $i18n.t('pleaseenternumber')"
                class="elmy"
              ></el-input-number>
            </template>
            <template v-if="item.type === 'datetimepicker'">
              <el-date-picker
                v-model="form.appointmentTime"
                :type="item.dateTimePickerType || 'datetime'"
                :placeholder="item.placeholder || $i18n.t('pleaseselectdatetime')"
                :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
                :value-format="item.valueFormat || 'timestamp'"
                :popper-class="popperClass"
              ></el-date-picker>
            </template>
            <template v-if="item.type === 'date'">
              <el-date-picker
                v-model="form[item.prop]"
                type="date"
                :placeholder="item.placeholder"
                :clearable="!item.required"
                class="elmy"
                v-bind="item.comProps"
              ></el-date-picker>
            </template>
            <template v-if="item.type === 'monthrange'">
              <el-date-picker
                v-model="form[item.prop]"
                type="monthrange"
                value-format="YYYY-MM-DD"
                :placeholder="item.placeholder"
                :clearable="!item.required"
                class="elmy"
                v-bind="item.comProps"
              ></el-date-picker>
            </template>
            <template v-if="item.type === 'daterange'">
              <el-date-picker
                v-model="form[item.prop]"
                type="daterange"
                value-format="YYYY-MM-DD"
                :placeholder="item.placeholder"
                :clearable="!item.required"
                class="elmy"
                v-bind="item.comProps"
              ></el-date-picker>
            </template>
            <template v-if="item.type === 'select'">
              <el-select
                v-model="form[item.prop]"
                :placeholder="item.placeholder"
                :clearable="!item.required"
                class="elmy"
                v-bind="item.comProps"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                ></el-option>
              </el-select>
            </template>
            <template v-if="item.type === 'cascader' && item.cascaderData">
              <el-cascader
                :options="item.cascaderData"
                :clearable="!item.required"
                filterable
                :props="item.cascaderProps"
                :placeholder="item.placeholder"
                class="elmy"
                v-bind="item.comProps"
                v-model="form[item.prop]"
              ></el-cascader>
            </template>
            <template v-if="item.type === 'switch'">
              <el-switch
                v-model="form[item.prop]"
                class="elmy"
              ></el-switch>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer" v-show="footerVisible" v-if="form">
      <el-button @click="close" :size="buttonSize">
        {{ $i18n.t('cancel') }}
      </el-button>
      <el-button type="primary" @click="submitForm" :size="buttonSize">
        {{ $i18n.t('determine') }}
      </el-button>
      <slot name="footerButton"></slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    formJson: Array,
    formData: { required: false },
    buttonSize: { type: String, default: "small" },
    dialogTitle: { type: String },
    popperClass: { type: String },
    closeConfirm: { type: Boolean, default: true },
    dialogWidth: { type: String, default: "40%" },
    dialogVisible: { type: Boolean, default: false, required: true },
    footerVisible: { type: Boolean, default: false },
    submit: { type: Function, required: true },
    cancel: { type: Function, required: true }
  },
  data() {
    return {
      localDialogVisible: this.dialogVisible,
      form: {}
    };
  },
  computed: {
    formRules() {
      const rules = {};
      this.formJson.forEach(item => {
        rules[item.prop] = item.rules || [];
      });
      return rules;
    }
  },
  created() {
    this.initForm();
  },
  watch: {
    dialogVisible(newVal) {
      this.localDialogVisible = newVal;
    },
    formData(newVal) {
      this.form = newVal;
    }
  },
  methods: {
    generateMessage(item) {
      return `${item.label} ${this.$i18n.t('cannotnull')}`;
    },
    handleClose(done) {
      if (this.closeConfirm && this.footerVisible) {
        this.$confirm(this.$i18n.t('aresureclose'), this.$i18n.t("tips"), {
          type: 'warning',
          customClass: "elmessagebox"
        }).then(() => {
          done();
          this.close(false);
        }).catch(() => {});
      } else {
        this.close(false);
      }
    },
    close(e) {
      this.localDialogVisible = false;
      this.cancel(false);
    },
    initForm() {
      if (!this.formData) {
        this.form = this.formData;
      } else {
        this.formJson.forEach(item => {
          this.$set(this.form, item.prop, item.default);
        });
      }
    },
    submitForm() {
      this.$refs["formRef"].validate(valid => {
        if (valid) {
          this.submit(this.form);
        }
      });
    }
  }
};
</script>
```

#### 注意事项

1. **表单字段配置**：`formJson` 是一个数组，每个对象代表一个表单字段，需要包含 `label`（标签）、`prop`（字段名）、`type`（字段类型）等属性。根据字段类型的不同，可能还需要配置 `options`（选项列表）、`placeholder`（占位文本）、`rules`（验证规则）等。

2. **表单验证**：组件使用了 Element UI 的表单验证功能，通过 `rules` 属性配置验证规则。需要确保在项目中正确配置了验证规则。

3. **国际化**：组件中使用了国际化文本（如 `$i18n.t('cancel')`），需要确保在项目中正确配置了 Vue I18n 并提供了相应的语言包。

4. **样式调整**：根据实际需求调整表单和对话框的样式，如对话框宽度、标签宽度等。

5. **功能扩展**：组件提供了丰富的功能，可以根据项目需求选择性地使用，如不需要某些功能可以将对应的参数设置为 `false` 或不传递。

- **功能**：用于创建一个可配置的表单组件。
- **参数**：
  - `formJson`：表单字段配置数组。
  - `formData`：表单数据。
  - `buttonSize`：按钮大小，默认为`"small"`。
  - `dialogTitle`：对话框标题。
  - `popperClass`：弹出框类名。
  - `closeConfirm`：关闭确认，默认为`true`。
  - `dialogWidth`：对话框宽度，默认为`"40%"`。
  - `dialogVisible`：对话框是否可见，默认为`false`。
  - `footerVisible`：底部区域是否可见，默认为`false`。
  - `submit`：提交函数，必填。
  - `cancel`：取消函数，必填。

- **使用示例**：

```vue
<template>
  <div>
    <el-extend-form
      :formJson="formJson"
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :footerVisible="footerVisible"
      @submit="handleSubmit"
      @cancel="handleCancel"
    ></el-extend-form>
    <el-button @click="openForm">打开表单</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formJson: [
        {
          label: '用户名',
          prop: 'username',
          type: 'input',
          placeholder: '请输入用户名',
          default: ''
        },
        {
          label: '密码',
          prop: 'password',
          type: 'input',
          placeholder: '请输入密码',
          default: ''
        }
      ],
      dialogTitle: '用户表单',
      dialogVisible: false,
      buttonSize: 'small',
      dialogWidth: '40%',
      footerVisible: true
    };
  },
  methods: {
    openForm() {
      this.dialogVisible = true;
    },
    handleSubmit(form) {
      console.log('submit', form);
      this.dialogVisible = false;
    },
    handleCancel() {
      console.log('cancel');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 9.ElSelectIcon 组件详细使用说明

#### 功能概述
`ElSelectIcon` 是一个基于 Vue.js 和 Element UI 的图标选择组件，允许用户从预定义的图标列表中选择一个图标，并通过事件将选择的图标传递给父组件。适用于需要选择图标的场景，比如设置按钮图标、菜单图标等。

#### 参数说明

| 参数名        | 类型      | 默认值                                | 描述                 |
| ------------- | --------- | ------------------------------------- | -------------------- |
| `placeholder` | `String`  | `Vue.prototype.i18n.t('pleaseenter')` | 输入框的占位文本。   |
| `chooseicons` | `String`  | `''`                                  | 当前选择的图标类名。 |
| `clearable`   | `Boolean` | `true`                                | 是否显示清除按钮。   |

#### 方法说明

| 方法名    | 描述                                                         |
| --------- | ------------------------------------------------------------ |
| `setIcon` | 设置选择的图标，触发 `update:chooseicons` 事件，将选择的图标类名传递给父组件。 |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElSelectIcon 组件 -->
    <el-select-icon
      :placeholder="placeholder"
      :chooseicons="selectedIcon"
      :clearable="clearable"
      @update:chooseicons="handleIconSelect"
    ></el-select-icon>
    <p>选择的图标: {{ selectedIcon }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 占位文本
      placeholder: '请选择图标',
      // 当前选择的图标
      selectedIcon: '',
      // 是否显示清除按钮
      clearable: true
    };
  },
  methods: {
    // 处理图标选择
    handleIconSelect(icon) {
      this.selectedIcon = icon;
      console.log('选择的图标:', icon);
    }
  }
};
</script>
```

##### 子组件（ElSelectIcon）代码解析

```vue
<template>
  <el-popover placement="top-start" :append-to-body="false" trigger="click">
    <!-- 参考元素：输入框 -->
    <div slot="reference" class="iconDiv">
      <el-input
        v-model="chooseicons"
        :placeholder="placeholder"
        autocomplete="off"
        class="elmy"
        :clearable="!clearable"
      >
        <template slot="prepend">
          <!-- 显示当前选择的图标 -->
          <i :class="chooseicons"></i>
        </template>
      </el-input>
    </div>

    <!-- 弹出内容：图标列表 -->
    <div class="iconList">
      <i
        v-for="item in elementIcons"
        :key="item"
        :class="[item, 'icon']"
        @click="setIcon(item)"
      ></i>
    </div>
  </el-popover>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: () => Vue.prototype.i18n.t('pleaseenter')
    },
    chooseicons: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // Element UI 图标列表
      elementIcons: [
        "el-icon-platform-eleme", "el-icon-eleme", "el-icon-delete-solid", "el-icon-delete", "el-icon-s-tools", "el-icon-setting", "el-icon-user-solid", "el-icon-user", "el-icon-phone", "el-icon-phone-outline", "el-icon-more", "el-icon-more-outline", "el-icon-star-on", "el-icon-star-off", "el-icon-s-goods", "el-icon-goods", "el-icon-warning", "el-icon-warning-outline", "el-icon-question", "el-icon-info", "el-icon-remove", "el-icon-circle-plus", "el-icon-success", "el-icon-error", "el-icon-zoom-in", "el-icon-zoom-out", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-circle-check", "el-icon-circle-close", "el-icon-s-help", "el-icon-help", "el-icon-minus", "el-icon-plus", "el-icon-check", "el-icon-close", "el-icon-picture", "el-icon-picture-outline", "el-icon-picture-outline-round", "el-icon-upload", "el-icon-upload2", "el-icon-download", "el-icon-camera-solid", "el-icon-camera", "el-icon-video-camera-solid", "el-icon-video-camera", "el-icon-message-solid", "el-icon-bell", "el-icon-s-cooperation", "el-icon-s-order", "el-icon-s-platform", "el-icon-s-fold", "el-icon-s-unfold", "el-icon-s-operation", "el-icon-s-promotion", "el-icon-s-home", "el-icon-s-release", "el-icon-s-ticket", "el-icon-s-management", "el-icon-s-open", "el-icon-s-shop", "el-icon-s-marketing", "el-icon-s-flag", "el-icon-s-comment", "el-icon-s-finance", "el-icon-s-claim", "el-icon-s-custom", "el-icon-s-opportunity", "el-icon-s-data", "el-icon-s-check", "el-icon-s-grid", "el-icon-menu", "el-icon-share", "el-icon-d-caret", "el-icon-caret-left", "el-icon-caret-right", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-bottom-left", "el-icon-bottom-right", "el-icon-back", "el-icon-right", "el-icon-bottom", "el-icon-top", "el-icon-top-left", "el-icon-top-right", "el-icon-arrow-left", "el-icon-arrow-right", "el-icon-arrow-down", "el-icon-arrow-up", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-video-pause", "el-icon-video-play", "el-icon-refresh", "el-icon-refresh-right", "el-icon-refresh-left", "el-icon-finished", "el-icon-sort", "el-icon-sort-up", "el-icon-sort-down", "el-icon-rank", "el-icon-loading", "el-icon-view", "el-icon-c-scale-to-original", "el-icon-date", "el-icon-edit", "el-icon-edit-outline", "el-icon-folder", "el-icon-folder-opened", "el-icon-folder-add", "el-icon-folder-remove", "el-icon-folder-delete", "el-icon-folder-checked", "el-icon-tickets", "el-icon-document-remove", "el-icon-document-delete", "el-icon-document-copy", "el-icon-document-checked", "el-icon-document", "el-icon-document-add", "el-icon-printer", "el-icon-paperclip", "el-icon-takeaway-box", "el-icon-search", "el-icon-monitor", "el-icon-attract", "el-icon-mobile", "el-icon-scissors", "el-icon-umbrella", "el-icon-headset", "el-icon-brush", "el-icon-mouse", "el-icon-coordinate", "el-icon-magic-stick", "el-icon-reading", "el-icon-data-line", "el-icon-data-board", "el-icon-pie-chart", "el-icon-data-analysis", "el-icon-collection-tag", "el-icon-film", "el-icon-suitcase", "el-icon-suitcase-1", "el-icon-receiving", "el-icon-collection", "el-icon-files", "el-icon-notebook-1", "el-icon-notebook-2", "el-icon-toilet-paper", "el-icon-office-building", "el-icon-school", "el-icon-table-lamp", "el-icon-house", "el-icon-no-smoking", "el-icon-smoking", "el-icon-shopping-cart-full", "el-icon-shopping-cart-1", "el-icon-shopping-cart-2", "el-icon-shopping-bag-1", "el-icon-shopping-bag-2", "el-icon-sold-out", "el-icon-sell", "el-icon-present", "el-icon-box", "el-icon-bank-card", "el-icon-money", "el-icon-coin", "el-icon-wallet", "el-icon-discount", "el-icon-price-tag", "el-icon-news", "el-icon-guide", "el-icon-male", "el-icon-female", "el-icon-thumb", "el-icon-cpu", "el-icon-link", "el-icon-connection", "el-icon-open", "el-icon-turn-off", "el-icon-set-up", "el-icon-chat-round", "el-icon-chat-line-round", "el-icon-chat-square", "el-icon-chat-dot-round", "el-icon-chat-dot-square", "el-icon-chat-line-square", "el-icon-message", "el-icon-postcard", "el-icon-position", "el-icon-turn-off-microphone", "el-icon-microphone", "el-icon-close-notification", "el-icon-bangzhu", "el-icon-time", "el-icon-odometer", "el-icon-crop", "el-icon-aim", "el-icon-switch-button", "el-icon-full-screen", "el-icon-copy-document", "el-icon-mic", "el-icon-stopwatch", "el-icon-medal-1", "el-icon-medal", "el-icon-trophy", "el-icon-trophy-1", "el-icon-first-aid-kit", "el-icon-discover", "el-icon-place", "el-icon-location", "el-icon-location-outline", "el-icon-location-information", "el-icon-add-location", "el-icon-delete-location", "el-icon-map-location", "el-icon-alarm-clock", "el-icon-timer", "el-icon-watch-1", "el-icon-watch", "el-icon-lock", "el-icon-unlock", "el-icon-key", "el-icon-service", "el-icon-mobile-phone", "el-icon-bicycle", "el-icon-truck", "el-icon-ship", "el-icon-basketball", "el-icon-football", "el-icon-soccer", "el-icon-baseball", "el-icon-wind-power", "el-icon-light-rain", "el-icon-lightning", "el-icon-heavy-rain", "el-icon-sunrise", "el-icon-sunrise-1", "el-icon-sunset", "el-icon-sunny", "el-icon-cloudy", "el-icon-partly-cloudy", "el-icon-cloudy-and-sunny", "el-icon-moon", "el-icon-moon-night", "el-icon-dish", "el-icon-dish-1", "el-icon-food", "el-icon-chicken", "el-icon-fork-spoon", "el-icon-knife-fork", "el-icon-burger", "el-icon-tableware", "el-icon-sugar", "el-icon-dessert", "el-icon-ice-cream", "el-icon-hot-water", "el-icon-water-cup", "el-icon-coffee-cup", "el-icon-cold-drink", "el-icon-goblet", "el-icon-goblet-full", "el-icon-goblet-square", "el-icon-goblet-square-full", "el-icon-refrigerator", "el-icon-grape", "el-icon-watermelon", "el-icon-cherry", "el-icon-apple", "el-icon-pear", "el-icon-orange", "el-icon-coffee", "el-icon-ice-tea", "el-icon-ice-drink", "el-icon-milk-tea", "el-icon-potato-strips", "el-icon-lollipop", "el-icon-ice-cream-square", "el-icon-ice-cream-round"
      ]
    };
  },
  methods: {
    // 设置选择的图标
    setIcon(icon) {
      this.$emit("update:chooseicons", icon);
    }
  }
};
</script>
```

#### 注意事项

1. **图标列表**：组件中内置了 Element UI 的图标列表，如果需要使用其他图标，可以修改 `elementIcons` 数组。

2. **样式调整**：根据实际需求调整组件的样式，如输入框宽度、图标列表布局等。

3. **事件监听**：组件通过 `update:chooseicons` 事件将选择的图标传递给父组件，需要在父组件中监听该事件并处理。

4. **国际化**：组件中使用了国际化文本（如 `Vue.prototype.i18n.t('pleaseenter')`），需要确保在项目中正确配置了 Vue I18n 并提供了相应的语言包。

### 10.ElExtendSearch 组件详细使用说明

#### 功能概述
`ElExtendSearch` 是一个基于 Vue.js 和 Element UI 的增强型搜索表单组件，支持多种表单字段类型（如输入框、下拉选择、单选框等），并集成了搜索、重置和添加等功能，适用于需要进行数据筛选和查询的场景。

#### 参数说明

| 参数名          | 类型       | 默认值    | 描述                         |
| --------------- | ---------- | --------- | ---------------------------- |
| `showSearch`    | `Boolean`  | `true`    | 是否显示搜索按钮。           |
| `showRefresh`   | `Boolean`  | `true`    | 是否显示重置按钮。           |
| `showAdd`       | `Boolean`  | `true`    | 是否显示添加按钮。           |
| `filterJson`    | `Array`    | -         | 搜索表单的字段配置数组。     |
| `openAddDialog` | `Function` | -         | 打开添加对话框的函数。       |
| `search`        | `Function` | -         | 搜索函数，用于处理搜索逻辑。 |
| `buttonSize`    | `String`   | `"small"` | 按钮大小。                   |

#### 方法说明

| 方法名               | 描述                                                         |
| -------------------- | ------------------------------------------------------------ |
| `initForm`           | 初始化表单数据，根据 `filterJson` 配置设置默认值。           |
| `localOpenAddDialog` | 打开添加对话框，初始化表单数据并调用传入的 `openAddDialog` 函数。 |
| `localSearch`        | 执行搜索，调用传入的 `search` 函数。                         |
| `onReset`            | 重置表单数据，初始化表单并重新执行搜索。                     |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElExtendSearch 组件 -->
    <el-extend-search
      :filterJson="filterJson"
      :openAddDialog="openAddDialog"
      :search="handleSearch"
      :buttonSize="buttonSize"
      :showSearch="showSearch"
      :showRefresh="showRefresh"
      :showAdd="showAdd"
    ></el-extend-search>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索表单字段配置
      filterJson: [
        { label: '姓名', prop: 'name', type: 'input', default: '', placeholder: '请输入姓名' },
        { 
          label: '性别', 
          prop: 'gender', 
          type: 'select', 
          default: '', 
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ] 
        },
        { 
          label: '状态', 
          prop: 'status', 
          type: 'radio', 
          default: '', 
          options: [
            { label: '启用', value: 'active' },
            { label: '禁用', value: 'inactive' }
          ] 
        }
      ],
      // 按钮大小
      buttonSize: 'small',
      // 是否显示搜索按钮
      showSearch: true,
      // 是否显示重置按钮
      showRefresh: true,
      // 是否显示添加按钮
      showAdd: true
    };
  },
  methods: {
    // 打开添加对话框
    openAddDialog(filter, event) {
      console.log('打开添加对话框', filter, event);
      // 在这里可以打开一个对话框，比如使用 ElExtendDialog 或其他对话框组件
    },
    // 处理搜索
    handleSearch({ filter }) {
      console.log('搜索', filter);
      // 在这里执行搜索逻辑，比如向后端发送请求
    }
  }
};
</script>
```

##### 子组件（ElExtendSearch）代码解析

```vue
<template>
  <el-row type="flex" align="center" :gutter="20">
    <el-col :xs="12" :sm="15" :md="15" :lg="16" :xl="19">
      <el-form
        :inline="true"
        :model="filter"
        ref="filterRef"
        :size="buttonSize"
        label-width="6em"
      >
        <el-form-item
          v-for="(item, index) in filterJson"
          :key="index"
          :label="item.label + ' :' "
          :prop="item.prop"
        >
          <template v-if="item.type === 'input'">
            <el-input
              v-model="filter[item.prop]"
              :placeholder="item.placeholder || $i18n.t('pleaseenter')"
              autocomplete="off"
              clearable
            ></el-input>
          </template>
          <template v-if="item.type === 'select'">
            <el-select
              v-model="filter[item.prop]"
              :placeholder="item.placeholder || $i18n.t('pleasechoose')"
              clearable
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </template>
          <template v-if="item.type === 'radio'">
            <el-radio-group v-model="filter[item.prop]" class="elmy">
              <el-radio
                v-for="radio in item.options"
                :label="radio.value"
                :key="radio.value"
              >
                {{ radio.label }}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-if="item.type === 'checkbox'">
            <el-checkbox-group v-model="filter[item.prop]">
              <el-checkbox-button
                v-for="checkbox in item.options"
                :label="checkbox.value"
                :key="checkbox.value"
                border
                class="elmy"
              >
                {{ checkbox.label }}
              </el-checkbox-button>
            </el-checkbox-group>
          </template>
          <template v-if="item.type === 'datetimepicker'">
            <el-date-picker
              v-model="filter.appointmentTime"
              :type="item.dateTimePickerType || 'datetime'"
              :placeholder="item.placeholder || $i18n.t('pleaseselectdatetime')"
              :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
              :value-format="item.valueFormat || 'timestamp'"
            >
            </el-date-picker>
          </template>
          <template v-if="item.type === 'switch'">
            <el-switch v-model="filter[item.prop]" class="elmy"></el-switch>
          </template>
        </el-form-item>
        <slot name="search"></slot>
      </el-form>
    </el-col>
    <el-col :xs="12" :sm="9" :md="9" :lg="8" :xl="5" style="text-align: right;">
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-search"
        v-on:click="localSearch"
        v-if="showSearch"
        plain
      >
        {{ $i18n.t('query') }}
      </el-button>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-plus"
        v-if="showAdd"
        v-on:click="localOpenAddDialog"
        plain
      >
        {{ $i18n.t('addnew') }}
      </el-button>
      <el-button
        type="default"
        size="mini"
        icon="el-icon-refresh"
        v-on:click="onReset"
        v-if="showRefresh"
        plain
      >
        {{ $i18n.t('reset') }}
      </el-button>
      <slot name="btntool"></slot>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    showSearch: { type: Boolean, default: true },
    showRefresh: { type: Boolean, default: true },
    showAdd: { type: Boolean, default: true },
    filterJson: Array,
    openAddDialog: Function,
    search: Function,
    buttonSize: { type: String, default: "small" }
  },
  data() {
    return {
      filter: {}
    };
  },
  created() {
    this.initForm();
  },
  methods: {
    initForm() {
      this.filterJson.forEach(item => {
        this.$set(this.filter, item.prop, item.default);
      });
    },
    localOpenAddDialog(e) {
      this.initForm();
      this.openAddDialog(this.filter, e);
    },
    localSearch() {
      this.search({ filter: this.filter });
    },
    onReset() {
      this.initForm();
      this.search({ filter: this.filter });
    }
  }
};
</script>
```

#### 注意事项

1. **表单字段配置**：`filterJson` 是一个数组，每个对象代表一个表单字段，需要包含 `label`（标签）、`prop`（字段名）、`type`（字段类型）等属性。

2. **国际化**：组件中使用了国际化文本（如 `$i18n.t('query')`），需要确保在项目中正确配置了 Vue I18n 并提供了相应的语言包。

3. **样式调整**：根据实际需求调整表单和按钮的样式，如按钮大小、标签宽度等。

4. **功能扩展**：组件提供了丰富的功能，可以根据项目需求选择性地使用，如不需要某些功能可以将对应的参数设置为 `false` 或不传递。

### 11. ElExtendTable 组件详细使用说明

#### 功能概述
`ElExtendTable` 是一个基于 Vue.js 和 Element UI 的增强型表格组件，集成了分页、操作列等功能，适用于需要进行数据列表展示和操作的场景。

#### 参数说明

| 参数名         | 类型       | 默认值                 | 描述                                           |
| -------------- | ---------- | ---------------------- | ---------------------------------------------- |
| `isDelete`     | `Boolean`  | `true`                 | 是否显示删除按钮。                             |
| `isEdit`       | `Boolean`  | `true`                 | 是否显示编辑按钮。                             |
| `emptyText`    | `String`   | -                      | 数据为空时显示的文本。                         |
| `size`         | `String`   | -                      | 表格大小。                                     |
| `columns`      | `Array`    | -                      | 表格列配置。                                   |
| `tableData`    | `Array`    | -                      | 表格数据。                                     |
| `totalRows`    | `Number`   | `0`                    | 数据总条数，用于分页。                         |
| `primaryKey`   | `String`   | `"id"`                 | 表格数据的主键字段。                           |
| `loadData`     | `Function` | -                      | 加载数据的函数，用于分页或搜索后重新加载数据。 |
| `prevText`     | `String`   | -                      | 分页上一页文本。                               |
| `nextText`     | `String`   | -                      | 分页下一页文本。                               |
| `linkText`     | `String`   | -                      | 链接文本，用于操作列。                         |
| `handleLink`   | `Function` | -                      | 处理链接点击的函数。                           |
| `toolVisible`  | `Boolean`  | `false`                | 是否显示操作列。                               |
| `viewDetail`   | `Function` | -                      | 查看详情的函数。                               |
| `handleEdit`   | `Function` | -                      | 处理编辑的函数。                               |
| `handleDelete` | `Function` | -                      | 处理删除的函数。                               |
| `pageSizes`    | `Array`    | `[10, 20, 30, 40, 50]` | 每页显示条数的选项。                           |

#### 方法说明

| 方法名                | 描述                                                       |
| --------------------- | ---------------------------------------------------------- |
| `handleSizeChange`    | 处理每页显示条数变化，重新加载数据。                       |
| `handleCurrentChange` | 处理当前页码变化，重新加载数据。                           |
| `localHandleDetail`   | 查看详情，调用传入的 `viewDetail` 函数。                   |
| `localHandleEdit`     | 处理编辑，调用传入的 `handleEdit` 函数。                   |
| `localHandleLink`     | 处理链接点击，调用传入的 `handleLink` 函数。               |
| `localHandleDelete`   | 处理删除，显示确认对话框并调用传入的 `handleDelete` 函数。 |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElExtendTable 组件 -->
    <el-extend-table
      :columns="columns"
      :tableData="tableData"
      :totalRows="totalRows"
      :primaryKey="primaryKey"
      :loadData="loadData"
      :handleEdit="handleEdit"
      :handleDelete="handleDelete"
      :viewDetail="viewDetail"
      :handleLink="handleLink"
      :linkText="linkText"
      :isEdit="isEdit"
      :isDelete="isDelete"
      :emptyText="emptyText"
      :pageSizes="pageSizes"
      :prevText="prevText"
      :nextText="nextText"
      :toolVisible="toolVisible"
    ></el-extend-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格列配置
      columns: [
        { label: 'ID', prop: 'id', textAlign: 'center' },
        { label: '姓名', prop: 'name', textAlign: 'center' },
        { label: '年龄', prop: 'age', textAlign: 'center' }
      ],
      // 表格数据
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      // 数据总条数
      totalRows: 2,
      // 主键字段
      primaryKey: 'id',
      // 每页显示条数选项
      pageSizes: [10, 20, 30, 40, 50],
      // 分页上一页文本
      prevText: '上一页',
      // 分页下一页文本
      nextText: '下一页',
      // 链接文本
      linkText: '查看详情',
      // 是否显示编辑按钮
      isEdit: true,
      // 是否显示删除按钮
      isDelete: true,
      // 空数据文本
      emptyText: '暂无数据',
      // 是否显示操作列
      toolVisible: true
    };
  },
  methods: {
    // 加载数据
    loadData(query) {
      console.log('加载数据', query);
      // 模拟异步加载数据
      setTimeout(() => {
        // 更新表格数据和总条数
        this.tableData = [
          { id: 1, name: '张三', age: 25 },
          { id: 2, name: '李四', age: 30 }
        ];
        this.totalRows = 2;
      }, 500);
    },
    // 处理编辑
    handleEdit(e) {
      console.log('编辑', e);
    },
    // 处理删除
    handleDelete(e) {
      console.log('删除', e);
      // 模拟删除操作
      this.tableData = this.tableData.filter(item => item.id !== e.row.id);
      this.totalRows = this.tableData.length;
    },
    // 查看详情
    viewDetail(e) {
      console.log('查看详情', e);
    },
    // 处理链接点击
    handleLink(e) {
      console.log('链接点击', e);
    }
  }
};
</script>
```

##### 子组件（ElExtendTable）代码解析

```vue
<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 15px;"
      :size="size"
      stripe
      border
      :empty-text="emptyText"
      class="elmy"
    >
      <!-- 索引列 -->
      <el-table-column type="index" align="center"></el-table-column>

      <!-- 动态列 -->
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :align="column.textAlign"
        :fixed="column.fixed"
        :show-overflow-tooltip="column.showOverflowTooltip"
        :width="column.width"
        :formatter="column.formatter"
      ></el-table-column>

      <!-- 操作列 -->
      <el-table-column
        width="260"
        :label="$i18n.t('operation')"
        fixed="right"
        v-if="localToolVisible"
      >
        <template slot-scope="scope">
          <!-- 链接按钮 -->
          <el-button
            type="text"
            v-if="linkText !== undefined"
            size="mini"
            @click="localHandleLink({ index: scope.$index, key: scope.row[primaryKey], row: scope.row })"
          >
            {{ linkText }}
          </el-button>

          <!-- 查看详情按钮 -->
          <el-tooltip :content="$i18n.t('viewrecord')" placement="bottom" v-if="viewDetail !== undefined">
            <el-button
              type="default"
              size="mini"
              icon="el-icon-view"
              @click="localHandleDetail({ index: scope.$index, key: scope.row[primaryKey], row: scope.row })"
            ></el-button>
          </el-tooltip>

          <!-- 编辑按钮 -->
          <el-tooltip :content="$i18n.t('modifyrecord')" placement="bottom" v-if="handleEdit !== undefined">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              v-if="isEdit"
              @click="localHandleEdit({ index: scope.$index, key: scope.row[primaryKey], row: scope.row })"
            ></el-button>
          </el-tooltip>

          <!-- 删除按钮 -->
          <el-tooltip :content="$i18n.t('deleterecord')" placement="bottom" v-if="handleDelete !== undefined">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete-solid"
              v-if="isDelete"
              @click="localHandleDelete({ index: scope.$index, key: scope.row[primaryKey], row: scope.row })"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableQuery.pageNo"
      :page-sizes="tableQuery.pageSizes"
      :page-size="tableQuery.pageSize"
      :prev-text="prevText"
      :next-text="nextText"
      layout="total, sizes, prev, pager, next, jumper"
      :total="localTotalRows"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    isDelete: { type: Boolean, default: true },
    isEdit: { type: Boolean, default: true },
    emptyText: String,
    size: String,
    columns: Array,
    tableData: Array,
    totalRows: { type: Number, default: 0 },
    primaryKey: { type: String, default: "id" },
    loadData: Function,
    prevText: { type: String, required: false },
    nextText: { type: String, required: false },
    linkText: { type: String, required: false },
    handleLink: { type: Function, required: false },
    toolVisible: { type: Boolean, default: false },
    viewDetail: Function,
    handleEdit: Function,
    handleDelete: Function,
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50],
      required: false
    }
  },
  data() {
    return {
      localToolVisible: false,
      tableQuery: {
        pageNo: 1,
        pageSize: 10,
        pageSizes: this.pageSizes
      },
      localTotalRows: 0
    };
  },
  created() {
    // 初始化操作列是否显示
    this.localToolVisible = this.toolVisible || !((this.viewDetail === undefined) || (this.handleEdit === undefined) || (this.handleDelete === undefined));
  },
  mounted() {
    // 初始化分页配置
    this.localTotalRows = this.totalRows;
    this.tableQuery.pageSizes = this.pageSizes;
  },
  methods: {
    // 处理每页显示条数变化
    handleSizeChange(val) {
      this.tableQuery.pageNo = 1;
      this.tableQuery.pageSize = val;
      this.loadData({ curry: this.tableQuery });
    },
    // 处理当前页码变化
    handleCurrentChange(val) {
      this.tableQuery.pageNo = val;
      this.loadData({ curry: this.tableQuery });
    },
    // 查看详情
    localHandleDetail(e) {
      this.viewDetail(e);
    },
    // 处理编辑
    localHandleEdit(e) {
      this.handleEdit(e);
    },
    // 处理链接点击
    localHandleLink(e) {
      this.handleLink(e);
    },
    // 处理删除
    localHandleDelete(e) {
      this.$confirm(this.$i18n.t('confirmdelete'), this.$i18n.t('tips'), {
        confirmButtonText: this.$i18n.t('determine'),
        cancelButtonText: this.$i18n.t('cancel'),
        type: 'error',
        customClass: "elmessagebox"
      })
        .then(() => {
          this.handleDelete(e);
        })
        .catch(() => {
          console.info('删除操作已取消');
        });
    }
  },
  watch: {
    // 监听总条数变化
    totalRows(n) {
      this.localTotalRows = n;
    }
  }
};
</script>
```

#### 注意事项

1. **数据格式**：确保传递给组件的 `tableData` 和 `columns` 数据格式正确，`tableData` 应为数组，`columns` 应为包含列配置的对象数组。

2. **回调函数**：如果需要使用编辑、删除等功能，确保传递了对应的回调函数（如 `handleEdit`、`handleDelete`）。

3. **国际化**：组件中使用了国际化文本（如 `this.$i18n.t('operation')`），需要确保在项目中正确配置了 Vue I18n 并提供了相应的语言包。

4. **样式调整**：根据实际需求调整表格和分页的样式，如表格高度、分页位置等。

5. **功能扩展**：组件提供了丰富的功能，可以根据项目需求选择性地使用，如不需要某些功能可以将对应的参数设置为 `false` 或不传递。

- **功能**：用于创建一个可配置的表格组件。
- **参数**：
  - `isDelete`：是否显示删除按钮，默认为`true`。
  - `isEdit`：是否显示编辑按钮，默认为`true`。
  - `emptyText`：空数据文本。
  - `size`：表格大小。
  - `columns`：表格列配置数组。
  - `tableData`：表格数据数组。
  - `totalRows`：总行数，默认为`0`。
  - `primaryKey`：主键，默认为`"id"`。
  - `loadData`：加载数据函数，必填。
  - `prevText`：上一页文本。
  - `nextText`：下一页文本。
  - `linkText`：链接文本。
  - `handleLink`：处理链接点击的函数。
  - `toolVisible`：工具栏是否可见，默认为`false`。
  - `viewDetail`：查看详情函数。
  - `handleEdit`：处理编辑的函数。
  - `handleDelete`：处理删除的函数。
  - `pageSizes`：每页显示条数选项。

- **使用示例**：

```vue
<template>
  <div>
    <el-extend-table
      :columns="columns"
      :tableData="tableData"
      :totalRows="totalRows"
      :primaryKey="primaryKey"
      :loadData="loadData"
      :viewDetail="viewDetail"
      :handleEdit="handleEdit"
      :handleDelete="handleDelete"
      :pageSizes="pageSizes"
      :linkText="linkText"
      :handleLink="handleLink"
    ></el-extend-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: '用户名',
          prop: 'username',
          textAlign: 'center'
        },
        {
          label: '年龄',
          prop: 'age',
          textAlign: 'center'
        }
      ],
      tableData: [
        { id: 1, username: '张三', age: 25 },
        { id: 2, username: '李四', age: 30 }
      ],
      totalRows: 2,
      primaryKey: 'id',
      pageSizes: [10, 20, 30, 40, 50],
      linkText: '查看详情'
    };
  },
  methods: {
    loadData(query) {
      console.log('loadData', query);
    },
    viewDetail(e) {
      console.log('viewDetail', e);
    },
    handleEdit(e) {
      console.log('handleEdit', e);
    },
    handleDelete(e) {
      console.log('handleDelete', e);
    },
    handleLink(e) {
      console.log('handleLink', e);
    }
  }
};
</script>
```

### 12.ElTableList 组件详细使用说明

#### 功能概述
`ElTableList` 是一个基于 Vue.js 和 Element UI 的组件，集成了搜索表单、数据表格和表单对话框等功能，适用于需要进行数据列表展示、搜索筛选、添加编辑数据的场景。

#### 参数说明

| 参数名          | 类型       | 默认值                 | 描述                                           |
| --------------- | ---------- | ---------------------- | ---------------------------------------------- |
| `linkText`      | `String`   | -                      | 链接文本，用于表格中的操作列。                 |
| `handleLink`    | `Function` | -                      | 处理链接点击的函数。                           |
| `emptyText`     | `String`   | -                      | 数据为空时显示的文本。                         |
| `pageSizes`     | `Array`    | `[10, 20, 30, 40, 50]` | 每页显示条数的选项。                           |
| `showSearch`    | `Boolean`  | `true`                 | 是否显示搜索表单。                             |
| `showRefresh`   | `Boolean`  | `true`                 | 是否显示刷新按钮。                             |
| `isDelete`      | `Boolean`  | `true`                 | 是否显示删除按钮。                             |
| `isEdit`        | `Boolean`  | `true`                 | 是否显示编辑按钮。                             |
| `showAdd`       | `Boolean`  | `true`                 | 是否显示添加按钮。                             |
| `buttonSize`    | `String`   | -                      | 按钮大小。                                     |
| `primaryKey`    | `String`   | `"id"`                 | 表格数据的主键字段。                           |
| `filterJson`    | `Array`    | -                      | 搜索表单的字段配置。                           |
| `tableData`     | `Array`    | -                      | 表格数据。                                     |
| `totalRows`     | `Number`   | `0`                    | 数据总条数，用于分页。                         |
| `columns`       | `Array`    | -                      | 表格列配置。                                   |
| `dialogWidth`   | `String`   | -                      | 表单对话框的宽度。                             |
| `formJson`      | `Array`    | -                      | 表单对话框的字段配置。                         |
| `dialogVisible` | `Boolean`  | -                      | 控制表单对话框的显示状态。                     |
| `prevText`      | `String`   | -                      | 分页上一页文本。                               |
| `nextText`      | `String`   | -                      | 分页下一页文本。                               |
| `loadData`      | `Function` | -                      | 加载数据的函数，用于分页或搜索后重新加载数据。 |
| `delete`        | `Function` | -                      | 删除数据的函数。                               |
| `submit`        | `Function` | -                      | 提交表单的函数。                               |
| `detail`        | `Function` | -                      | 查看详情的函数。                               |

#### 事件说明

| 事件名   | 描述                                           |
| -------- | ---------------------------------------------- |
| `submit` | 当表单提交时触发，可以用来执行保存或更新逻辑。 |
| `cancel` | 当关闭表单对话框时触发，可以用来执行取消逻辑。 |

#### 方法说明

| 方法名             | 描述                                                  |
| ------------------ | ----------------------------------------------------- |
| `initForm`         | 初始化表单数据。                                      |
| `handleOpenDialog` | 打开编辑表单对话框，传入参数 `e` 可以预填充表单数据。 |
| `handleOpenAdd`    | 打开添加表单对话框。                                  |
| `handleClose`      | 关闭表单对话框。                                      |
| `handleLoadData`   | 处理加载数据，用于分页或搜索后重新加载表格数据。      |
| `handleDelete`     | 处理删除操作。                                        |
| `submitForm`       | 提交表单数据，调用传入的 `submit` 函数。              |
| `viewDetailDialog` | 查看详情，打开只读的表单对话框。                      |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElTableList 组件 -->
    <el-table-list
      :columns="columns"
      :tableData="tableData"
      :totalRows="totalRows"
      :filterJson="filterJson"
      :formJson="formJson"
      :loadData="loadData"
      :delete="handleDelete"
      :submit="handleSubmit"
      :detail="handleDetail"
      :isDelete="isDelete"
      :isEdit="isEdit"
      :showAdd="showAdd"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :primaryKey="primaryKey"
      :pageSizes="pageSizes"
      :linkText="linkText"
      :handleLink="handleLink"
      :emptyText="emptyText"
      :showSearch="showSearch"
      :showRefresh="showRefresh"
    ></el-table-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表格列配置
      columns: [
        { label: 'ID', prop: 'id', textAlign: 'center' },
        { label: '姓名', prop: 'name', textAlign: 'center' },
        { label: '年龄', prop: 'age', textAlign: 'center' }
      ],
      // 表格数据
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ],
      // 数据总条数
      totalRows: 2,
      // 搜索表单字段配置
      filterJson: [
        { label: '姓名', prop: 'name', type: 'input', default: '' },
        { label: '年龄', prop: 'age', type: 'input', default: '' }
      ],
      // 表单对话框字段配置
      formJson: [
        { label: '姓名', prop: 'name', type: 'input', default: '' },
        { label: '年龄', prop: 'age', type: 'input', default: '' }
      ],
      // 是否显示删除按钮
      isDelete: true,
      // 是否显示编辑按钮
      isEdit: true,
      // 是否显示添加按钮
      showAdd: true,
      // 按钮大小
      buttonSize: 'small',
      // 表单对话框宽度
      dialogWidth: '40%',
      // 主键字段
      primaryKey: 'id',
      // 每页显示条数选项
      pageSizes: [10, 20, 30, 40, 50],
      // 链接文本
      linkText: '查看详情',
      // 空数据文本
      emptyText: '暂无数据',
      // 是否显示搜索表单
      showSearch: true,
      // 是否显示刷新按钮
      showRefresh: true
    };
  },
  methods: {
    // 加载数据
    loadData(query) {
      console.log('加载数据', query);
      // 模拟异步加载数据
      setTimeout(() => {
        // 更新表格数据和总条数
        this.tableData = [
          { id: 1, name: '张三', age: 25 },
          { id: 2, name: '李四', age: 30 }
        ];
        this.totalRows = 2;
      }, 500);
    },
    // 处理删除
    handleDelete(e) {
      console.log('删除', e);
      // 模拟删除操作
      this.tableData = this.tableData.filter(item => item.id !== e.row.id);
      this.totalRows = this.tableData.length;
    },
    // 提交表单
    handleSubmit(data) {
      console.log('提交表单', data);
      // 模拟添加或更新数据
      if (data.id) {
        // 更新
        const index = this.tableData.findIndex(item => item.id === data.id);
        if (index !== -1) {
          this.tableData.splice(index, 1, data);
        }
      } else {
        // 添加
        data.id = this.tableData.length + 1;
        this.tableData.push(data);
      }
      this.totalRows = this.tableData.length;
      return false; // 返回 false 表示不关闭对话框，true 表示关闭
    },
    // 查看详情
    handleDetail(e) {
      console.log('查看详情', e);
    },
    // 处理链接点击
    handleLink(e) {
      console.log('链接点击', e);
    }
  }
};
</script>
```

##### 子组件（ElTableList）代码解析

```vue
<template>
  <div>
    <el-main>
      <!-- 搜索表单 -->
      <el-extend-search
        :search="handleLoadData"
        :open-add-dialog="handleOpenAdd"
        :button-size="buttonSize"
        :filter-json="filterJson"
        :show-search="showSearch"
        :show-add="showAdd"
        :show-refresh="showRefresh"
      >
        <slot name="search"></slot>
      </el-extend-search>

      <!-- 数据表格 -->
      <el-row type="flex" align="center">
        <el-col :span="24" style="padding: 10px 0 0 0;">
          <el-extend-table
            ref="ElExtendTable"
            :columns="columns"
            :tool-visible="false"
            :table-data="tableData"
            :total-rows="totalRows"
            :prev-text="prevText"
            :next-text="nextText"
            :primary-key="primaryKey"
            :load-data="handleLoadData"
            :view-detail="viewDetailDialog"
            :handle-edit="handleOpenDialog"
            :is-delete="isDelete"
            :is-edit="isEdit"
            :handle-delete="handleDelete"
            :page-sizes="pageSizes"
            :link-text="linkText"
            :handle-link="handleLink"
          >
            <slot name="columns"></slot>
          </el-extend-table>
        </el-col>
      </el-row>
    </el-main>

    <!-- 表单对话框 -->
    <el-extend-form
      :form-json="formJson"
      :button-size="buttonSize"
      :submit="submitForm"
      :form-data="formData"
      :dialog-title="dialogTitle"
      v-loading.fullscreen.lock="loading"
      :close-confirm="true"
      :dialog-width="dialogWidth"
      :dialog-visible="localDialogVisible"
      :cancel="handleClose"
      :footer-visible="footerVisible"
    >
      <slot name="formtemp"></slot>
    </el-extend-form>
  </div>
</template>

<script>
export default {
  props: {
    linkText: { type: String, required: false },
    handleLink: { type: Function, required: false },
    emptyText: String,
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50],
      required: false
    },
    showSearch: { type: Boolean, default: true },
    showRefresh: { type: Boolean, default: true },
    isDelete: { type: Boolean, default: true },
    isEdit: { type: Boolean, default: true },
    showAdd: { type: Boolean, default: true },
    buttonSize: String,
    primaryKey: { type: String, default: "id" },
    filterJson: Array,
    tableData: Array,
    totalRows: { type: Number, default: 0 },
    columns: Array,
    dialogWidth: String,
    formJson: Array,
    dialogVisible: Boolean,
    prevText: { type: String, required: false },
    nextText: { type: String, required: false },
    loadData: Function,
    delete: Function,
    submit: Function,
    detail: Function
  },
  data() {
    return {
      filter: {},
      localDialogVisible: false,
      footerVisible: true,
      loading: false,
      initFormData: {},
      formData: {},
      dialogTitle: this.$i18n.t('tips')
    };
  },
  watch: {
    dialogVisible(newVal) {
      this.localDialogVisible = newVal;
    }
  },
  created() {
    this.initForm();
  },
  methods: {
    initForm() {
      this.formJson.forEach(item => {
        this.$set(this.formData, item.prop, item.default);
      });
      this.initFormData = this.formData;
    },
    handleOpenDialog(e) {
      this.footerVisible = true;
      if (e) {
        this.formData = e.row;
      } else {
        this.formData = this.initFormData;
      }
      this.localDialogVisible = true;
    },
    handleOpenAdd() {
      this.footerVisible = true;
      this.formData = {};
      this.initForm();
      this.localDialogVisible = true;
    },
    handleClose(e) {
      console.log(e);
      this.localDialogVisible = e;
    },
    handleLoadData(e) {
      if (e) {
        this.filter = e.filter;
      }
      this.loadData(e);
    },
    handleDelete(e) {
      return this.delete(e);
    },
    submitForm(data) {
      this.localDialogVisible = this.submit(data);
    },
    viewDetailDialog(e) {
      if (e) {
        this.formData = e.row;
      }
      this.footerVisible = false;
      this.localDialogVisible = this.dialogVisible;
      this.detail(e);
    }
  }
};
</script>
```

#### 注意事项

1. **数据一致性**：确保传递给组件的数据格式与组件期望的格式一致，特别是在表格数据和表单数据之间保持字段名和数据类型的统一。

2. **异步操作**：在处理数据加载、提交等异步操作时，确保正确使用回调函数或 Promise，以避免数据不同步的问题。

3. **国际化**：组件中使用了国际化文本（如 `this.$i18n.t('tips')`），需要确保在项目中正确配置了 Vue I18n 并提供了相应的语言包。

4. **样式调整**：根据实际需求调整组件的样式，如对话框宽度、按钮大小等，以确保在不同屏幕尺寸下都有良好的显示效果。

5. **功能扩展**：组件提供了丰富的功能，可以根据项目需求选择性地使用，如不需要某些功能可以将对应的参数设置为 `false` 或不传递。

### 13. ElOpen 组件详细使用说明

#### 功能概述
`ElOpen` 是一个基于 Vue.js 和 Element UI 的组件，用于在对话框中嵌入一个 iframe 来加载和显示外部资源。这个组件适用于需要在当前应用中展示外部内容的场景，比如预览文章、显示帮助文档、嵌入第三方服务等。

#### 参数说明

| 参数名          | 类型                 | 默认值                       | 描述                                                         |
| --------------- | -------------------- | ---------------------------- | ------------------------------------------------------------ |
| `dialogtitle`   | `String`             | `""`                         | 对话框标题。如果为空，则使用国际化文本 `tips`。              |
| `showsubmit`    | `Boolean`            | `true`                       | 是否显示提交按钮。                                           |
| `showcancel`    | `Boolean`            | `true`                       | 是否显示取消按钮。                                           |
| `dialogvisible` | `Boolean`            | `false`                      | 控制对话框是否可见。                                         |
| `dialogtop`     | `Number` 或 `String` | `"5vh"`                      | 对话框距离顶部的距离，可以是像素值（如 `50`）或百分比（如 `"10%"`）。 |
| `dialogwidth`   | `Number` 或 `String` | `"50%"`                      | 对话框的宽度，可以是像素值（如 `500`）或百分比（如 `"80%"`）。 |
| `dialogstyle`   | `String`             | `"width:100%;height:300px;"` | 对话框内 iframe 的样式，可以自定义高度、宽度等。             |
| `url`           | `String`             | `""`                         | 要加载的外部资源的 URL，必填参数。                           |

#### 事件说明

| 事件名   | 描述                                                     |
| -------- | -------------------------------------------------------- |
| `submit` | 当点击提交按钮时触发，可以用来执行提交逻辑。             |
| `cancel` | 当点击取消按钮或关闭对话框时触发，可以用来执行取消逻辑。 |

#### 方法说明

| 方法名        | 描述                                                         |
| ------------- | ------------------------------------------------------------ |
| `onCancel`    | 关闭对话框并触发 `cancel` 事件。                             |
| `onSubmit`    | 触发 `submit` 事件。                                         |
| `handleClose` | 在对话框关闭前触发的方法，用于确认是否关闭对话框。默认会弹出一个确认框。 |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElOpen 组件 -->
    <el-open
      :url="externalUrl"
      :dialogtitle="dialogTitle"
      :dialogvisible="dialogVisible"
      :dialogwidth="dialogWidth"
      :dialogtop="dialogTop"
      :dialogstyle="dialogStyle"
      :showsubmit="showSubmit"
      :showcancel="showCancel"
      @submit="handleSubmit"
      @cancel="handleCancel"
    ></el-open>

    <!-- 触发按钮 -->
    <el-button type="primary" @click="openDialog">打开外部资源</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 外部资源的 URL
      externalUrl: 'https://example.com',
      // 对话框标题
      dialogTitle: '外部资源预览',
      // 控制对话框是否可见
      dialogVisible: false,
      // 对话框宽度
      dialogWidth: '80%',
      // 对话框距离顶部的距离
      dialogTop: '5vh',
      // 对话框内 iframe 的样式
      dialogStyle: 'width:100%;height:600px;',
      // 是否显示提交按钮
      showSubmit: true,
      // 是否显示取消按钮
      showCancel: true
    };
  },
  methods: {
    // 打开对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 处理提交事件
    handleSubmit() {
      console.log('提交按钮被点击');
      // 执行提交逻辑
      this.dialogVisible = false;
    },
    // 处理取消事件
    handleCancel() {
      console.log('取消按钮或关闭对话框');
      // 执行取消逻辑
      this.dialogVisible = false;
    }
  }
};
</script>
```

##### 子组件（ElOpen）代码解析

```vue
<template>
  <el-dialog
    :title="dialogtitle || i18n.t('tips')"
    :visible="isVisible"
    :width="dialogwidth"
    :top="dialogtop"
    :close-on-click-modal="false"
    :before-close="handleClose"
    @close="onCancel"
  >
    <!-- 使用 iframe 嵌入外部资源 -->
    <iframe
      :src="url"
      frameborder="0"
      width="100%"
      :style="dialogstyle"
    ></iframe>

    <!-- 对话框底部按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button
        v-on:click="onCancel"
        size="small"
        v-if="showCancel"
      >
        {{ i18n.t('cancel') }}
      </el-button>
      <el-button
        type="primary"
        v-on:click="onSubmit"
        size="small"
        v-if="showSubmit"
      >
        {{ i18n.t('determine') }}
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogtitle: {
      type: String,
      default: ""
    },
    showsubmit: {
      type: Boolean,
      default: true
    },
    showcancel: {
      type: Boolean,
      default: true
    },
    dialogvisible: {
      type: Boolean,
      required: true,
      default: false
    },
    dialogtop: {
      type: [Number, String],
      default: "5vh"
    },
    dialogwidth: {
      type: [Number, String],
      default: "50%"
    },
    dialogstyle: {
      type: String,
      default: "width:100%;height:300px;"
    },
    url: {
      type: String,
      required: true,
      default: ""
    }
  },
  data() {
    return {
      isVisible: this.dialogvisible,
      showSubmit: this.showsubmit,
      showCancel: this.showcancel
    };
  },
  methods: {
    onCancel() {
      this.$emit("cancel");
      this.$emit("update:dialogvisible", false);
    },
    onSubmit() {
      this.$emit("submit");
      this.$emit("update:dialogvisible", false);
    },
    handleClose(done) {
      this.$confirm(this.i18n.t('aresureclose'), this.i18n.t("tips"), {
        type: 'warning',
        customClass: "elmessagebox"
      })
        .then(() => {
          done();
          this.$emit("cancel");
          this.$emit("update:dialogvisible", false);
        })
        .catch(() => {
          // 用户取消关闭操作
        });
    }
  },
  watch: {
    dialogvisible(newVal) {
      this.isVisible = newVal;
    }
  }
};
</script>
```

#### 注意事项

1. **跨域问题**：由于浏览器的同源策略，iframe 中的外部资源无法与父页面直接交互。如果需要与 iframe 中的内容进行交互，确保外部资源与当前应用在同一域名下，或者使用 `postMessage` API 进行跨域通信。

2. **性能问题**：加载大型或复杂的外部资源可能会对应用性能产生影响。如果发现性能问题，可以考虑限制 iframe 的高度和宽度，或者在对话框关闭时销毁 iframe。

3. **安全性**：加载不可信的外部资源可能存在安全风险，比如恶意脚本注入。确保加载的外部资源来源可靠。

4. **样式适配**：根据实际需求调整对话框的宽度、高度和位置，确保在不同屏幕尺寸下都有良好的显示效果。

5. **按钮显示**：通过 `showsubmit` 和 `showcancel` 属性可以控制对话框底部按钮的显示。如果不需要提交或取消按钮，可以将对应的属性设置为 `false`。

- **功能**：用于创建一个可打开外部链接的对话框组件。
- **参数**：
  - `dialogtitle`：对话框标题，默认为空。
  - `showsubmit`：是否显示提交按钮，默认为`true`。
  - `showcancel`：是否显示取消按钮，默认为`true`。
  - `dialogvisible`：对话框是否可见，默认为`false`。
  - `dialogtop`：对话框顶部位置，默认为`"5vh"`。
  - `dialogwidth`：对话框宽度，默认为`"50%"`。
  - `dialogstyle`：对话框样式。
  - `url`：外部链接地址。

- **使用示例**：

```vue
<template>
  <div>
    <el-open
      :url="url"
      :dialogtitle="dialogtitle"
      :dialogvisible="dialogVisible"
      :dialogwidth="dialogwidth"
      :dialogtop="dialogtop"
      :dialogstyle="dialogstyle"
      :showsubmit="showsubmit"
      :showcancel="showcancel"
      @submit="handleSubmit"
      @cancel="handleCancel"
    ></el-open>
    <el-button @click="openLink">打开链接</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      dialogtitle: '外部链接',
      dialogVisible: false,
      dialogwidth: '50%',
      dialogtop: '5vh',
      dialogstyle: 'width:100%;height:300px;',
      showsubmit: true,
      showcancel: true
    };
  },
  methods: {
    openLink() {
      this.dialogVisible = true;
    },
    handleSubmit() {
      console.log('submit');
      this.dialogVisible = false;
    },
    handleCancel() {
      console.log('cancel');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 14. ElOpenWeb 组件详细使用说明

#### 功能概述
`ElOpenWeb` 是一个基于 Vue.js 和 Element UI 的组件，用于在对话框中嵌入一个 iframe 来加载和显示外部网页。这个组件适用于需要在当前应用中展示外部网页内容的场景，比如预览文章、显示帮助文档、嵌入第三方服务等。

#### 参数说明

| 参数名          | 类型                 | 默认值                            | 描述                                                         |
| --------------- | -------------------- | --------------------------------- | ------------------------------------------------------------ |
| `dialogtitle`   | `String`             | `Vue.prototype.i18n.t('tips')`    | 对话框标题。                                                 |
| `dialogvisible` | `Boolean`            | `false`                           | 控制对话框是否可见。                                         |
| `dialogtop`     | `Number` 或 `String` | `"5vh"`                           | 对话框距离顶部的距离，可以是像素值（如 `50`）或百分比（如 `"10%"`）。 |
| `dialogwidth`   | `Number` 或 `String` | `"50%"`                           | 对话框的宽度，可以是像素值（如 `500`）或百分比（如 `"80%"`）。 |
| `dialogstyle`   | `String`             | `"width:100%;height:380px;"`      | 对话框内 iframe 的样式，可以自定义高度、宽度等。             |
| `url`           | `String`             | `""`                              | 要加载的外部网页的 URL，必填参数。                           |
| `close`         | `Function`           | `() => { dialogvisible = false }` | 关闭对话框的回调函数，默认行为是将 `dialogvisible` 设置为 `false`。 |

#### 事件说明

| 事件名  | 描述                                                     |
| ------- | -------------------------------------------------------- |
| `close` | 当对话框关闭时触发，可以用来执行一些清理操作或更新状态。 |

#### 方法说明

| 方法名        | 描述                                                         |
| ------------- | ------------------------------------------------------------ |
| `onClose`     | 关闭对话框的方法，会触发 `close` 事件。                      |
| `beforeClose` | 在对话框关闭前触发的方法，用于确认是否关闭对话框。默认会弹出一个确认框。 |

#### 使用示例

##### 父组件中引入和使用

```vue
<template>
  <div>
    <!-- 使用 ElOpenWeb 组件 -->
    <el-open-web
      :url="externalUrl"
      :dialogtitle="dialogTitle"
      :dialogvisible="dialogVisible"
      :dialogwidth="dialogWidth"
      :dialogtop="dialogTop"
      :dialogstyle="dialogStyle"
      @close="handleClose"
    ></el-open-web>

    <!-- 触发按钮 -->
    <el-button type="primary" @click="openDialog">打开外部网页</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 外部网页的 URL
      externalUrl: 'https://example.com',
      // 对话框标题
      dialogTitle: '外部网页预览',
      // 控制对话框是否可见
      dialogVisible: false,
      // 对话框宽度
      dialogWidth: '80%',
      // 对话框距离顶部的距离
      dialogTop: '5vh',
      // 对话框内 iframe 的样式
      dialogStyle: 'width:100%;height:600px;'
    };
  },
  methods: {
    // 打开对话框
    openDialog() {
      this.dialogVisible = true;
    },
    // 处理对话框关闭事件
    handleClose() {
      console.log('对话框已关闭');
      // 可以在这里执行其他操作，比如重置数据等
    }
  }
};
</script>
```

##### 子组件（ElOpenWeb）代码解析

```vue
<template>
  <el-dialog
    :title="dialogtitle"
    :visible="isVisible"
    :width="dialogwidth"
    :top="dialogtop"
    :close-on-click-modal="true"
    :show-close="true"
    :before-close="beforeClose"
    @close="onClose"
  >
    <!-- 使用 iframe 嵌入外部网页 -->
    <iframe
      ref="iframe"
      :src="url"
      width="100%"
      :style="dialogstyle"
      style="border:none;"
      class="iframe"
      frameborder="0"
      scrolling="yes"
      name="iframe"
      id="iframe"
      seamless
    >
      <!-- 如果浏览器不支持 iframe，则显示以下内容 -->
      {{ Vue.prototype.i18n.t('browserversionlow') }}
    </iframe>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogtitle: {
      type: String,
      // 默认值为国际化文本 'tips'
      default: () => Vue.prototype.i18n.t('tips')
    },
    dialogvisible: {
      type: Boolean,
      required: true,
      default: false
    },
    dialogtop: {
      type: [Number, String],
      default: "5vh"
    },
    dialogwidth: {
      type: [Number, String],
      default: "50%"
    },
    dialogstyle: {
      type: String,
      default: "width:100%;height:380px;"
    },
    url: {
      type: String,
      required: true,
      default: ""
    },
    close: {
      type: Function,
      default: () => {
        dialogvisible = false;
      }
    }
  },
  data() {
    return {
      isVisible: this.dialogvisible
    };
  },
  methods: {
    onClose() {
      this.$emit("close");
    },
    beforeClose(done) {
      this.$confirm(Vue.prototype.i18n.t('aresureclose'))
        .then(() => {
          done();
          this.$emit("close");
        })
        .catch(() => {
          // 用户取消关闭操作
        });
    }
  },
  mounted() {
    // 初始化时同步 dialogvisible 的值
    this.dialogvisible = this.isVisible;
  },
  watch: {
    dialogvisible(v) {
      this.isVisible = v;
    }
  }
};
</script>
```

#### 注意事项

1. **跨域问题**：由于浏览器的同源策略，iframe 中的外部网页无法与父页面直接交互。如果需要与 iframe 中的内容进行交互，确保外部网页与当前应用在同一域名下，或者使用 `postMessage` API 进行跨域通信。

2. **性能问题**：加载大型或复杂的外部网页可能会对应用性能产生影响。如果发现性能问题，可以考虑限制 iframe 的高度和宽度，或者在对话框关闭时销毁 iframe。

3. **安全性**：加载不可信的外部网页可能存在安全风险，比如恶意脚本注入。确保加载的外部网页来源可靠。

4. **样式适配**：根据实际需求调整对话框的宽度、高度和位置，确保在不同屏幕尺寸下都有良好的显示效果。

- **功能**：用于创建一个可打开外部网页的对话框组件。
- **参数**：
  - `dialogtitle`：对话框标题，默认为`"tips"`。
  - `dialogvisible`：对话框是否可见，默认为`false`。
  - `dialogtop`：对话框顶部位置，默认为`"5vh"`。
  - `dialogwidth`：对话框宽度，默认为`"50%"`。
  - `dialogstyle`：对话框样式。
  - `url`：外部链接地址。

- **使用示例**：

```vue
<template>
  <div>
    <el-open-web
      :url="url"
      :dialogtitle="dialogtitle"
      :dialogvisible="dialogVisible"
      :dialogwidth="dialogwidth"
      :dialogtop="dialogtop"
      :dialogstyle="dialogstyle"
      @close="handleClose"
    ></el-open-web>
    <el-button @click="openWeb">打开网页</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      dialogtitle: '外部网页',
      dialogVisible: false,
      dialogwidth: '50%',
      dialogtop: '5vh',
      dialogstyle: 'width:100%;height:380px;'
    };
  },
  methods: {
    openWeb() {
      this.dialogVisible = true;
    },
    handleClose() {
      console.log('close');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 15. ModifyRecord 组件

- **功能**：用于显示记录的修改详情。
- **参数**：
  - `data`：记录数据，默认为空对象。

- **使用示例**：

```vue
<template>
  <div>
    <modify-record :data="data"></modify-record>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        creator: '张三',
        createTime: '2023-01-01',
        modifier: '李四',
        modifyTime: '2023-01-02',
        remark: '测试记录'
      }
    };
  }
};
</script>
```

### 16. Permissions 工具

- **功能**：用于管理用户权限。
- **方法**：
  - `setPermissions(newPermissions)`：设置权限。
  - `getPermissions()`：获取权限。
  - `hasPermission(permission)`：检查是否有某个权限。
  - `avePermission(permission)`：检查是否有某个权限（若没有权限配置则返回`true`）。

- **使用示例**：

```javascript
// 设置权限
Permissions.setPermissions(['edit', 'delete']);

// 获取权限
console.log(Permissions.getPermissions()); // ['edit', 'delete']

// 检查权限
console.log(Permissions.hasPermission('edit')); // true
console.log(Permissions.hasPermission('view')); // false

// 检查权限（若没有权限配置则返回true）
console.log(Permissions.avePermission('edit')); // true
console.log(Permissions.avePermission('view')); // true（若没有权限配置）
```



## 补充说明

### window.localStorage 浏览器永久缓存
 method set 设置永久缓存
 method get 获取永久缓存
 method remove 移除永久缓存
 method clear 移除全部永久缓存

### Message、MessageBox.alert、Notification

this.Message

this.Alert.success

this.Alert.warning

this.Alert.error

this.Alert.info

this.Notification

### 1. ElAdmin 组件 管理系统布局组件



- **功能**：用于创建一个带有侧边栏、头部、标签页等功能的布局组件。
- **参数**：
  - `showTags`：是否显示标签页，默认为`false`。
  - `logoSrc`：侧边栏logo图片地址。
  - `logoTitle`：侧边栏标题。
  - `handleEditPass`：处理修改密码的函数。
  - `handleLogout`：处理登出的函数。
  - `handleSelect`：处理菜单选择的函数。
  - `menuData`：菜单数据数组。
  - `currentPath`：当前路径。
  - `userName`：用户名称。
  - `userAvatar`：用户头像地址。
  - `editPassTxt`：修改密码文本。
  - `loginOutTxt`：登出文本。
  - `uniqueOpened`：是否只保持一个子菜单展开，默认为`false`。
  - `showBreadcrumb`：是否显示面包屑，默认为`false`。
  - `asideStyle`：侧边栏样式。
  - `headerStyle`：头部样式。
  - `textColor`：文字颜色。
  - `activeTextColor`：激活状态文字颜色。
  - `tagselect`：标签页选中样式。

- **使用示例**：

```vue
<template>
  <div>
    <el-admin
      :menuData="menuData"
      :currentPath="currentPath"
      :userName="userName"
      :userAvatar="userAvatar"
      @handleSelect="handleSelect"
      @handleLogout="handleLogout"
    ></el-admin>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        {
          title: '首页',
          path: '/home',
          icon: 'el-icon-s-home',
          submenu: []
        },
        {
          title: '用户管理',
          path: '/user',
          icon: 'el-icon-user',
          submenu: [
            {
              title: '用户列表',
              path: '/user/list',
              icon: 'el-icon-menu'
            }
          ]
        }
      ],
      currentPath: '/home',
      userName: '管理员',
      userAvatar: 'https://example.com/avatar.jpg'
    };
  },
  methods: {
    handleSelect(p, s) {
      console.log('handleSelect', p, s);
    },
    handleLogout() {
      console.log('handleLogout');
    }
  }
};
</script>
```



使用实例
```
<el-admin logo-src="/img/logo.png"
  logo-title="订单管理系统"
  :menu-data="menuData"
  user-name=""
  user-avatar=""
  v-on:handle-edit-pass=""
  v-on:handle-logout=""
  v-bind:background-color="backgroundColor"
  v-bind:text-color="textColor"
  v-bind:active-text-color="activeTextColor">
  <div style="border:2px solid #0094ff;width:100%;height:100%;" >内容</div>
</el-admin>
```
数据
``` 
menuData: [{ title: "导航1", path: "/d1", icon: "el-icon-menu",submenu: [ { title: "导航2",path: "/d2",icon: "el-icon-location",},{ title: "导航3",path: "/d3",icon: "el-icon-setting",}] },]

```
![el-admin](Doc/img/el-admin.png)
### 2. ElExtendDialog 组件  头布局组件

- **功能**：用于创建一个可配置的对话框组件。
- **参数**：
  - `buttonSize`：按钮大小，默认为`"small"`。
  - `dialogTitle`：对话框标题。
  - `closeConfirm`：关闭确认，默认为`true`。
  - `dialogWidth`：对话框宽度，默认为`"40%"`。
  - `dialogVisible`：对话框是否可见，默认为`false`。
  - `footerVisible`：底部区域是否可见，默认为`false`。
  - `submit`：提交函数，必填。
  - `cancel`：取消函数，必填。

- **使用示例**：

```vue
<template>
  <div>
    <el-extend-dialog
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :footerVisible="footerVisible"
      @submit="handleSubmit"
      @cancel="handleCancel"
    >
      <div>对话框内容</div>
    </el-extend-dialog>
    <el-button @click="openDialog">打开对话框</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTitle: '提示',
      dialogVisible: false,
      buttonSize: 'small',
      dialogWidth: '40%',
      footerVisible: true
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    handleSubmit() {
      console.log('submit');
      this.dialogVisible = false;
    },
    handleCancel() {
      console.log('cancel');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 

```
<el-extend-header 
    logo-src="/img/logo.png" 
    logo-title="订单管理系统" 
    :menu-data="menuData" 
    :active-index="activeIndex" 
    user-name="百里东君" 
    user-avatar="" 
    login-out-txt="">
</el-extend-header>
```
数据
```
menuData: [{ title: "周期作业", path: "/dashboard" },{ title: "执行日志", path: "/log" },{ title: "作业分析", path: "/period" },{ title: "设置", path: "/setting" },{ title: "Info", path: "/Info" },],
activeIndex: "/dashboard",
```
![el-extend-header](Doc/img/el-header.png)
### el-extend-dialog 对话框扩展组件

```
<el-extend-dialog :dialog-visible="dialogVisible" :submit="submitForm" :cancel="handleClose"></el-extend-dialog> 

dialogVisible: false,
handleClose(e) { this.dialogVisible = e;},
handleClose(e) { this.dialogVisible = e;},

submitForm(e) {
    var that = this;
    that.$refs["dialogForm"].validate((valid) => {
        if (valid) {
            //todo...
        }
    });
},

```
![el-extend-dialog](Doc/img/el-dialog.png)
### el-extend-form 表单组件
```
<el-extend-form :form-json="formJson" :submit="submitForm" :form-data="formData" v-loading.fullscreen.lock="loading"
                    :dialog-width="dialogWidth" :dialog-visible="dialogVisible" :cancel="handleClose" :footer-visible="footerVisible"></el-extend-form>
  dialogTitle:"",
  dialogVisible: false,
  footerVisible: true, 
  dialogWidth: "30%",
  buttonSize: "small",

  loading: false,
  formData: {},
  formJson: [
      {type: 'input',label: '大大姓名',prop: 'name',default: '', // 默认值为空字符串
          rules: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]},
      { type: 'select', label: '性别', prop: 'gender', default: null, // 对于选择类型，默认值可以设置为 null
          options: [{ label: '男', value: 'male' },{ label: '女', value: 'female' }],rules: [{ required: true, message: '性别不能为空' }]
      }, 
      {type: 'switch',label: '是否同意',prop: 'isAgree',default: false, // 开关默认状态为 false，表示关闭
      rules: [{ required: true, message: '请确认是否同意', trigger: 'change' }]},
      {type: 'datetimepicker',label: '预约时间',prop: 'appointmentTime',default: null, // 可以设置默认值，也可以不设置
          placeholder: '请选择预约时间',format: 'yyyy-MM-dd HH:mm:ss',valueFormat: 'yyyy-MM-dd HH:mm:ss',dateTimePickerType: 'datetime', // 可以是 'date' | 'datetime' | 'year' | 'month' | 'time' 等rules: [    { required: true, message: '预约时间不能为空', trigger: 'change' }]},
      {
          type: 'number', // 新增的数字输入框类型
          label: '数量',prop: 'quantity',min: 1, // 最小值
          max: 100, // 最大值
          step: 1, // 步长
          placeholder: '请输入数量', // 占位符
          default: 1, // 默认值
          rules: [{ required: true, message: '数量不能为空', trigger: 'blur' },{ type: 'number', message: '数量必须为数字', trigger: 'blur' }]
      },
      {type: 'radio',label: '爱好',prop: 'hobby', default: undefined, // 单选默认值可以设置为 undefined 或第一个选项的值
          options: [    { label: '足球', value: 'soccer' },    { label: '篮球', value: 'basketball' }],rules: [{ required: true, message: '请选择爱好', trigger: 'change' }]},
      {type: 'checkbox',label: '技能',prop: 'skills', default: [], // 多选默认值应为数组
          options: [{ label: '编程', value: 'coding' },{ label: '设计', value: 'design' },{ label: '测试', value: 'test' },{ label: '部署', value: 'uat' },],rules: [{ required: true, message: '请选择至少一个技能', trigger: 'change' }]
      }
  ],

  handleClose(e) {  this.dialogVisible = e;  },
  submitForm(data) {},
  loadData(index, row) {   var that = this;   that.dialogVisible = true;   that.formData = {};},

```
![el-extend-form](Doc/img/el-form-new.png)
![el-extend-form-view](Doc/img/el-form-view.png)
![el-extend-form-loading](Doc/img/el-form-loading.png)
### el-extend-search 扩展搜索
```
<el-main>
   <el-extend-search :load-data="handleLoadData" :add="handleAdd" :filter-json="filterJson"
   :show-search="true"
   :show-add="true"
   :show-refresh="true"
   ></el-extend-search>

filterJson: [
{"type": "input","label": "大大姓名","prop": "name","default": ""},
{"type": "select","label": "性别","prop": "gender","default": null,"options": [    { "label": "男", "value": "male" },    { "label": "女", "value": "female" }]},
{"type": "switch","label": "是否同意","prop": "isAgree","default": false},
{"type": "datetimepicker","label": "预约时间","prop": "appointmentTime","default": null,"placeholder": "请选择预约时间","format": "yyyy-MM-dd HH:mm:ss","valueFormat": "yyyy-MM-dd HH:mm:ss","dateTimePickerType": "datetime"},                      
{"type": "radio","label": "爱好","prop": "hobby","default": undefined,"options": [    { "label": "足球", "value": "soccer" },    { "label": "篮球", "value": "basketball" }    // 可以添加更多选项]},
{"type": "checkbox","label": "技能","prop": "skills","default": [],"options": [    { "label": "编程", "value": "coding" },    { "label": "设计", "value": "design" },    { "label": "测试", "value": "test" },    { "label": "部署", "value": "uat" },]}
],

handleAdd() { },
handleLoadData(data) {console.log(data) }
```
![el-extend-search](Doc/img/el-search.png)



### 3. ElExtendForm 组件 扩展表

- **功能**：用于创建一个可配置的表单组件。
- **参数**：
  - `formJson`：表单字段配置数组。
  - `formData`：表单数据。
  - `buttonSize`：按钮大小，默认为`"small"`。
  - `dialogTitle`：对话框标题。
  - `popperClass`：弹出框类名。
  - `closeConfirm`：关闭确认，默认为`true`。
  - `dialogWidth`：对话框宽度，默认为`"40%"`。
  - `dialogVisible`：对话框是否可见，默认为`false`。
  - `footerVisible`：底部区域是否可见，默认为`false`。
  - `submit`：提交函数，必填。
  - `cancel`：取消函数，必填。

- **使用示例**：

```vue
<template>
  <div>
    <el-extend-form
      :formJson="formJson"
      :dialogTitle="dialogTitle"
      :dialogVisible="dialogVisible"
      :buttonSize="buttonSize"
      :dialogWidth="dialogWidth"
      :footerVisible="footerVisible"
      @submit="handleSubmit"
      @cancel="handleCancel"
    ></el-extend-form>
    <el-button @click="openForm">打开表单</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formJson: [
        {
          label: '用户名',
          prop: 'username',
          type: 'input',
          placeholder: '请输入用户名',
          default: ''
        },
        {
          label: '密码',
          prop: 'password',
          type: 'input',
          placeholder: '请输入密码',
          default: ''
        }
      ],
      dialogTitle: '用户表单',
      dialogVisible: false,
      buttonSize: 'small',
      dialogWidth: '40%',
      footerVisible: true
    };
  },
  methods: {
    openForm() {
      this.dialogVisible = true;
    },
    handleSubmit(form) {
      console.log('submit', form);
      this.dialogVisible = false;
    },
    handleCancel() {
      console.log('cancel');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 

```
<el-row type="flex" align="center">
 <el-col :span="24" style="padding: 10px 0 0 0;">
     <el-extend-table :columns="columns"
     :tool-visible="false"
     :table-data="tableData"
     primary-key="name"
     :load-data="loadData"
     :handle-detail="handleEdit"
     :handle-edit="handleEdit"
     :handle-delete="handleEdit"
     :page-sizes=[]
     ></el-extend-table>
 * 
tableData: [{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles',},],
columns: [{prop: "date",label: "日期",width: 180}, ],
handleEdit(e) {}
```
![el-extend-table](Doc/img/el-table.png)
### el-table-list 扩展编辑列表

```
  <el-table-list :button-size="buttonSize" v-loading.fullscreen.lock="fullscreenLoading"
                       :dialog-visible="dialogVisible"
                       :filter-json="filterJson"
                       :table-data="tableData"
                       :columns="columns"
                       :total-rows="totalRows"
                       :prev-text="prevText"
                       :next-text="nextText"
                       :dialog-width="dialogWidth"
                       :form-json="formJson"
                       :load-data="handleLoadData"
                       :delete="handleDelete"
                       :submit="submitForm"
                       :detail="viewDetailDialog"></el-table-list>

var $taskVue = new Vue({
     el: "#main",
     data() {
         return {
             fullscreenLoading: false,
             prevText: "上一页",
             nextText: "下一页",
             buttonSize: "small",

             filterJson: [
                 {
                     "type": "input",
                     "label": "大大姓名",
                     "prop": "name",
                     "default": ""
                 },
                 {
                     "type": "select",
                     "label": "性别",
                     "prop": "gender",
                     "default": null,
                     "options": [
                         { "label": "男", "value": "male" },
                         { "label": "女", "value": "female" }
                     ]
                 },
                 {
                     "type": "switch",
                     "label": "是否同意",
                     "prop": "isAgree",
                     "default": false
                 },
                 {
                     "type": "datetimepicker",
                     "label": "预约时间",
                     "prop": "appointmentTime",
                     "default": null,
                     "placeholder": "请选择预约时间",
                     "format": "yyyy-MM-dd HH:mm:ss",
                     "valueFormat": "yyyy-MM-dd HH:mm:ss",
                     "dateTimePickerType": "datetime"
                 },
                 {
                     "type": "radio",
                     "label": "爱好",
                     "prop": "hobby",
                     "default": undefined,
                     "options": [
                         { "label": "足球", "value": "soccer" },
                         { "label": "篮球", "value": "basketball" }
                     ]
                 },
                 {
                     "type": "checkbox",
                     "label": "技能",
                     "prop": "skills",
                     "default": [],
                     "options": [
                         { "label": "编程", "value": "coding" },
                         { "label": "设计", "value": "design" },
                         { "label": "测试", "value": "test" },
                         { "label": "部署", "value": "uat" },
                     ]
                 }
             ],
             tableData: [
                 {
                     "name": "张三2",
                     "appointmentTime": "2024-08-22",
                     "gender": "male",
                     "isAgree": true,
                     "quantity": 10,
                     "hobby": "soccer",
                     "skills": ["coding", "design"]
                 }, {
                     "name": "张三",
                     "appointmentTime": "2024-08-22",
                     "gender": "male",
                     "isAgree": true,
                     "quantity": 10,
                     "hobby": "soccer",
                     "skills": ["coding", "design"]
                 },
                 {
                     "name": "李四",
                     "appointmentTime": "2024-08-23",
                     "gender": "female",
                     "isAgree": false,
                     "quantity": 5,
                     "hobby": "basketball",
                     "skills": ["design", "test"]
                 },
                 {
                     "name": "王五",
                     "appointmentTime": "2024-08-24",
                     "gender": "male",
                     "isAgree": true,
                     "quantity": 20,
                     "hobby": "soccer",
                     "skills": ["coding", "uat"]
                 },
                 {
                     "name": "赵六",
                     "appointmentTime": "2024-08-25",
                     "gender": "female",
                     "isAgree": true,
                     "quantity": 15,
                     "hobby": "basketball",
                     "skills": ["coding", "design", "test"]
                 },
                 {
                     "name": "孙七",
                     "appointmentTime": "2024-08-26",
                     "gender": "male",
                     "isAgree": false,
                     "quantity": 5,
                     "hobby": "soccer",
                     "skills": ["test", "uat"]
                 },
                 {
                     "name": "周八",
                     "appointmentTime": "2024-08-27",
                     "gender": "female",
                     "isAgree": true,
                     "quantity": 10,
                     "hobby": "basketball",
                     "skills": ["coding", "design"]
                 },
                 {
                     "name": "吴九",
                     "appointmentTime": "2024-08-28",
                     "gender": "male",
                     "isAgree": true,
                     "quantity": 20,
                     "hobby": "soccer",
                     "skills": ["design", "test", "uat"]
                 },
                 {
                     "name": "郑十",
                     "appointmentTime": "2024-08-29",
                     "gender": "female",
                     "isAgree": false,
                     "quantity": 15,
                     "hobby": "basketball",
                     "skills": ["coding", "uat"]
                 },
                 {
                     "name": "王十一",
                     "appointmentTime": "2024-08-30",
                     "gender": "male",
                     "isAgree": true,
                     "quantity": 25,
                     "hobby": "soccer",
                     "skills": ["coding", "design", "test"]
                 },
                 {
                     "name": "陈十二",
                     "appointmentTime": "2024-08-31",
                     "gender": "female",
                     "isAgree": true,
                     "quantity": 30,
                     "hobby": "basketball",
                     "skills": ["coding", "design", "test", "uat"]
                 }
             ],
             columns: [
                 {
                     prop: "name",
                     label: "姓名", textAlign: "center",
                     width: 180
                 },
                 {
                     prop: "appointmentTime",
                     label: "预约时间",
                     width: 180
                 },
                 {
                     prop: "gender",
                     label: "性别", textAlign: "center",
                     width: 180
                 }, {
                     prop: "isAgree",
                     label: "是否同意", textAlign: "center",
                     formatter: (row, column, cellValue) => {
                         return cellValue ? `是` : `否`;
                     },

                     width: 180
                 }, {
                     prop: "quantity",
                     label: "数量", textAlign: "center",
                     width: 180
                 },
                 {
                     prop: "hobby", showOverflowTooltip: true,
                     label: "爱好"
                 }, {
                     prop: "skills", showOverflowTooltip: true,
                     label: "技能"
                 },
             ],

             dialogVisible: false,
             footerVisible: true,
             dialogWidth: "40%",


             loading: false,
             formData: {},
             formJson: [{
                 type: 'input',
                 label: '大大姓名',
                 prop: 'name',
                 default: '', // 默认值为空字符串
                 rules: [{ required: true, message: '姓名不能为空', trigger: 'blur' }]
             },
             {
                 type: 'select',
                 label: '性别',
                 prop: 'gender', default: null, // 对于选择类型，默认值可以设置为 null
                 options: [
                     { label: '男', value: 'male' },
                     { label: '女', value: 'female' }
                 ],
                 rules: [{ required: true, message: '性别不能为空' }]
             },
             {
                 type: 'switch',
                 label: '是否同意',
                 prop: 'isAgree',
                 default: false, // 开关默认状态为 false，表示关闭
                 rules: [{ required: true, message: '请确认是否同意', trigger: 'change' }]
             },
             {
                 type: 'datetimepicker',
                 label: '预约时间',
                 prop: 'appointmentTime',
                 default: null, // 可以设置默认值，也可以不设置
                 placeholder: '请选择预约时间',
                 format: 'yyyy-MM-dd HH:mm:ss',
                 valueFormat: 'yyyy-MM-dd',
                 dateTimePickerType: 'datetime', // 可以是 'date' | 'datetime' | 'year' | 'month' | 'time' 等
                 rules: [
                     { required: true, message: '预约时间不能为空', trigger: 'change' }
                 ]
             },
             {
                 type: 'number', // 新增的数字输入框类型
                 label: '数量',
                 prop: 'quantity',
                 min: 1, // 最小值
                 max: 100, // 最大值
                 step: 1, // 步长
                 placeholder: '请输入数量', // 占位符
                 default: 1, // 默认值
                 rules: [{ required: true, message: '数量不能为空', trigger: 'blur' },
                 { type: 'number', message: '数量必须为数字', trigger: 'blur' }]
             },
             {
                 type: 'radio',
                 label: '爱好',
                 prop: 'hobby', default: undefined, // 单选默认值可以设置为 undefined 或第一个选项的值
                 options: [
                     { label: '足球', value: 'soccer' },
                     { label: '篮球', value: 'basketball' }
                     // 可以添加更多选项
                 ],
                 rules: [{ required: true, message: '请选择爱好', trigger: 'change' }]
             },
             {
                 type: 'checkbox',
                 label: '技能',
                 prop: 'skills', default: [], // 多选默认值应为数组
                 options: [
                     { label: '编程', value: 'coding' },
                     { label: '设计', value: 'design' },
                     { label: '测试', value: 'test' },
                     { label: '部署', value: 'uat' },
                 ],
                 rules: [{ required: true, message: '请选择至少一个技能', trigger: 'change' }]
             }
             ],
         }
     },
     created() { this.handleLoadData(); },
     mounted: function () { },
     methods: {
         handleLoadData(e) {
             console.log("查询条件", e);
             this.totalRows = this.tableData.length;
         },
         handleDelete(e) {
             console.log("handleDelete", e);
         },
         submitForm(data) {
             console.log("表单提交方法", data);
             this.dialogVisible = true;
             this.$message({ message: "表单提交方法", center: true, type: 'success' });
         },
         viewDetailDialog(e) {
             console.info("viewDialogForm 打开详情弹窗方法")
         },
     },
     filters: {
         
     }
 });
```
![el-tablelist](Doc/img/el-tablelist.png)
### 5. ElOpen 组件  弹出页面扩展

- **功能**：用于创建一个可打开外部链接的对话框组件。
- **参数**：
  - `dialogtitle`：对话框标题，默认为空。
  - `showsubmit`：是否显示提交按钮，默认为`true`。
  - `showcancel`：是否显示取消按钮，默认为`true`。
  - `dialogvisible`：对话框是否可见，默认为`false`。
  - `dialogtop`：对话框顶部位置，默认为`"5vh"`。
  - `dialogwidth`：对话框宽度，默认为`"50%"`。
  - `dialogstyle`：对话框样式。
  - `url`：外部链接地址。

- **使用示例**：

```vue
<template>
  <div>
    <el-open
      :url="url"
      :dialogtitle="dialogtitle"
      :dialogvisible="dialogVisible"
      :dialogwidth="dialogwidth"
      :dialogtop="dialogtop"
      :dialogstyle="dialogstyle"
      :showsubmit="showsubmit"
      :showcancel="showcancel"
      @submit="handleSubmit"
      @cancel="handleCancel"
    ></el-open>
    <el-button @click="openLink">打开链接</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      dialogtitle: '外部链接',
      dialogVisible: false,
      dialogwidth: '50%',
      dialogtop: '5vh',
      dialogstyle: 'width:100%;height:300px;',
      showsubmit: true,
      showcancel: true
    };
  },
  methods: {
    openLink() {
      this.dialogVisible = true;
    },
    handleSubmit() {
      console.log('submit');
      this.dialogVisible = false;
    },
    handleCancel() {
      console.log('cancel');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 

```
<el-open dialogTitle="信息" v-bind:dialogvisible="dialogVisible" url="/home/privacy" v-on:submit="oonSubmit" v-on:cancel="onClose" ></el-open>
```

### el-openurl 弹出页面扩展1

```
使用、
1、添加组件：<el-openurl dialogtitle="信息" v-bind:dialogvisible="dialogVisible" url="/home/privacy" :close="onClose"></el-openurl> 

2、父组件添加生命周期：
mounted(){window.addEventListener('message', this.handleMessage);},// 监听message事件 获取子组件传过来的值
beforeDestroy(){ window.removeEventListener('message', this.handleMessage);},// 在组件销毁前移除事件监听器

3、在methods中添加方法
handleMessage(event){ const data = event.data; if (data) { this.dialogVisible = data.dialogVisible; } },

4、子组件使用：
在methods中添加方法
postMessage(data){window.parent.postMessage(data,"*");},//data为传给父组件的值 一般包含 dialogVisible 变量

5、在提交的方法中使用、 this.postMessage({ dialogVisible: false }) //可传更多数据 如 { dialogVisible: false，fromData:obj }
```

### el-openfrom 弹出页面扩展2

```
使用、
1、添加组件：<el-openfrom dialogtitle="信息2" ref="iframe" v-bind:dialogvisible="dialogVisible" url="/demotwo/detail" v-on:submit="submitForm" v-on:close="onClose" :showcancel="true" :showsubmit="true"></el-openfrom>

父组件添加：
2、在methods添加方法：openWin(func, parameter) {const iframe = this.$refs.iframe.$refs.iframe.contentWindow; iframe[func](parameter) },
在需要调用的地方使用：this.openWin('submitForm', 'data') //submitForm为子组件的提交方法名  data为传过去的参数

子组件使用：
3、添加方法  
loadFunc(funcName) { window[funcName] = (v) => { this[funcName](v); }; },
frameVisible(parentVueName) {window.parent[parentVueName].$data.dialogVisible = false;}, 

4、使用  created 中添加 this.loadFunc("submitForm"); //submitForm 提交方法名
5、在提交的方法中使用 this.frameVisible("myvue");// myvu为父组件vue的名称 示例: var myvue=new Vue(...);
```

### 6. ElOpenWeb 组件

- **功能**：用于创建一个可打开外部网页的对话框组件。
- **参数**：
  - `dialogtitle`：对话框标题，默认为`"tips"`。
  - `dialogvisible`：对话框是否可见，默认为`false`。
  - `dialogtop`：对话框顶部位置，默认为`"5vh"`。
  - `dialogwidth`：对话框宽度，默认为`"50%"`。
  - `dialogstyle`：对话框样式。
  - `url`：外部链接地址。

- **使用示例**：

```vue
<template>
  <div>
    <el-open-web
      :url="url"
      :dialogtitle="dialogtitle"
      :dialogvisible="dialogVisible"
      :dialogwidth="dialogwidth"
      :dialogtop="dialogtop"
      :dialogstyle="dialogstyle"
      @close="handleClose"
    ></el-open-web>
    <el-button @click="openWeb">打开网页</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      dialogtitle: '外部网页',
      dialogVisible: false,
      dialogwidth: '50%',
      dialogtop: '5vh',
      dialogstyle: 'width:100%;height:380px;'
    };
  },
  methods: {
    openWeb() {
      this.dialogVisible = true;
    },
    handleClose() {
      console.log('close');
      this.dialogVisible = false;
    }
  }
};
</script>
```

### 7. ModifyRecord 组件

- **功能**：用于显示记录的修改详情。
- **参数**：
  - `data`：记录数据，默认为空对象。

- **使用示例**：

```vue
<template>
  <div>
    <modify-record :data="data"></modify-record>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        creator: '张三',
        createTime: '2023-01-01',
        modifier: '李四',
        modifyTime: '2023-01-02',
        remark: '测试记录'
      }
    };
  }
};
</script>
```

### 8. Permissions 工具

- **功能**：用于管理用户权限。
- **方法**：
  - `setPermissions(newPermissions)`：设置权限。
  - `getPermissions()`：获取权限。
  - `hasPermission(permission)`：检查是否有某个权限。
  - `avePermission(permission)`：检查是否有某个权限（若没有权限配置则返回`true`）。

- **使用示例**：

```javascript
// 设置权限
Permissions.setPermissions(['edit', 'delete']);

// 获取权限
console.log(Permissions.getPermissions()); // ['edit', 'delete']

// 检查权限
console.log(Permissions.hasPermission('edit')); // true
console.log(Permissions.hasPermission('view')); // false

// 检查权限（若没有权限配置则返回true）
console.log(Permissions.avePermission('edit')); // true
console.log(Permissions.avePermission('view')); // true（若没有权限配置）
```

## 最终使用示例：

```
@using RuoVea.Ledger.Options
@using Microsoft.Extensions.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser
@{
    bool isAdmin = User?.Claims.Any(c => c.Type == ClaimConst.CLAINM_ISADMIN && c.Value == "true") ?? false;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/elementui/index.min.css?v=1" rel="stylesheet" asp-append-version="true" />
    <style type="text/css">.el-menu-item i, .el-submenu i {color: @systemInfo.CurrentValue.SkinColor}.el-menu--horizontal > .el-menu-item.is-active {color: @systemInfo.CurrentValue.SkinColor !important;}</style>
</head>
<body>
    <div id="main" v-cloak>
        <el-admin logo_url="/img/logo.png"
                  title="@systemInfo.CurrentValue.Title"
                  :menu-data="menuData"
                   v-bind:user="user"
                  user-name="@_currentUser.Name"
                  user-avatar="./img/logo.png"
                  :show-breadcrumb="true"
        @* :aside-style="aside"
                  :header-style="header"
                  :text-color="textColor"
                  :active-text-color="activeTextColor"*@
                   :menu-items="dropList"
                  :tagselect="tagselect"
                  :handle-select="handleSelect"
                  :show-tags="false"
                  v-on:handle-edit-pass=""
                  :drop-list="dropList"
                  :handle-logout="logout">
            <div slot="content">
                <iframe ref="iframe" :src="tagselect" style="width:100%;"></iframe>
            </div>
        </el-admin>
    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
    <script src="~/avue/avue.min.js"></script>
    <script src="~/avue/avue.min.option.js"></script>
    <script src="~/js/menu.js"></script>
    <script>
        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    isAdmin: @(isAdmin.ToString().ToLower()),
                    showBreadcrumb: false,
                    showTags: true,
                    selectedTag: {},
                    menuData: [],
                    defultIndex: "",
                    tagselect: "",
                    user: { username: 'ruovea',avatar: 'img/logo.png' },
                    dropList: [
                          { title: '我的资料', click: () =>{ console.log('我的资料'); } },
                          { title: '切换账号', click: () => { console.log('切换账号'); } },
                          { title: '退出登录', click: () => {this.logout();} }
                            ],
                }
            },
            created() {
                this.loadMenu();
            },
            methods: {
                loadMenu() {
                   if (this.isAdmin) {
                        this.menuData = menuDataAdmin;
                        this.defultIndex = "/user/index"; 
                        this.activeIndex =this.defultIndex;
                    }
                    else {
                         this.menuData = menuDataNone; 
                        this.defultIndex = "/demo";
                        this.activeIndex =this.defultIndex;
                    }
                    this.tagselect =this.defultIndex;

                    // 远程加载菜单
                    // this.$http.get("/user/Menu").then((res) => {
                    //     this.menuData = this.transformData(res);
                    // });
                },
                transformData(data) {
                    function processNode(node) {
                        function pathRepalce(path) {
                            switch (path) { 
                                case '/menu': return `${path}/index`;
                                case '/user': return `${path}/index`;
                                case '/role': return `${path}/index`;
                                case '/config': return `${path}/index`;
                                case '/logvis': return `${path}/index`;
                                case '/logop': return `${path}/index`;
                                case '/exlog': return `/logex/index`;
                                case '/difflog': return `/logdiff/index`;
                                case '': return  this.defultIndex;
                                case '/': return  this.defultIndex;
                                case '/home': return  this.defultIndex;
                                default:return path;
                            }    
                        }
                        const path = pathRepalce(node.path)
                        return {
                            title: node.title,
                            path: `${path}`,
                            icon: (node.icon || "el-icon-menu"),
                            submenu: node.children.map(child => processNode(child))
                        };
                    }

                    return data.map(item => processNode(item));
                },
                adjustIframeHeight() {
                    const iframe = this.$refs.iframe;
                    if (iframe) {
                        const newHeight = window.innerHeight - 125;
                        iframe.style.minHeight = `${newHeight}px`;
                        iframe.style.border = 'none';
                    }
                },
                handleSelect(key, keyPath) {
                    if (keyPath) {
                        this.tagselect = keyPath.path;
                    } else {
                        this.tagselect = this.defultIndex;
                    }
                },
                logout() {
                    console.log('Logging out...');
                    window.location.href = "/auth/logout";
                },
            },
            mounted() {
                this.adjustIframeHeight();
                window.addEventListener('resize', this.adjustIframeHeight);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.adjustIframeHeight);
            },
        });
    </script>
</body>
</html>

```

```
@using RuoVea.Ledger.Options
@using Microsoft.Extensions.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser
@{
    bool isAdmin = User?.Claims.Any(c => c.Type == ClaimConst.CLAINM_ISADMIN && c.Value == "true") ?? false;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/elementui/index.min.css?v=1" rel="stylesheet" asp-append-version="true" />
    <link href="~/elementui/admin/swiper/swiper.min.css" rel="stylesheet" />
    <link href="~/elementui/admin/index.admin.css" rel="stylesheet" />
    <link href="~/elementui/admin/index.admin.theme.css" rel="stylesheet" />
</head>
<body>
    <div id="main" v-cloak>

        <el-admin-layout ref="mainLayout"
                         v-bind:home-tab="homeTab"
                         v-bind:title="title"
                         v-bind:logo_url="logo_url"
                         v-bind:menu-list="menuList"
                         v-bind:is_fold="is_fold"
                         v-bind:is_show_tabbar="is_show_tabbar"
                         v-bind:user="user"
                         v-bind:drop-list="dropList"
                         v-bind:is_full_screen="is_full_screen"
                         v-bind:tab-list="tabList"
                         v-bind:native-tab="nativeTab"
                         v-bind:show-switch="showSwitch"
                         v-bind:show-theme="showTheme" />
    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
    <script src="~/avue/avue.min.js"></script>
    <script src="~/avue/avue.min.option.js"></script>
    <script src="~/elementui/admin/swiper/swiper.min.js"></script>
    <script src="~/elementui/admin/index.admin.js"></script>
    <script src="~/js/menu.js"></script>
    <script>

        Vue.prototype.exadmin  = new Vue({
            el: "#main",
            data() {
                 return {
                      homeTab: {
                        id: 'home',
                        title: '首页',
                        path: 'book',
                        is_load: false,
                        icon: "el-icon-s-home",
                        hide_close: true
                      },
                      title: "伯恩光学",
                      logo_url: 'img/logo.png',
                      menuList: [],
                      is_fold: false,
                      is_show_tabbar: true,
                      user: { username: '@_currentUser.Name',avatar: 'img/logo.png' },
                      dropList: [
                          { title: '我的资料', click: () =>{ console.log('我的资料'); } },
                          { title: '切换账号', click: () => { console.log('切换账号'); } },
                          { title: '退出登录', click: () => {this.logout();} }
                            ],
                      is_full_screen: false,
                      tabList: [],
                      nativeTab: {},
                      showSwitch: false,
                      showTheme: true
                }
            },
            created() {
                 if (this.isAdmin) {
                        this.menuList = menuDataAdmin;
                        this.defultIndex = "/user/index"; 
                        this.activeIndex =this.defultIndex;
                    }
                    else {
                         this.menuList = menuDataNone; 
                        this.defultIndex = "/demo";
                        this.activeIndex =this.defultIndex;
                    }
            },
            methods: {
                logout() {
                    console.log('Logging out...');
                    window.location.href = "/auth/logout";
                },
                adjustIframeHeight() {
                    const iframe = this.$refs.mainLayout;
                    if(document.body.clientWidth < 800) {
                        this.$refs.mainLayout.fold_start();
                    } else {
                        this.$refs.mainLayout.fold_end();
                    }
                },
            },
            mounted() {
                console.log("this.menuList--------", this.menuList)
                console.log("this.dropList--------", this.dropList)
                this.adjustIframeHeight();
                window.addEventListener('resize', this.adjustIframeHeight);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.adjustIframeHeight);
            },
        });


    </script>
</body>
</html>


```

```
@using RuoVea.Ledger.Options
@using Microsoft.Extensions.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/elementui/index.min.css?v=1" rel="stylesheet" asp-append-version="true" />
    <style type="text/css">.el-menu-item i, .el-submenu i {color: @systemInfo.CurrentValue.SkinColor}.el-menu--horizontal > .el-menu-item.is-active {color: @systemInfo.CurrentValue.SkinColor !important;}</style>
</head>
<body>
    <div id="main" v-cloak>
        <el-admin logo-src="/img/logo.png"
                  logo-title="@systemInfo.CurrentValue.Title"
                  :menu-data="menuData"
                  user-name="@_currentUser.Name"
                  user-avatar="./img/logo.png"
                  :show-breadcrumb="true"
        @* :aside-style="aside"
                  :header-style="header"
                  :text-color="textColor"
                  :active-text-color="activeTextColor"*@
                  :tagselect="tagselect"
                  :handle-select="handleSelect"
                  :show-tags="false"
                  v-on:handle-edit-pass=""
                  :handle-logout="logout">
            <div slot="content">
                <iframe ref="iframe" :src="tagselect" style="width:100%;"></iframe>
            </div>
        </el-admin>
    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
    <script src="~/avue/avue.min.js"></script>
    <script src="~/avue/avue.min.option.js"></script>
    <script src="~/js/menu.js"></script>
    <script>
        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    showBreadcrumb: false,
                    showTags: true,
                    selectedTag: {},
                    menuData: [],
                    defultIndex: "",
                    tagselect: "",
                }
            },
            created() {
                this.loadMenu();
            },
            methods: {
                loadMenu() {
                    this.$http.get("/user/Menu").then((res) => {
                        this.menuData = this.transformData(res);
                    });
                },
                transformData(data) {
                    function processNode(node) {
                        function pathRepalce(path) {
                            switch (path) { 
                                case '/menu': return `${path}/index`;
                                case '/user': return `${path}/index`;
                                case '/role': return `${path}/index`;
                                case '/config': return `${path}/index`;
                                case '/logvis': return `${path}/index`;
                                case '/logop': return `${path}/index`;
                                case '/exlog': return `/logex/index`;
                                case '/difflog': return `/logdiff/index`;
                                case '': return  this.defultIndex;
                                case '/': return  this.defultIndex;
                                case '/home': return  this.defultIndex;
                                default:return path;
                            }    
                        }
                        const path = pathRepalce(node.path)
                        return {
                            title: node.title,
                            path: `${path}`,
                            icon: (node.icon || "el-icon-menu"),
                            submenu: node.children.map(child => processNode(child))
                        };
                    }

                    return data.map(item => processNode(item));
                },
                adjustIframeHeight() {
                    const iframe = this.$refs.iframe;
                    if (iframe) {
                        const newHeight = window.innerHeight - 125;
                        iframe.style.minHeight = `${newHeight}px`;
                        iframe.style.border = 'none';
                    }
                },
                handleSelect(key, keyPath) {
                    if (keyPath) {
                        this.tagselect = keyPath.path;
                    } else {
                        this.tagselect = this.defultIndex;
                    }
                },
                logout() {
                    console.log('Logging out...');
                    window.location.href = "/auth/logout";
                },
            },
            mounted() {
                this.adjustIframeHeight();
                window.addEventListener('resize', this.adjustIframeHeight);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.adjustIframeHeight);
            },
        });
    </script>
</body>
</html>

```

```
@using RuoVea.Ledger.Options
@using Microsoft.Extensions.Options
@using RuoVea.ExDto
@inject IOptionsMonitor<SystemInfo> systemInfo;
@inject ICurrentUser _currentUser
@{
    bool isAdmin = User?.Claims.Any(c => c.Type == ClaimConst.CLAINM_ISADMIN && c.Value == "true") ?? false;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@systemInfo.CurrentValue.Title</title>
    <link href="~/elementui/index.min.css?v=1" rel="stylesheet" asp-append-version="true" />
    <style type="text/css"> .el-menu-item i,.el-submenu i { color: @systemInfo.CurrentValue.SkinColor } .el-menu--horizontal > .el-menu-item.is-active {color: @systemInfo.CurrentValue.SkinColor !important;} </style>
</head>
<body>
    <div id="main" v-cloak>
        
        <el-extend-header class="elmy" 
        logo_url="/img/logo.png" 
        title="@systemInfo.CurrentValue.Title" 
        :menu-data="menuData" 
        :active-index="activeIndex" 
        :user="user" 
        :select="handleSelect"
         :menu-items="dropList"></el-extend-header>

        <el-main><iframe ref="iframe" :src="activeIndex" style="width:100%;"></iframe></el-main>

    </div>
    <script src="~/vue/vue.js"></script>
    <script src="~/elementui/index.i18n.js"></script>
    <script src="~/elementui/index.lang.js"></script>
    <script src="~/elementui/index.min.js"></script>
    <script src="~/elementui/lang/zhCN.js"></script>
    <script src="~/elementui/lang/en.js"></script>
    <script src="~/elementui/lang/fr.js"></script>
    <script src="~/elementui/lang/ja.js"></script>
    <script src="~/elementui/lang/vi.js"></script>
    <script src="~/elementui/lang/zhTW.js"></script>
    <script>Vue.prototype.$baseURL = "";</script>
    <script src="~/vue/axios.min.min.js"></script>
    <script src="~/vue/vue-i18n.min.js"></script>
    <script src="~/avue/avue.min.js"></script>
    <script src="~/avue/avue.min.option.js"></script>
    <script src="~/js/menu.js"></script>
    <script>
        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    isAdmin: @(isAdmin.ToString().ToLower()),
                    menuData: [],
                    defultIndex: "",
                    activeIndex: "",
                    user : { username: '@_currentUser.Name',avatar: 'img/logo.png' },
                    dropList: [
                          { 
                            name: '我的资料', 
                            icon: 'el-icon-user',
                            click: () => { console.log('我的资料'); } 
                          },
                          { 
                            name: '切换账号', 
                            icon: 'el-icon-switch-button',
                            click: () => { console.log('切换账号'); } 
                          }
                        ],
                }
            },
            created() {
                if (this.isAdmin) {
                    this.menuData = menuDataAdmin;
                    this.defultIndex = "/user/index"; 
                    this.activeIndex =this.defultIndex;
                }
                else {
                     this.menuData = menuDataNone; 
                    this.defultIndex = "/demo";
                    this.activeIndex =this.defultIndex;
                }
            },
            methods: {
                adjustIframeHeight() {
                    const iframe = this.$refs.iframe;
                    if (iframe) {
                        const newHeight = window.innerHeight - 125;
                        iframe.style.minHeight = `${newHeight}px`;
                        iframe.style.border = 'none';
                    }
                },
                handleSelect(key, keyPath) {
                       if(key){
                       this.activeIndex = key;
                       }else{
                        this.activeIndex =this.defultIndex;
                       }
                },
                logout() {
                    console.log('Logging out...');
                    window.location.href = "/auth/logout";
                },
            },
            mounted() {
                this.adjustIframeHeight();
                window.addEventListener('resize', this.adjustIframeHeight);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.adjustIframeHeight);
            },
        });
    </script>
</body>
</html>

```

```
// 一个菜单可以包括的所有属性 
// {
// 	id: '12345',		// 菜单id, 必须唯一
// 	title: '用户中心',		// 菜单名称, 同时也是tab选项卡上显示的名称
// 	icon: 'el-icon-user',	// 菜单图标, 参考地址:  https://element.eleme.cn/#/zh-CN/component/icon
//	info: '管理所有用户',	// 菜单介绍, 在菜单预览和分配权限时会有显示 
// 	path: 'sa-html/user/user-list.html',	// 菜单指向地址
// 	parent_id: 1,			// 所属父菜单id, 如果指定了一个值, sa-admin在初始化时会将此菜单转移到指定菜单上 
// 	is_show: true,			// 是否显示, 默认true
// 	is_blank: false,		// 是否属于外部链接, 如果为true, 则点击菜单时从新窗口打开 
// 	children: [			// 指定这个菜单所有的子菜单, 子菜单可以继续指定子菜单, 至多支持三级菜单
// 		// .... 
// 	],
//	click: function(){}		// 点击菜单执行一个函数 
// }



var menuDataAdmin = [
	{
		"title": "工作台", "icon": "el-icon-s-home", "path": "/dashboard",
		"children": [{ "icon": "el-icon-s-home", "path": "undefined", "title": "工作台" }],
	},
	{
		"title": "系统管理", "icon": "el-icon-setting", "path": "/sys",
		"children": [
			{ "icon": "el-icon-user", "path": "/user/index", "title": "账号管理" },
			{ "icon": "el-icon-help", "path": "/role/index", "title": "角色管理" }
		],
	},
	{
		"title": "平台管理", "path": "/platform", "icon": "el-icon-menu",
		"children": [
			{ "icon": "el-icon-document-copy", "path": "/config/index", "title": "参数配置" }
		],
	},
	{
		"title": "日志管理", "path": "/log", "icon": "el-icon-document-copy",
		"children": [
			{ "icon": "el-icon-document", "path": "/logvis/index", "title": "访问日志" },
			{ "icon": "el-icon-document", "path": "/logop/index", "title": "操作日志" },
			{ "icon": "el-icon-document", "path": "/logex/index", "title": "异常日志" },
			{ "icon": "el-icon-document", "path": "/logdiff/index", "title": "差异日志" }
		],
	}
];

var menuDataNone = [
	{
		title: "记账", path: "/cash", icon: 'el-icon-postcard',id:"1",
		"children": [
			{id:'1-1', "icon": "el-icon-notebook-2", "path": "/Record", "title": "流水记录" },
			{id:'1-2', "icon": "el-icon-notebook-1", "path": "/Book", "title": "记账本" },
			{id:'1-3', "icon": "el-icon-toilet-paper", "path": "/Channel", "title": "收支途径" },
			{id:'1-4', "icon": "el-icon-document", "path": "/Itemt", "title": "收支项目" },
		],
	}
];

```

                            // 显示一个选项卡, 根据id
                            // mainLayout.showTabById('1-1');

                            // 关闭一个选项卡，根据 id
                            // mainLayout.closeTabById('1-1');

                            // 新增一个选项卡
                            // mainLayout.addTab({id: 12345, title: '新页面', path: 'http://web.yanzhi21.com'});	// id不要和已有的菜单id冲突，其它属性均可参照菜单项

                            // 新增一个选项卡、并立即显示
                            // mainLayout.showTab({id: 12345, title: '新页面', path: 'http://web.yanzhi21.com'});	// 参数同上

                            // 打开一个 菜单，根据 id
                            // mainLayout.showMenuById('1-1');