Element

ElementPlus 的特点ElementPlus 是由 Element 团队开发的一个全新的组件库，它齐全基于 Vue 3 的新个性和 API 进行开发，充分利用了 Vue 3 的性能劣势和组合式 API。ElementPlus 的组件不仅领有优良的设计格调和交互体验，而且反对多种主题定制和国际化，适应不同的场景和需要。ElementPlus 还提供了一套残缺的 Sketch 设计资源，不便设计师进行原型设计和视觉稿制作。 ElementPlus 的装置ElementPlus 反对通过 npm 或 yarn 装置，也反对通过 CDN 引入。装置 ElementPlus 前，须要先确保我的项目曾经装置了 Vue 3。以下是应用 npm 装置 ElementPlus 的命令： npm install element-plus --save ElementPlus 的应用ElementPlus 反对全局引入和按需引入两种形式。全局引入是指在我的项目的入口文件中一次性导入所有的组件和款式，这样能够不便地应用任何一个组件，但会减少我的项目的打包体积。按需引入是指在每个页面或组件中只导入须要应用的组件和款式，这样能够缩小我的项目的打包体积，但须要手动治理每个组件的依赖。 全局引入如果要应用全局引入的形式，能够在我的项目的入口文件（如 main.js）中增加以下代码： import { createApp } from 'vue'import App from './App.vue'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'const app = createApp(App)app.use(ElementPlus)app.mount('#app')这样就能够在任何页面或组件中间接应用 ElementPlus 的组件了，例如： <template> <el-button type="primary">点击</el-button></template>按需引入如果要应用按需引入的形式，须要先装置一个插件 babel-plugin-component，它能够主动转换代码中的 import 语句，实现按需加载组件和款式。以下是装置 babel-plugin-component 的命令： ...

download：黑马Vue3 + ElementPlus + Pinia 小兔鲜电商我的项目2023版ElementPlus：优雅高效的Vue组件库随着Vue.js在前端开发中的广泛应用，越来越多的UI组件库涌现进去。而其中一款备受瞩目的组件库就是ElementPlus。 作为一款基于Vue 3.0的组件库，ElementPlus不仅完满地继承了Element UI的所有个性，并且进行了深度降级和优化，提供了更加欠缺、稳固的组件库解决方案。那么，这个组件库到底有哪些值得咱们关注的特点和劣势呢？接下来，咱们将会对ElementPlus的特点和劣势进行具体介绍。 一、 代码精简ElementPlus采纳了新的Tree-shaking技术，在构建时只打包应用到的组件，减小了整个我的项目的体积，同时也进步了我的项目的加载速度。这种形式不仅让开发者能够自由选择须要的组件以及所需款式，还能够防止因为引入过多未应用的组件造成的节约。 二、TypeScript 反对借助TypeScript的类型查看性能，ElementPlus在编写代码时能够帮忙咱们防止一些非常规的谬误。例如，当咱们在调用某个组件时漏掉了必填参数，甚至连错传了参数类型，这时候TypeScript就能及时发现并提醒咱们批改代码。而且，ElementPlus的源代码都是应用TypeScript编写的，这意味着你能够更加轻松地进行二次开发，并且升高保护老本。 三、组件残缺ElementPlus提供了大量的组件和API反对，包含但不限于布局组件、表单组件、数据展现组件、导航组件等等。在保障与Vue 3.0的兼容性的根底上，ElementPlus还新增了一些罕用的组件，例如Cascader级联选择器等等，这使得咱们再也无需手动去寻找其余第三方插件来实现特定性能。 四、自定义主题ElementPlus提供了一个灵便的主题零碎。通过该零碎，你能够轻松地自定义我的项目中的主题，包含色彩、字体、边框等等，以适应我的项目需要，同时也能够缩小CSS冗余代码的应用，从而进步应用程序的性能。 五、易用性最初，ElementPlus领有良好的易用性，它提供了具体的文档和演示示例，让开发者更加方便快捷地学习和应用。同时，ElementPlus还有一个弱小的社区反对，你能够在社区中提出问题，或者和其他人分享你的应用教训。 总的来说，ElementPlus是一款优雅高效的Vue组件库，它让咱们更加轻松、便捷地开发Web应用程序，并且提供了良好的可维护性。如果你正在寻找一款Vue 3.0的UI组件库，无妨试试ElementPlus吧！

