前言

ElementUI是基于Vue框架的组件库，由饿了么团队开源，具有非常全面的组件数量，Vue3后改名为ElementPlus。本文只会介绍常用的组件。

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

快速上手

安装

1
npm install element-plus --save

安装成功后可以在package.json中看到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "elementui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.7.3",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}

在main.js中导入

1
2
3
4
5
6
7
8
9
10
11
import { createApp } from 'vue'
import App from './App.vue'
// 导入组件库的所有组件
import ELementPlus from 'element-plus'
// 导入组件库所需要的全局样式
import "element-plus/dist/index.full.min.mjs"

const app = createApp(App)
// 将插件注册到 app 中
app.use(ELementPlus)
app.mount('#app')

之后就可以在项目中使用elementPlus组件。

VsCode插件

对于组件来说，可能有非常多的属性，如果每次都要去官网查看相应的属性值就太麻烦了，如果使用ElementPlus推荐使用element-ui-helper插件，作者是胡浪。

安装后鼠标悬停在组件标签上即可看到所有的属性提示，对于一些简单的就不需要去官网查看。

按钮 button

常用的属性有样式、形状和大小。

在App.vue中编写组件标签：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script setup>

</script>

<template>
  <h3>按钮组件</h3>

  <el-button type="primary">按钮1</el-button>
  <el-button type="success">按钮1</el-button>
  <el-button type="primary">按钮1</el-button>
  <el-button type="warning">按钮1</el-button>
  <el-button type="danger">按钮1</el-button>
  <el-button type="info">按钮1</el-button>
  <el-button type="text">按钮1</el-button>

  <h3>按钮形状</h3>
  <el-button round>round</el-button>
  <el-button circle>circle</el-button>
  <el-button plain>plain</el-button>
  <el-button loading>loading</el-button>
  <el-button disabled>disabled</el-button>
  <!-- 也可以组合起来使用 -->
  <el-button round loading>round loading</el-button>

  <h3>按钮尺寸</h3>
  <el-button>default</el-button>
  <!-- <el-button size="mini">mini</el-button> -->
  <el-button size="small">small</el-button>
  <el-button size="medium">medium</el-button>
  <el-button size="large">large</el-button>
  

</template>

<style scoped>

</style>

图标 icon

需要先在main.js中导入图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { createApp } from 'vue'
import App from './App.vue'
// 导入组件库的所有组件
import ELementPlus from 'element-plus'
// 导入组件库所需要的全局样式
import "element-plus/dist/index.css"
// 导入图标库
import * as ELementPlusIconsVue from '@element-plus/icons-vue'


const app = createApp(App)

// 注册图标库
for(const [key,component] of Object.entries(ELementPlusIconsVue)){
    app.component(key,component)
}

// 将插件注册到 app 中
app.use(ELementPlus)
app.mount('#app')

之后就可以在组件中编写代码，也可以将图标和按钮组合起来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script setup>

</script>

<template>
  <h3>图标</h3>
  <el-icon><Plus/></el-icon>
  <el-icon><Edit/></el-icon>
  <el-icon><Delete/></el-icon>
  <el-icon><Search/></el-icon>
  <el-icon><Setting/></el-icon>
  <el-icon><Upload/></el-icon>
  <el-icon><Download/></el-icon>
  <el-icon><Back/></el-icon>
  <el-icon><Close/></el-icon>
  <el-icon><Check/></el-icon>
  <el-icon><More/></el-icon>

  <h3>属性</h3>
  <el-icon size="large" color="red"><Plus/></el-icon>
  <el-icon size="medium" color="blue"><Edit/></el-icon>
  <el-icon size="small" color="green"><Delete/></el-icon>

  <h3>按钮和图标组合</h3>
  <el-button type="primary ">
    <el-icon><Search/></el-icon>
    <span>搜索</span>
  </el-button>

  <el-button type="primary" circle>
    <el-icon><Search/></el-icon>
    <!-- <span>搜索</span> -->
  </el-button>

  <h3>按钮组</h3>
  <el-button-group>
    <el-button type="primary">
      <el-icon><Back/></el-icon>
      <span>返回</span>
    </el-button>
    <el-button type="primary">
      <el-icon><Close/></el-icon>
      <span>关闭</span>
    </el-button>
    <el-button type="primary">
      <el-icon><Check/></el-icon>
      <span>确定</span>
    </el-button>
  </el-button-group>

</template>

<style scoped>

