devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【web系列十二】element plus的一些实用技巧_element-plus

作者：羊村懒王 | 2024-02-19 21:16:20

赞

踩

element-plus

目录

写在前面

menu+router

基本功能实现

 手动设置菜单激活状态

el-table：span-method

el-table树状表格递归显示数据及双击单元格修改功能

树状表格递归显示数据

双击单元格修改

el-upload

el-tabs

记录当前tab页

一些小技巧或坑

date-picker

table

form

参考资料

写在前面

        element-plus的官网上已经把各种组件的实用说明写的比较清楚了，并且由于element-plus功能很强大，属性、组件都很多，不可能全部整理下来，也没有必要，大家有需要的可以直接去官网查看。因此这篇文章主要记录一下element-plus组件的一些实用技巧和注意事项，同时会提供对应的代码示例。

        这里插上官网地址：

一个 Vue 3 UI 框架 | Element Plus (gitee.io)

基本功能实现

        这里使用el-menu组件和vue-router实现菜单栏以及页面的跳转。

         官网上说设置了router属性后就可以使用vue-router实现跳转了，咱们来试一试。

  1. <template>
  2.   <el-menu
  3.     router
  4.     class="el-menu-demo"
  5.     mode="horizontal"
  6.     background-color="#545c64"
  7.     text-color="#fff"
  8.     active-text-color="#ffd04b"
  9.   >
  10.     <el-menu-item index="'/home/' + /">首页</el-menu-item>
  11.     <el-menu-item index="'/home/' + /page1">页面1</el-menu-item>
  12.     <el-menu-item index="'/home/' + /page2">页面2</el-menu-item>
  13.     <el-menu-item index="'/home/' + /page3">页面3</el-menu-item>
  14.   </el-menu>
  15.   <router-view />
  16. </template>
  17.  
  18. <script></script>
  19. <style></style>

        这里要注意，index的路径要用字符串拼接的形式

index="'/home/' + url"

        同时要记得先配置好vue-route，router/index.ts

  1. import { createRouter, createWebHistory } from 'vue-router'
  2. import Home from '../views/Home.vue'
  3.  
  4. const routes = [
  5. 	{
  6. 		path: '/',
  7. 		name: 'Home',
  8. 		component: Home
  9. 	},
  10. 	{
  11. 		path: '/page1',
  12. 		name: 'Page1'，
  13. 		component: () => import(/* webpackChunkName: "about" */ '../views/Page1.vue')
  14. 	},
  15. 	{
  16. 		path: '/page2',
  17. 		name: 'Page2'，
  18. 		component: () => import('../views/Page2.vue')
  19. 	},
  20. 	{
  21. 		path: '/page3',
  22. 		name: 'Page3'，
  23. 		component: () => import('../views/Page3.vue')
  24. 	}
  25. ]
  26.  
  27. const router = createRouter({
  28. 	history: createWebHistory(process.env.BASE_URL),
  29. 	routes
  30. })
  31.  
  32. export default router

        实际效果如下：

 手动设置菜单激活状态

         el-menu有一个属性是default-active，用来设置默认激活的菜单。咱们可以把他设置成一个ref变量，变量的内容是菜单的index，也就是下面el-menu-item的index属性内容。这样当变量改变时，对应的菜单就会显示成激活状态了。

  1. <template>
  2.   <el-menu
  3.     :default-active="activeIndex"
  4.     mode="horizontal"
  5.   >
  6.     <el-menu-item index="1">Processing Center</el-menu-item>
  7.     <el-sub-menu index="2">
  8.       <template #title>Workspace</template>
  9.       <el-menu-item index="2-1">item one</el-menu-item>
  10.       <el-menu-item index="2-2">item two</el-menu-item>
  11.       <el-menu-item index="2-3">item three</el-menu-item>
  12.       <el-sub-menu index="2-4">
  13.         <template #title>item four</template>
  14.         <el-menu-item index="2-4-1">item one</el-menu-item>
  15.         <el-menu-item index="2-4-2">item two</el-menu-item>
  16.         <el-menu-item index="2-4-3">item three</el-menu-item>
  17.       </el-sub-menu>
  18.     </el-sub-menu>
  19.     <el-menu-item index="3" disabled>Info</el-menu-item>
  20.     <el-menu-item index="4">Orders</el-menu-item>
  21.   </el-menu>
  22. </template>
  23.  
  24. <script lang="ts" setup>
  25. import { ref } from 'vue'
  26.  
  27. const activeIndex = ref('1')
  28. </script>