1.残缺导入本局部内容参考了element-plus官网和vue3.0-ts-admin我的项目。正如官网文档所言，如果你对打包后的文件大小不是很在乎，那么应用残缺的导入比拟不便。留神：残缺导入后，应用的时候间接用1.1 导入main.ts文件import { createApp } from 'vue'import ElementPlus from "element-plus";import "element-plus/lib/theme-chalk/index.css";import App from './App.vue' const app = createApp(App) app.use(ElementPlus)app.mount('#app')复制代码1.2 应用如下代码中用到了el-menu，间接应用即可：<template> <div> <el-menu :collapse="state.isSidebarNavCollapse" text-color="#eee" active-text-color="#4dbcff" :default-active="state.currentMenu" class="theme-bg" id="menu" :unique-opened="true" > <MENU :menuList="state.sidebarMenu"></MENU></el-menu></div></template>复制代码2.按需主动导入按需主动导入是举荐的导入形式。本节内容参考了vue3-music我的项目，您能够clone代码进行具体学习。留神：如果采纳主动按需导入的形式，则在应用组件的时候间接应用，不须要任何显示的导入语句。咱们看一下按需导入的几个关键环节：2.1 装置插件m install -D unplugin-vue-components unplugin-auto-import复制代码2.2 vite配置文件// vite.config.tsimport { defineConfig } from 'vite'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ // ... plugins: [ // ...AutoImport({ resolvers: [ElementPlusResolver()],}),Components({ resolvers: [ElementPlusResolver()],}),],})复制代码unplugin-vue-components/vite是负责组件主动导入的，你能够在不导入和注册组件的状况下在模板中应用想要用到的组件。unplugin-vue-components内置了风行UI组件库的resolvers（例如element-plus的），咱们能够看一下unplugin-vue-components中element-plus的resolver局部源码：// https://github.com/antfu/unpl...// resolveComponent办法中有一段代码：return { from: element-plus/lib/el-${partialName}, sideEffects: getSideEffectsLegacy(partialName, options),}// getSideEffectsLegacy：function getSideEffects(dirName: string, options: ElementPlusResolverOptionsResolved): SideEffectsInfo | undefined { const { importStyle, ssr } = options const themeFolder = 'element-plus/theme-chalk' const esComponentsFolder = 'element-plus/es/components' ...