</style>
image-20240517174814516

提示框 Message

有三种常见的提示框：

  • ElMessage - 上侧滑下的消息条
  • ElMessageBox - 消息组合框 可选择确认或者取消
  • ElNotification - 右侧出来的消息弹窗

type都默认有四种：success | info | error | warning

可以和按钮图标组合来展示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script setup>
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';

const openMessage = () => {
  ElMessage({
    message: '打开成功',
    type: 'success',
    // 展示关闭按钮
    showClose: true,
    // 自定义图标
    shapeFlag: 'el-icon-success',
    // 持续时间
    duration: 2000
  });
};

const closeConfirm = () => {
  ElMessageBox.confirm('是否关闭', '标题', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage({
      message: '关闭成功',
      type: 'success'
    });
  }).catch(() => {
    ElMessage({
      message: '已取消关闭',
      type: 'info'
    });
  });
};

const openNotification = () => {
  ElNotification({
    title: '标题',
    message: '打开成功',
    type: 'success',
    duration: 2000,
    position: 'top-right'
  });
};

const openNotification2 = () => {
  ElNotification({
    title: '标题',
    message: '打开失败',
    type: 'error',
    duration: 2000,
    position: 'bottom-right',
  });
};
</script>

<template>
  <el-button type="primary" @click="openMessage">
    <el-icon>
      <Open />
    </el-icon>
    <span>打开</span>
  </el-button>

  <el-button type="warning" @click="closeConfirm">
    <el-icon>
      <Close />
    </el-icon>
    <span>关闭</span>
  </el-button>

  <el-button type="info" @click="openNotification">
    <el-icon>
      <More />
    </el-icon>
    <span>通知1</span>
  </el-button>

  <el-button type="success" @click="openNotification2">
    <el-icon>
      <Setting />
    </el-icon>
    <span>通知2</span>
  </el-button>
</template>

<style scoped></style>

导航 menu

常用的导航分为menu、breadcrumb和dropdown三种

具体的如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<script setup>
import { ref } from 'vue'

const selectedIndex = ref("1")

// 默认展开的子菜单
const defaultOpeneds = ref(["1","3"])

const selected = (index, indexPath) => {
  // indexPath是标签的索引路径，index是当前标签的索引
  console.log("index:", index, "indexPath:", indexPath)
}

const userCommand = (command) => {
  console.log("command:",command)
}
</script>

<template>
  <h3>垂直导航</h3>
  <!-- 默认的宽度为100% -->
  <el-menu mode="vertical" :default-active="selectedIndex" @select="selected" background-color="#545c64"
    text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
    <el-menu-item index="1">Home</el-menu-item>
    <el-sub-menu index="2">
      <template #title>About</template>
      <el-menu-item index="2-1">Company</el-menu-item>
      <el-menu-item index="2-2">Team</el-menu-item>
      <el-menu-item index="2-3">Careers</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3">Contact</el-menu-item>
    <el-menu-item index="4">Blog</el-menu-item>

  </el-menu>

  <h3>面包屑</h3>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item><a href="#">about</a></el-breadcrumb-item>
    <el-breadcrumb-item>Company</el-breadcrumb-item>
    <el-breadcrumb-item>Me</el-breadcrumb-item>
  </el-breadcrumb>

  <h3>下拉菜单</h3>
  <el-dropdown @command="userCommand">
    <span>
      个人中心<el-icon><User/></el-icon>
    </span>
    <template #dropdown>
        <el-dropdown-item command="order">订单</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
    </template>
  </el-dropdown>


  <h3>垂直导航-默认展开和自定义样式</h3>
        <el-menu :default-active="selectedIndex" @select="selected" :default-openeds="defaultOpeneds"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" style="width: 200px;">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon><Search /></el-icon>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="2">
                <el-icon><Edit /></el-icon>
                <template #title>导航二</template>
            </el-menu-item>
            <el-sub-menu index="3">
                <template #title>
                    <el-icon><Search /></el-icon>
                    <span>导航三</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="4">
                <el-icon><Setting /></el-icon>
                <template #title>导航四</template>
            </el-menu-item>
        </el-menu>

</template>

<style scoped></style>

标签页 tabs

标签页最重要的是动态添加和删除的逻辑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script setup>

import { ref, reactive } from 'vue';

// 默认选中的标签页
const selectedName = ref('2');


const tabClick = (tab, event) => {
  console.log("tab", tab.props, "event", event);
}