el-table：span-method

        使用span-method方法可以合并行或列，官网上的说明不是很详细，这边直接拿官网的示例解释一下，比如我们想实现以下效果，将id奇偶行合并。

         我们先给el-table添加一个span-method属性

  1. <el-table
  2.    :data="tableData"
  3.    :span-method="objectSpanMethod"
  4.    border
  5.    style="width: 100%; margin-top: 20px"
  6. >
  7. </el-table>

         然后我们定义一个接口，这个其实不定义也是可以的。

  • User是表格数据的接口，请根据实际修改
  • row表示表格每一行的数据
  • column表示表格每一列的数据
  • rowIndex表示表格的行索引,不包括表头,从0开始
  • columnIndex表示表格的列索引,从0开始

         要注意这里的变量除了User，名称都不能修改！

  1. interface SpanMethodProps {
  2.   row: User
  3.   column: TableColumnCtx<User>
  4.   rowIndex: number
  5.   columnIndex: number
  6. }

        最后我们定义一下合并规则

        判断条件还是比较好理解的就不说了，主要是返回值，先说第二个return，两个0代表是空值，也就是被合并的格给他设成空值就行了；第一个return，rowspan表示合并的行数，colspan表示合并的列数。这里的合并规则就是当列索引时0时，也就是从第一列开始每两行每一列合并成一个格子，且被合并的单元格置空。

  1. const objectSpanMethod = ({
  2.   row,
  3.   column,
  4.   rowIndex,
  5.   columnIndex,
  6. }: SpanMethodProps) => {
  7.   if (columnIndex === 0) {
  8.     if (rowIndex % 2 === 0) {
  9.       return {
  10.         rowspan: 2,
  11.         colspan: 1,
  12.       }
  13.     } else {
  14.       return {
  15.         rowspan: 0,
  16.         colspan: 0,
  17.       }
  18.     }
  19.   }
  20. }

el-table树状表格递归显示数据及双击单元格修改功能

树状表格递归显示数据

         先来看看效果，这个是我们的数据，假设是一个描述图书馆藏书情况的多层嵌套yaml文件。

  1. '历史':
  2. 	'中国':
  3. 		'清朝': ['2本', 'A1-2']
  4. 		'明朝': ['3本', 'A3-5']
  5. 	'外国':
  6. 		'法国': ['2本', 'B1-2']
  7. 		'美国':
  8. 			'独立战争': ['1本', 'B3']
  9. '音乐':
  10. 	'钢琴': ['5本', 'C1-5']
  11. 	'古典': ['1本', 'C6']

        显示出来效果如下

        可以看到表格中的格式与我们的数据格式一致的，废话不多说，直接上代码：

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="tableData"
  5.       style="width: 100%; margin-bottom: 20px"
  6.       row-key="id"
  7. 	  max-height="800"
  8.       border
  9.       default-expand-all
  10.     > <!--max-height随便用来控制表格高度，用height不好使-->
  11.       <el-table-column fixed prop="class" label="分类" sortable width="250" />
  12.       <el-table-column prop="num" label="数量" sortable width="250" />
  13.       <el-table-column prop="position" label="位置" sortable min-width="300" />
  14.     </el-table>
  15.   </div>
  16. </template>
  17.  
  18. <script lang="ts" setup>
  19. import axios from 'axios';
  20. import { ref, onBeforeMount } from 'vue';
  21.  
  22. interface Books {
  23.   id: number;
  24.   class: string;
  25.   num?: string;
  26.   position?: string;
  27.   children?: Books[];
  28. }
  29.  
  30. onBeforeMount(() => {
  31. 	getMessage();
  32. });
  33.  
  34. let table_data = ref<Books[]>([]);
  35.  
  36. function getMessage(): void {
  37. 	axios.get('/getMessage').then((response) => {
  38. 		let idx: number = 0; // 保证递归时的idx是全局的
  39. 		table_data.value.splice(0, table_data.value.length);
  40. 		
  41. 		display(response.data['message'], idx, table_data.value);
  42. 	})
  43. }
  44.  
  45. function display(data: any, idx: number, idArr: Books[] = []): number {
  46. 	for(let key in data) {
  47. 		let value: any = data[key];
  48. 		let type: string = getType(value);
  49. 		
  50. 		if(type === "dict") {
  51. 			let child_books: Books[] = [];
  52. 			idArr.push({
  53. 				id: idx++,
  54. 				class: key,
  55. 				children: child_books
  56. 			});
  57. 			idx = display(value, idx, child_books);
  58. 		}
  59. 		else {
  60. 			idArr.push({
  61. 				id: idx++,
  62. 				class: key,
  63. 				index: -1,
  64. 				num: <string>(<unknown>value[0]),
  65. 				position: <string>(<unknown>value[1])
  66. 			});
  67. 		}
  68. 	}
  69. 	return idx;
  70. }
  71.  
  72. function getType(data: any): string {
  73. 	let type = Object.prototype.toString.call(data);
  74. 	
  75. 	if(type === "[object Object]") return "dict";
  76. 	else {
  77. 		if(type === "[object Array]") return "list";
  78. 		else return "other";
  79. 	}
  80. }
  81. </script>