问题形容最近产品提出一个需要，说是做表格出现统计数据，不过数据源是来自两个中央的，所以须要做两个表格去出现数据，同时在表格最初统计数据。 效果图咱们先看一下效果图 思路获取对应的两个表格设置滚动条的dom，并通过Element.scrollLeft去设置滚动的间隔 官网文档：https://developer.mozilla.org... 滚动容器（审查元素即可得悉）： 残缺代码本人演示的话，间接复制粘贴即可，代码中蕴含正文 <template> <div class="kkk"> <div class="myWrap"> <el-table ref="one" :data="tableBody" border :header-cell-style="{ background: '#FAFAFA', color: '#333333', fontWeight: 'bold', fontSize: '14px', }" show-summary > <el-table-column type="index" label="序号" width="60"> </el-table-column> <el-table-column prop="bookType" label="人物附属" width="100" ></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="zhifubao" label="支付宝" width="160"> </el-table-column> <el-table-column prop="weixin" label="微信" width="160"> </el-table-column> <el-table-column prop="jingdong" label="京东" width="160"> </el-table-column> <el-table-column prop="yunshanfu" label="云闪付" width="160"> </el-table-column> <el-table-column prop="suning" label="苏宁" width="160"> </el-table-column> <el-table-column prop="lakala" label="拉卡拉" width="160"> </el-table-column> </el-table> <el-table ref="two" :data="tableBody2" border show-summary :show-header="false" > <el-table-column type="index" label="序号" width="60"> </el-table-column> <el-table-column prop="bookType" label="业务类型" width="100" ></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="zhifubao" label="支付宝" width="160"> </el-table-column> <el-table-column prop="weixin" label="微信" width="160"> </el-table-column> <el-table-column prop="jingdong" label="京东" width="160"> </el-table-column> <el-table-column prop="yunshanfu" label="云闪付" width="160"> </el-table-column> <el-table-column prop="suning" label="苏宁" width="160"> </el-table-column> <el-table-column prop="lakala" label="拉卡拉" width="160"> </el-table-column> </el-table> </div> </div></template><script>// cnpm i lodash --saveimport _ from "lodash";export default { data() { return { tableBody: [ { bookType: "西游记", name: "孙悟空", zhifubao: 1, weixin: 2, jingdong: 3, yunshanfu: 4, suning: 5, lakala: 6, }, { bookType: "西游记", name: "猪八戒", zhifubao: 6, weixin: 5, jingdong: 4, yunshanfu: 3, suning: 2, lakala: 1, }, ], tableBody2: [ { bookType: "三国演义", name: "刘备", zhifubao: 2, weixin: 2, jingdong: 2, yunshanfu: 2, suning: 2, lakala: 2, }, { bookType: "三国演义", name: "猪八戒", zhifubao: 3, weixin: 3, jingdong: 3, yunshanfu: 3, suning: 3, lakala: 3, }, ], }; }, mounted() { // 1. 初始化的时候，设置横向滚动规定 this.setScrollRule(); }, methods: { setScrollRule() { let that = this; // 存一份this便于取用 this.one = this.$refs.one.bodyWrapper; // 获取带有滚动条的dom元素，留神饿了么UI的el-table的横向滚动条是设置在类名为 this.two = this.$refs.two.bodyWrapper; // class="el-table__body-wrapper is-scrolling-left" 这个dom上。审查元素可知 console.log("滚动条dom容器", this.one); // 2. 绑定滚动事件，顺带加上一个节流函数吧，也算是性能优化 this.one.addEventListener( "scroll", _.throttle( function () { that.fn1(); // 85毫秒触发一次吧 }, 85, { leading: true, //指定调用在节流开始前 trailing: false, //指定调用在节流完结后, } ) ); // 同上... this.two.addEventListener( "scroll", _.throttle( function () { that.fn2(); }, 85, { leading: true, trailing: false, } ) ); }, // 3. 通过Element.scrollLeft属性 能够读取或设置元素滚动条到元素右边的间隔 fn1() { console.log("滚动条一 挪动多少？", this.one.scrollLeft); this.two.scrollLeft = this.one.scrollLeft; /** * 加了节流函数当前，就会呈现当咱们滑动过快的时候，远小于定义节流工夫所触发的距离 * 就会呈现间隔不精确问题，所以再加一个延时定时器从新更正（更新一下地位） * */ setTimeout(() => { this.two.scrollLeft = this.one.scrollLeft; // api文档详情见mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft }, 120); }, // 同上... fn2() { console.log("滚动条二 挪动多少？", this.two.scrollLeft); this.one.scrollLeft = this.two.scrollLeft; setTimeout(() => { this.one.scrollLeft = this.two.scrollLeft; }, 120); }, }, beforeDestroy() { // 移除事件监听 this.one.removeEventListener("scroll", this.fn1); this.one.removeEventListener("scroll", this.fn2); },};</script>好忘性不如烂笔头，记录一下吧 ^_^

一、Vue 二、Element

首先v-loading和:loading只在elementui的元素上应用失效，如：<div v-loading="true">有效。 区别：v-loading在表单或表格上应用，（可了解为页面加载）:loading在按钮上应用