const tab = reactive({
  arr: [
    { name: 1, label: "主页", content: "内容1" },
    { name: 2, label: "我", content: "内容2" },
    { name: 3, label: "订单", content: "内容3" }
  ]
})


const tabAdd = () => {
  let index = tab.arr.length + 1;
  tab.arr.push(
    {
      name: index,
      label: `标签${index}`,
      content: `内容${index}`
    }
  );
}

const tabRemove = (name) => {
  console.log("name", name);
  const index = tab.arr.findIndex(item => item.name === name);
  tab.arr.splice(index, 1);
}
</script>

<template>
  <h3>标签页</h3>

  <el-tabs v-model="selectedName" @tab-click="tabClick" type="border-card">
    <el-tab-pane label="主页" name="1">内容1</el-tab-pane>
    <el-tab-pane label="我" name="2">内容2</el-tab-pane>
    <el-tab-pane label="订单" name="3">内容3</el-tab-pane>

  </el-tabs>

  <h3>动态添加/删除</h3>
  <el-button type="primary" @click="tabAdd">添加</el-button>
  <el-tabs v-model="selectedName" closable @tab-remove="tabRemove" type="card">
    <el-tab-pane v-for="item in tab.arr" :key="item.name" :label="item.label" :name="item.name">
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped></style>

输入框 input

输入框主种类繁多。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<script setup>

import { el } from 'element-plus/es/locales.mjs';
import { ref, reactive } from 'vue';

const name = ref('')

const password = ref('')

const content = ref('')

const selected = ref('1')

</script>

<template>
  <div style="width: 400px;">
    <h3>输入框</h3>
  <!-- clearable: 是否可清空 -->
  <el-input v-model="name" clearable placeholder="请输入用户名"></el-input>

  <h3>密码框</h3>
  <!-- show-password: 是否显示切换密码显示隐藏的按钮 -->
  <el-input v-model="password" show-password placeholder="请输入密码"></el-input>

  <h3>文本域</h3>
  <!-- rows: 文本域默认行数 -->
  <el-input type="textarea" v-model="content" rows="2"></el-input>

  <h3>输入框-输入内容的限制</h3>
  <el-input maxlength="10" show-word-limit></el-input>
  <h3>文本域-输入内容的限制</h3>
  <el-input type="textarea" v-model="content" maxlength="10" show-word-limit></el-input>

  <h3>前置</h3>
  <el-input v-model="name" placeholder="请输入内容">
    <template #prepend>http://</template>
  </el-input>

  <h3>后置</h3>
  <el-input v-model="name" placeholder="请输入内容">
    <template #append>.com</template>、
  </el-input>

  <h3>前置加后置</h3>
  <el-input v-model="name" placeholder="请输入内容">
    <template #prepend>http://</template>
    <template #append>.com</template>
  </el-input>

  <h3>混合案例</h3>
  <el-input placeholder="请输入你的选择" v-model="name">
    <template #prepend>
      <el-select v-model="selected" placeholder="请选择" style="width: 100px;">
        <el-option label="前端" value="1"></el-option>
        <el-option label="后端" value="2"></el-option>
        <el-option label="服务端" value="3"></el-option>
      </el-select>
    </template>
    <template #append>
      <el-button>
        <el-icon><Search/></el-icon>
      <span>搜索</span>
    </el-button>
    </template>
  </el-input>
  </div>
</template>

<style scoped></style>

单选框、复选框 radio checkbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script setup>
import { ref } from 'vue';

const radio = ref("3")
const radio2 = ref("c")
const radio3 = ref("C")

const check = ref(["1"])
const check2 = ref(["2"])

const changeRadio = (value) => {
  console.log("radio value change", value)
}

const checkGroupChange = (value) => {
  // 得到的是一个数组
  console.log("check value change", value)
}
</script>