双击单元格修改

        也先来看看效果，双击某个单元格，可以编辑，但是不能编辑原本就不应该存在数据的单元格。

         在原来的代码上修改

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="tableData"
  5.       style="width: 100%; margin-bottom: 20px"
  6.       row-key="id"
  7. 	  max-height="800"
  8.       border
  9.       default-expand-all
  10. 	  
  11. 	  @cell-dblclick="editData"
  12. 	  :cell-class-name="setCellClassName"
  13.     > 
  14. 	  <!--用cell-dblclick绑定一个鼠标双击事件editData-->
  15. 	  <!--用cell-class-name给每个单元格绑定位置信息-->
  16.       <el-table-column fixed prop="class" label="分类" sortable width="250">
  17. 		<template #default='scope'>
  18. 			<el-input
  19. 				class="el-input"
  20. 				size="default"
  21. 				v-model="scope.row.class"
  22. 				v-if="scope.row.index+','+scope.column.index == current_cell"
  23. 				autofocus="true"
  24. 				@blur="hideInput"
  25. 			/>
  26. 			<!--给一个class，为了让el-input尺寸小一些，避免换行-->
  27. 			<!--v-model绑定该单元格的数据-->
  28. 			<!--v-if和v-else成对使用，根据当前单元格位置信息切换显示状态-->
  29. 			<!--autofocus，显示的时候自动聚焦-->
  30. 			<!--blur，失去焦点时执行的函数-->
  31. 			<span v-else>{{ scope.row.class }}</span>
  32. 		</template>
  33. 	  </el-table-column>
  34.       <el-table-column prop="num" label="数量" sortable width="250">
  35. 		<template #default='scope'>
  36. 			<el-input
  37. 				class="el-input"
  38. 				size="default"
  39. 				v-model="scope.row.num"
  40. 				v-if="scope.row.index+','+scope.column.index == current_cell"
  41. 				autofocus="true"
  42. 				@blur="hideInput"
  43. 			/>
  44. 			<span v-else>{{ scope.row.num }}</span>
  45. 		</template>
  46. 	  </el-table-column>
  47.       <el-table-column prop="position" label="位置" sortable min-width="300">
  48. 		<template #default='scope'>
  49. 			<el-input
  50. 				class="el-input"
  51. 				size="default"
  52. 				v-model="scope.row.position"
  53. 				v-if="scope.row.index+','+scope.column.index == current_cell"
  54. 				autofocus="true"
  55. 				@blur="hideInput"
  56. 			/>
  57. 			<span v-else>{{ scope.row.position }}</span>
  58. 		</template>
  59. 	  </el-table-column>
  60.     </el-table>
  61.   </div>
  62. </template>
  63.  
  64. <script lang="ts" setup>
  65. import axios from 'axios';
  66. import { ref, onBeforeMount } from 'vue';
  67. import { toRaw } from '@/vue/reactivity';
  68.  
  69. interface Books {
  70.   id: number;
  71.   class: string;
  72.   num?: string;
  73.   position?: string;
  74.   index?: number;   //增加一个index用于当前的row位置信息
  75.   children?: Books[];
  76. }
  77.  
  78. onBeforeMount(() => {
  79. 	getMessage();
  80. });
  81.  
  82. let table_data = ref<Books[]>([]);
  83. let current_cell = ref<string | null>(null);   // 记录双击选中的单元格位置信息
  84.  
  85. function getMessage(): void {
  86. 	axios.get('/getMessage').then((response) => {
  87. 		let idx: number = 0; // 保证递归时的idx是全局的
  88. 		table_data.value.splice(0, table_data.value.length);
  89. 		
  90. 		display(response.data['message'], idx, table_data.value);
  91. 	})
  92. }
  93.  
  94. function display(data: any, idx: number, idArr: Books[] = []): number {
  95. 	for(let key in data) {
  96. 		let value: any = data[key];
  97. 		let type: string = getType(value);
  98. 		
  99. 		if(type === "dict") {
  100. 			let child_books: Books[] = [];
  101. 			idArr.push({
  102. 				id: idx++,
  103. 				class: key,
  104. 				children: child_books
  105. 			});
  106. 			idx = display(value, idx, child_books);
  107. 		}
  108. 		else {
  109. 			idArr.push({
  110. 				id: idx++,
  111. 				class: key,
  112. 				index: -1,
  113. 				num: <string>(<unknown>value[0]),
  114. 				position: <string>(<unknown>value[1])
  115. 			});
  116. 		}
  117. 	}
  118. 	return idx;
  119. }
  120.  
  121. function getType(data: any): string {
  122. 	let type = Object.prototype.toString.call(data);
  123. 	
  124. 	if(type === "[object Object]") return "dict";
  125. 	else {
  126. 		if(type === "[object Array]") return "list";
  127. 		else return "other";
  128. 	}
  129. }
  130.  
  131. // 在初始化表格的时候就给每个单元格赋予位置信息
  132. function setCellClassName({ row, column, rowIndex, columnIndex }): void {
  133. 	row.index = rowIndex;
  134. 	column.index = columnIndex;
  135. }
  136.  
  137. // 双击后先判断当前单元格是否可能存在数据，可能的话，把current_cell置为当前单元格的位置
  138. function editData(row, colunm): void {
  139. 	if(row.children != undefined &&column.index != 0) {}
  140. 	else {
  141. 		current_cell.value = row.index + ',' + column.index;
  142. 	}
  143. }
  144.  
  145. // 失去焦点后，把current_cell置为null
  146. function hideInput(row): void {
  147. 	current_cell.value = null;
  148. }
  149. </script>
  150.  
  151. <style scope>
  152. .el-input {
  153. 	width: 80%;
  154. }
  155. </style>