实现形式1、取数据列表中第一条作为表头数据，再遍历删除不是表头的固定属性，后果赋值给一个空对象；2、把解决好的数据遍历 key 名 puah 进表头配置数组中，当时在写一个 key 名所对应的中文名办法返回中文名。 数据格式 /*表格数据*/const dataList = [ { name: "李小龙", age: 24, city: "深圳", gender: "男", education: "本科", hobby: "武术" }, { name: "黄飞鸿", age: 25, city: "深圳", gender: "男", education: "本科", hobby: "武术" }, { name: "陈真", age: 26, city: "深圳", gender: "男", education: "本科", hobby: "武术" }, { name: "霍元甲", age: 26, city: "深圳", gender: "男", education: "本科", hobby: "武术" },]/*表头配置*/const headConfig = { 名字: "name", 年龄: "age", 性别: "gender"}实现形式1：删除不是表头配置的属性 ...

<el-table-column prop="statusDesc" label="状态" width="90"> <template slot-scope="scope"> <div :style="{'color':scope.row.status==1? 'red':'#333'}"> {{scope.row.statusDesc}} </div> </template></el-table-column>

官网提供的文档只提供了一层 看到正好有敌人问Dropdown如何做级联 当初把代码贴到上面三联四联做法统一 <el-dropdown trigger='click' :hide-on-click='false'> <span class="el-dropdown-link"> <el-link type="primary" style='margin-left:10px;'>{{title}}</el-link> <!-- <i class="el-icon-arrow-down el-icon--right"></i> --> </span> <el-dropdown-menu slot="dropdown"> <template v-for="item in menu"> <el-dropdown-item v-if='!item.childer'>{{item.title}}</el-dropdown-item> <el-dropdown-item v-else> <el-dropdown placement='right-start' > <span class="el-dropdown-link"> {{item.title}}<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <template v-for='items in item.childer'> <el-dropdown-item>{{items.title}}</el-dropdown-item> </template> </el-dropdown-menu> </el-dropdown> </el-dropdown-item> </template> </el-dropdown-menu> </el-dropdown>menu : [ { title : "分类", url : "", childer :[ { title : '分类1', url : '1111' }, { title : '分类2', url : '2222' }, { title : '分类3', url : '3333' } ] }, { title : "我的", url : "", childer :[ { title : '集体核心', url : 'b1111' }, { title : '我的订单', url : 'b2222' }, { title : '购物车', url : 'b3333' }, { title : '零钱', url : 'b4444' }, { title : '账户平安', url : 'b5555' } ] }, { title : '首页', url : 'https://segmentfault.com/' } ]

在应用vue+element中,咱们时常会应用到element中的MessageBox 弹框,当初我分享一下我的教训1.开发环境vue+element 要实现上面的成果 我简略说我一下我的思路,首先是应用element的MessageBox 弹框,代码如下 <el-dialog title="增加账号" :visible.sync="centerDialogVisible" width="60%" center :before-close="handleClose" id="chen-show"><!-- 设置上部门的按钮 --> <div class="chen-xinz-botton"> <!-- 设置按钮1 --> <el-button type="info" round @click="showryxx">人员信息</el-button> <!-- 按钮1 完结啦 --> <!-- 设置按钮2 --> <el-button type="info" round @click="showjnxx">技能信息</el-button> <!-- 设置按钮2 完结啦 --> </div> <!-- 设置上局部的按钮完结啦 --> </el-dialog> </div> 在ruturn上面定义两个变量在methods中定义事件整体思路其实很简略,点击一个按钮呈现弹框,这段代码写在template中那个地位都能够,里边的布局跟失常的力其实没有区别。//留神在这块弹窗里边,其实有5块内容,父级就是弹框自身,在.el-dialog--center 中,有一个默认的margin-top是15vh,只能通过以下的形式去批改,留神,此时设置的高度是笼罩了弹框的高度 *这一块是弹框两头局部的高度,最好是应用最高权限 最初是设置底部的两个按钮,确认和勾销,默认在底部的两头地位,此时这个值设置为向右居中,示意:确认和勾销在左边的地位。 //整体思路:定义两个变量,管制点击人员信息和技能信息的模块的切换。而后设置弹框5块的款式,之后就是失常的布局了。//本期的教程到了这里就完结啦,是不是很简略。在这个畛域,不要抬头,不要认输。