<template>
  <h3>单选框 </h3>
  <el-radio v-model="radio" value="1">前端</el-radio>
  <el-radio v-model="radio" value="2">后端</el-radio>
  <el-radio v-model="radio" value="3">服务端</el-radio>

  <h3>单选框-事件绑定</h3>
  <el-radio v-model="radio2" value="a" @change="changeRadio">前端</el-radio>
  <el-radio v-model="radio2" value="b" @change="changeRadio">后端</el-radio>
  <el-radio v-model="radio2" value="c" @change="changeRadio">服务端</el-radio>

  <h3>单选框组</h3>
  <!-- 只需要对el-radio-group绑定v-model即可 -->
  <el-radio-group v-model="radio3" @change="changeRadio">
    <el-radio value="A">前端</el-radio>
    <el-radio value="B">后端</el-radio>
    <el-radio value="C">服务端</el-radio>
  </el-radio-group>

  <h3>复选框</h3>
  <el-checkbox-group v-model="check">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">服务端</el-checkbox>
  </el-checkbox-group>

  <h3>复选框-事件绑定</h3>
  <el-checkbox-group v-model="check2" @change="checkGroupChange">
    <el-checkbox value="1">前端</el-checkbox>
    <el-checkbox value="2">后端</el-checkbox>
    <el-checkbox value="3">服务端</el-checkbox>
  </el-checkbox-group>
</template>

<style scoped></style>

下拉框 select

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script setup>
import { ref, reactive } from 'vue';

const checked = ref("2");
const checked2 = ref("C");

const selectChange = (val) => {
  console.log("选中的值", val);
}

const data = reactive({
  options: [
    { label: "前端", value: "A" },
    { label: "后端", value: "B" },
    { label: "服务端", value: "C" },
  ]
})

const selectMultipleChange = (val) => {
  console.log("选中的值", val);
}

</script>

<template>
  <h3>下拉框</h3>
  <el-select placeholder="请选择" v-model="checked">
    <el-option label="前端" value="1"></el-option>
    <el-option label="后端" value="2"></el-option>
    <el-option label="服务端" value="3"></el-option>
  </el-select>

  <h3>下拉框-绑定事件</h3>
  <el-select placeholder="请选择" v-model="checked" @change="selectChange">
    <el-option label="前端" value="1"></el-option>
    <el-option label="后端" value="2"></el-option>
    <el-option label="服务端" value="3"></el-option>
  </el-select>

  <h3>动态下拉框</h3>
  <el-select placeholder="请选择" v-model="checked2">
    <el-option v-for="item in data.options" :key="item.value" :label="item.label" :value="item.value">
      {{ item.label }}
    </el-option>
  </el-select>

  <h3>下拉框多选</h3>
  <!-- 只需要添加一个属性 multiple 即可 -->
  <el-select placeholder="请选择" v-model="checked" multiple @change="selectMultipleChange">
    <el-option label="前端" value="1"></el-option>
    <el-option label="后端" value="2"></el-option>
    <el-option label="服务端" value="3"></el-option>
  </el-select>
</template>

<style scoped></style>

日期选择器 date-picker

日期的获取如果不使用value-format，那么控制台打印的就是时间戳的形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script setup>

import { ref } from 'vue';

const date = ref("")

const dateChenge = (val) => {
  console.log("change", val)
}

</script>

<template>
  <h3>日期</h3>
  <el-date-picker v-model="date" type="date" placeholder="请选择日期"></el-date-picker>

  <h3>日期时间</h3>
  <el-date-picker v-model="date" type="datetime" placeholder="请选择日期时间"></el-date-picker>

  <h3>事件绑定</h3>
  <!-- 不添加value-format属性，返回的是时间戳 -->
  <el-date-picker v-model="date" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期"
    @change="dateChenge"></el-date-picker>
</template>

<style scoped></style>

将控件转化为中文的形式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createApp } from 'vue'
import App from './App.vue'
// 导入组件库的所有组件
import ELementPlus from 'element-plus'
// 导入组件库所需要的全局样式
import "element-plus/dist/index.css"
// 导入图标库
import * as ELementPlusIconsVue from '@element-plus/icons-vue'
import { zhCn } from 'element-plus/es/locales.mjs'

const app = createApp(App)

// 注册图标库
for(const [key,component] of Object.entries(ELementPlusIconsVue)){
    app.component(key,component)
}

// 将插件注册到 app 中
// app.use(ELementPlus)

// 设置区域语言为中文简体
app.use(ELementPlus,{locale:zhCn})
app.mount('#app')

表单 form

将之前的所有控件使用el-form-item

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script setup>

import { ref } from 'vue';

const data = ref({
  name: "",
  radio: "",
  checkbox: [],
  select: "",
  date: "",
  multipleSelect: [],
  textarea: ""
})

const add = () => {
  console.log(data.value)
}

const reset = () => {
  data.value = {
    name: "",
    radio: "",
    checkbox: [],
    select: "",
    date: "",
    multipleSelect: [],
    textarea: ""
  }
}
</script>