el-upload

        这个组件用于文件上传，先上一些参考文章

vue+element upload上传带参数的方法 - 开发技术 - 亿速云 (yisu.com)

ElementUI upload 文件自定义上传 和 文件自定义分块上传 - 简书 (jianshu.com)

(2条消息) vue中，Upload上传组件el-upload的使用-zip格式，大小不超过10M & store中获取和保存token_viceen的博客-CSDN博客

        这边列一个示例

  1. <template>
  2.     <div class="algo">
  3.         <el-upload
  4.             ref="upload"
  5. 			:action="action"                       <!--上传请求的服务器url，建议设成变量-->
  6. 			:data="upload_data"                    <!--请求时发送额外参数，建议设成变量-->
  7. 			:limit="1"                             <!--限制上传文件的数量-->
  8. 			:on-exceed="handleExceed"              <!--当超出限制时，执行的钩子函数，在这里就是当触发了limit后执行-->
  9. 			:on-success="handleSuccess"            <!--请求成功后执行的函数，相当于axios的then-->
  10. 			:on-error="handleError"                <!--请求失败后执行的函数，相当于axios的catch-->
  11. 			:beforeUpload="handleBeforeUpload"     <!--发送请求前执行的函数，在这里可以做一些条件判断，配置参数等-->
  12. 			:auto-upload="false"                   <!--不自动上传-->
  13.         >
  14. 			<template #trigger>
  15. 				<el-button type="primary">选择文件</el-button>
  16. 			</template>
  17. 			<el-button type="success" @click="submitUpload">上传</el-button>
  18. 		</el-upload>
  19.     </div>
  20. </template>
  21.  
  22. <script lang="ts" setup>
  23. import axois from "axios";
  24. import { reactive } from 'vue';
  25. import { genFileId } from 'element-plus';
  26. import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
  27.  
  28. let action = ref<string>(axios.defaults.baseURL + '/upload');   // 这样就可以像发送其他axios请求一样，用axios的默认baseURL，而不用输一遍服务器地址，当然这个默认值需要提前配置的
  29. let upload_data = reactive<string>({});  // 直接设置成对象，方便后面添加内容
  30. const upload = ref<UploadInstance>();    // 这时上传对象的实例
  31.  
  32. // 点击后会发送提交请求，但是在发送请求前会先调用handleBeforeUpload函数
  33. function submitUpload(): void {
  34.   upload.value!.submit();
  35. }
  36.  
  37. // 这个函数必须返回boolean参数，当返回false时，会自动停止发送上传请求
  38. function handleBeforeUpload(file: UploadRawFile): boolean {
  39. 	const type = file.name.split('.')[file.name.split('.').length - 1]; // 注意这里不能像python一样写-1
  40. 	if(type !== 'zip') {                        // 要求上传的时zip
  41. 		alert("必须上传zip格式的文件！");
  42. 		return false;
  43. 	}
  44. 	
  45. 	upload_data['a'] = '111';                   // 在这里配置参数
  46. 	return true;
  47. }
  48.  
  49. // 移除之前上传的内容，并用新的内容替代
  50. function handleExceed: UploadProps['onExceed'] = (files) => {
  51.   upload.value!.clearFiles();
  52.   const file = files[0] as UploadRawFile;
  53.   file.uid = genFileId();
  54.   upload.value!.handleStart(file);
  55. }
  56.  
  57. function handleSuccess(response: any):void {
  58. 	console.log(response);
  59. }
  60.  
  61. function handleError(error: Error):void {
  62. 	alert(error);
  63. }
  64. </script>

         这里有一个坑要注意，如果BeforeUpload中用到了异步函数，或者BeforeUpload本身就是异步函数的话，会导致BeforeUpload异步函数中的返回值无法控制submit，这个也有解决方案，但是并不好用，我建议直接把异步的函数包在调用submit接口的外面，这样可以很好的规避这个问题。