<template>
  <el-form>
    <el-form-item label="文本框">
      <el-input v-model="data.name" placeholder="请填写名称"></el-input>
    </el-form-item>

    <el-form-item label="单选框">
      <el-radio-group v-model="data.radio">
        <el-radio label="1">选项1</el-radio>
        <el-radio label="2">选项2</el-radio>
        <el-radio label="3">选项3</el-radio>
      </el-radio-group>
    </el-form-item>


    <el-form-item label="复选框">
      <el-checkbox-group v-model="data.checkbox">
        <el-checkbox label="1">选项1</el-checkbox>
        <el-checkbox label="2">选项2</el-checkbox>
        <el-checkbox label="3">选项3</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="日期选择器">
      <el-date-picker v-model="data.date" type="date" value-format="YYYY-MM-DD"></el-date-picker>
    </el-form-item>


    <el-form-item label="下拉选择框">
      <el-select v-model="data.select" placeholder="请选择">
        <el-option label="选项1" value="1"></el-option>
        <el-option label="选项2" value="2"></el-option>
        <el-option label="选项3" value="3"></el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="多选下拉框">
      <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
        <el-option label="选项1" value="1"></el-option>
        <el-option label="选项2" value="2"></el-option>
        <el-option label="选项3" value="3"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="文本域">
      <el-input type="textarea" v-model="data.textarea" placeholder="请输入内容"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="add">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>

对话框 dialog

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<script setup>

import { ref } from 'vue';

const data = ref({
  name: "",
  radio: "",
  checkbox: [],
  select: "",
  date: "",
  multipleSelect: [],
  textarea: ""
})

const add = () => {
  console.log(data.value)
}

const reset = () => {
  data.value = {
    name: "",
    radio: "",
    checkbox: [],
    select: "",
    date: "",
    multipleSelect: [],
    textarea: ""
  }
}

const dialog = ref(false)

const openDialog = () => {
  dialog.value = true
  console.log('打开')
}

const dialogClose = () => {
  dialog.value = false
  console.log('关闭')
}
</script>

<template>
  <h3>对话框</h3>

  <el-button type="primary" @click="openDialog">
    <el-icon>
      <Open />
    </el-icon><span>打开</span>
  </el-button>

  <!-- 如果要拖拽 draggable -->
  <el-dialog v-model="dialog" draggable @close="dialogClose">
    <el-form>
      <el-form-item label="文本框">
        <el-input v-model="data.name" placeholder="请填写名称"></el-input>
      </el-form-item>

      <el-form-item label="单选框">
        <el-radio-group v-model="data.radio">
          <el-radio value="1">选项1</el-radio>
          <el-radio value="2">选项2</el-radio>
          <el-radio value="3">选项3</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="复选框">
        <el-checkbox-group v-model="data.checkbox">
          <el-checkbox value="1">选项1</el-checkbox>
          <el-checkbox value="2">选项2</el-checkbox>
          <el-checkbox value="3">选项3</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="日期选择器">
        <el-date-picker v-model="data.date" type="date" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>


      <el-form-item label="下拉选择框">
        <el-select v-model="data.select" placeholder="请选择">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="多选下拉框">
        <el-select v-model="data.multipleSelect" multiple placeholder="请选择">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="文本域">
        <el-input type="textarea" v-model="data.textarea" placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add">提交</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped></style>

分页 pagination

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script setup>

import { ref } from 'vue';


const currentPage = ref(3);
const current_change = (val) => {
  console.log("当前页: ", val);
}
</script>

<template>

  <h3>page-size:每页显示记录数 total:总记录数</h3>
  <el-pagination layout="prev,pager,next" :page-size="10" :total="50"></el-pagination>

  <h3>background:背景色</h3>
  <el-pagination background layout="prev,pager,next" :page-size="5" :total="50"></el-pagination>

  <h3>跳转和总数 打印当前的页码 默认的页码</h3>
  <el-pagination :current-page="currentPage" background layout="prev,pager,next,jumper,total" :page-size="5" :total="50"
    @current-change="current_change"></el-pagination>
</template>

<style scoped></style>

表格 table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script setup>
import { ref, reactive } from 'vue';

let idArr = []

const selected = (data) => {
  // console.log("data", data)
  idArr = []

  for (let i = 0; i < data.length; i++) {
    idArr.push(data[i].id)
  }

  console.log("idArr", idArr)
}

const data = reactive({
  arr: [
    { id: 1, name: '张三', web: 'www.baidu.com', date: '2021-09-01' },
    { id: 2, name: '李四', web: 'www.baidu.com', date: '2021-09-02' },
    { id: 3, name: '王五', web: 'www.baidu.com', date: '2021-09-03' },
    { id: 4, name: '赵六', web: 'www.baidu.com', date: '2021-09-04' },
  ]
})

const edit = (index, row) => {
  console.log("index:", index, "row:", row)
}

const del = (index) => {
  data.arr.splice(index, 1)
}

const currentChange = (value) => {
  console.log("value", value)
}
</script>

<template>
  <h3>表格</h3>
  <el-table :data="data.arr" border height="120">
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="网站" prop="web"></el-table-column>
    <el-table-column label="日期" prop="date"></el-table-column>
  </el-table>

  <h3>多选</h3>

  <h3>表格</h3>
  <el-table :data="data.arr" border>
    <el-table-column type="selection"></el-table-column>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="网站" prop="web"></el-table-column>
    <el-table-column label="日期" prop="date"></el-table-column>
  </el-table>

  <h3>表格+分页</h3>
  <!-- select-change是多选框的事件，current-change点击行的事件 -->
  <el-table @selection-change="selected" @current-change="currentChange" :data="data.arr" border>
    <el-table-column type="selection"></el-table-column>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="网站" prop="web"></el-table-column>
    <el-table-column label="日期" prop="date"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="del">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next" :total="400"></el-pagination>
</template>

<style scoped></style>

按需导入

对于组件需要安装插件

1
npm install -D unplugin-vue-components unplugin-auto-import

可以在package.json文件中看到效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "elementui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.7.3",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "unplugin-auto-import": "^0.17.6",
    "unplugin-vue-components": "^0.27.0",
    "vite": "^5.2.0"
  }
}

之后需要配置vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 导入组件
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),

    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue"],

      resolvers: [
        ElementPlusResolver(),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
      ],
    }),
  ],
});

之后修改main.js

1
2
3
4
5
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

对于组件来说，也需要安装插件：

1
npm install -D unplugin-icons

package.json:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "elementui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.7.3",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "unplugin-auto-import": "^0.17.6",
    "unplugin-icons": "^0.19.0",
    "unplugin-vue-components": "^0.27.0",
    "vite": "^5.2.0"
  }
}

在vite.config.js中添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 导入组件
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import Icons from 'unplugin-icons/vite' //图标
import IconsResolver from 'unplugin-icons/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),

    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ["vue"],

      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver(),
      ],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ["ep"],
        }),
      ],
    }),

    Icons({
      autoInstall: true,
    }),
  ],
});

然后在所有图标的前面加上i-ep-

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script setup>
import { ref, reactive } from 'vue';

let idArr = []

const selected = (data) => {
  // console.log("data", data)
  idArr = []

  for (let i = 0; i < data.length; i++) {
    idArr.push(data[i].id)
  }

  console.log("idArr", idArr)
}

const data = reactive({
  arr: [
    { id: 1, name: '张三', web: 'www.baidu.com', date: '2021-09-01' },
    { id: 2, name: '李四', web: 'www.baidu.com', date: '2021-09-02' },
    { id: 3, name: '王五', web: 'www.baidu.com', date: '2021-09-03' },
    { id: 4, name: '赵六', web: 'www.baidu.com', date: '2021-09-04' },
  ]
})

const edit = (index, row) => {
  console.log("index:", index, "row:", row)
}

const del = (index) => {
  data.arr.splice(index, 1)
}

const currentChange = (value) => {
  console.log("value", value)
}
</script>

<template>

  <h3>表格+分页</h3>
  <!-- select-change是多选框的事件，current-change点击行的事件 -->
  <el-table @selection-change="selected" @current-change="currentChange" :data="data.arr" border>
    <el-table-column type="selection"></el-table-column>
    <el-table-column label="编号" prop="id"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="网站" prop="web"></el-table-column>
    <el-table-column label="日期" prop="date"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="edit(scope.$index, scope.row)">
          <el-icon><i-ep-Edit /></el-icon><span>编辑</span>
        </el-button>
        <el-button size="small" type="danger" @click="del">
          <el-icon><i-ep-Delete /></el-icon><span>删除</span>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination layout="prev, pager, next" :total="400"></el-pagination>
</template>

<style scoped></style>