el-tabs

记录当前tab页

        使用el-tabs当切换页面是，其实是无法获取到当前处于哪一个页面的。我们可以给el-tabs添加一个点击触发的事件，在事件内由全局变量记录当前页面。但是这样会带来一个问题就是，el-tabs生成时不会激活任何页面，因此要给el-tabs绑定一个v-model，值就等于被激活页面的name属性的值。代码如下：

  1. <template>
  2. 	<div class="test">
  3. 		<el-tabs v-model="store.cur_tab" type="border-card" @tab-click="handleClick">
  4. 			<el-tab-pane label="first" name="first">
  5. 				<p>first</p>
  6. 			</el-tab-pane>
  7. 			<el-tab-pane label="second" name="second">
  8. 				<p>second</p>
  9. 			</el-tab-pane>
  10. 		</el-tabs>
  11. 	</div>
  12. </template>
  13.  
  14. <script lang="ts" setup>
  15. import { mainStore } from '@/store';
  16. import { toRaw } from '@vue/reactivity';
  17. import type { TabsPaneContext } from 'element-plus';
  18.  
  19. let store = mainStore();
  20.  
  21. function handleClick(tab: TabsPaneContext, event: Event): void {
  22. 	store.cur_tab = toRaw(toRaw(tab).props).name;
  23. }
  24. </script>
  25.  
  26. <style></style>

一些小技巧或坑

  1. element属性的值如果是函数或变量，则需要在属性前加上冒号
  2. element事件前要加上@

date-picker

  1. 默认的日期格式是Fri Jul  1 2022 00:00:00 GMT+0800（中国标准时间），增加value-format="YYYY-MM-DD HH:mm:ss"属性可以转换成2022-07-01 00:00:00格式
  2. 宽度控制：用css设置样式无法控制宽度，可以在元素中增加一个style属性 
    1. <el-date-picker style="width:100%;"</el-date-picker>
    2.  
    3. <el-date-picker style="width:250px;"</el-date-picker>

table

  1. 如果所有的el-table-column都设置了width，则可能出现无法占满整个屏幕的现象，这时只要把其中一个el-table-column的width改成min_width就可以了。
  2. fixed属性可以固定某个el-table-column，还可以通过赋值为'left' 或 'right'将某一列固定在左边或右边。
  3. 刷新table：给table添加key属性并绑定一个ref变量，当更新了data时，我们修改一下key对应的变量值，就可以触发table的重新渲染，将新的数据显示出来。
  4. 动态的嵌套表格vue+elementUI表格嵌套表单，包含联级下拉框、动态增加行_小佩丫的博客-CSDN博客_element表格嵌套表单理解element-ui中的slot-scope的理解_dongdongdongJL的博客-CSDN博客_element slot-scope

form

vue+element UI表单验证 - 走看看 (zoukankan.com)

未完待续。。。

参考资料

组件 | Element

 vue+elementUI表格嵌套表单，包含联级下拉框、动态增加行_小佩丫的博客-CSDN博客_element表格嵌套表单

 理解element-ui中的slot-scope的理解_dongdongdongJL的博客-CSDN博客_element slot-scope

 vue+element upload上传带参数的方法 - 开发技术 - 亿速云 (yisu.com)

 ElementUI upload 文件自定义上传 和 文件自定义分块上传 - 简书 (jianshu.com)

 vue中，Upload上传组件el-upload的使用-zip格式，大小不超过10M & store中获取和保存token_viceen的博客-CSDN博客

vue+element UI表单验证 - 走看看 (zoukankan.com)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/116828
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号