循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用(1)-程序员宅基地
技术标签： 2024年程序员学习 前端 vue.js javascript
先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
如果你需要这些资料，可以添加V获取：vip1024c （备注前端）
正文
stripe
highlight-current-row
:header-cell-style=“{background:‘#eef1f6’,color:‘#606266’}”
@selection-change=“selectionChange”
@row-dblclick=“rowDbclick”
JS逻辑代码如下:
rowDbclick(row, column) {
var id = row.ID
this.showView(id);
},
=======================================================================
一般情况下，我们使用界面组件的时候，参考下官网《Element组件使用》，寻找对应组件的代码进行参考，就差不多了，这里还是就各种常规的Element组件进行大概的介绍吧。
对于表单，我们一般定义一个对应的名称，并设置它的data对应的模型名称即可，如下所示。
而表单项，一般是定义好表单项的Label即可，然后在其中插入对应的录入控件或者展示控件。如对于单文本组件使用，如下所示。
其中 v-model=“editForm.ProductNo” 就是对应绑定的数据。
而表单项，可以添加对字段的验证处理，在数据提交前，可以校验客户的录入是否有效等。
<el-form-item
prop=“email”
label=“邮箱”
:rules="[
{ required: true, message: ‘请输入邮箱地址’, trigger: ‘blur’ },
{ type: ‘email’, message: ‘请输入正确的邮箱地址’, trigger: [‘blur’, ‘change’] }
]"
注意这里表单项，必须添加一个prop的属性设置，如 prop=“email” 所示。
一般为了控制布局，我们还结合el-row进行一个布局的处理，如下代码所示（一行等于span为24，span=12也就是一行放两个控件组）。
下拉列表的绑定处理，也是通过 v-model 进行值的绑定，而选项则可以通过数据列表进行绑定。
<el-option
v-for=“(item, key) in typeList”
:key=“key”
:label=“item.value”
:value=“item.key”
/>
而选项中的 typeList，我们可以在页面初始化的时候获取出来即可。
created() {
// 获取产品类型，用于绑定字典等用途
GetProductType().then(data => {
if (data) {
data.forEach(item => {
this.productTypes.set(item.id, item.name)
this.typeList.push({ key: item.id, value: item.name })
})
// 获取列表信息
this.getlist()
}
});
},
对于textarea常规的多行文本框，其实和普通单行文本框处理差不多，指定它的type=“textarea” 和 rows的数值即可。
而对于一些可能需要展示HTML内容的，我们可以使用DIV控件来展示，通过v-html标识来处理包含HTML代码的内容。
对于一些需要展示服务器图片，我们请求后，根据Element图片组件的设置处理即可，如下包括单个图片和多个图片的展示和预览操作。
图片展示的代码如下所示。
<el-image
style=“width: 100px; height: 100px”
:src=“viewForm.Picture”
:preview-src-list=“[viewForm.Picture]”
/>
<el-image
style=“width: 100px; height: 100px”
:src=“viewForm.Banner”
:preview-src-list=“[viewForm.Banner]”
/>
<el-image
v-for=“item in viewForm.pics”
:key=“item.key”
class=“border-radius”
:src=“item.pic”
style=“width: 100px; height: 100px;padding:10px”
:preview-src-list=“getPreviewPics()”
/>
上图中，如果是单个图片，那么预览我们设置一个集合为一个url即可，如 [viewForm.Banner]，如果是多个图片，需要通过一个函数来获取图片列表，如 getPreviewPics() 函数所示。
getPreviewPics() {
// 转换ViewForm.pics里面的pic集合
var list = []
if (this.viewForm.pics) {
this.viewForm.pics.forEach(item => {
if (item.pic) {
list.push(item.pic)
}
})
}
return list
}
对于一些需要使用扩展组件的，我们一般搜索下解决方案，通过npm安装对应的组件即可解决，如对于条码和二维码，我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode，一般在Github上搜索下关键字，总能找到一些很受欢迎的第三方组件。
安装这些组件都有具体的说明，如下所示(如果卸载，直接修改install为uninstall即可）。
npm install @chenfengyuan/vue-barcode vue
以及:
npm install @chenfengyuan/vue-qrcode vue
条码和二维码的展示效果如下所示:
如果全局引入barcode和qrcode 组件，我们在main.js里面引入即可，如下代码所示:
// 引入barcode,qrcode
import VueBarcode from ‘@chenfengyuan/vue-barcode’;
import VueQrcode from ‘@chenfengyuan/vue-qrcode’;
Vue.component(VueBarcode.name, VueBarcode);
富文本编辑，我这里采用了 Tinymce 第三方组件来实现编辑处理，展示效果如下所示。
代码如下所示:
以上就是一些常规的界面组件的使用，后面在继续介绍文件上传和图片结合的操作。
========================================================================
使用Vue的比以往BS开发的好处，就是可以很容易实现组件化，这点很好，一旦我们定义好一个控件，就可以在多个界面里面进行使用，非常方便，而且封装性可以根据自己的需要进行处理。
查询区域一般的界面效果如下所示，除了包含一些常用的查询条件，一般会有一些下拉列表，这些可能是后台字典里面绑定的内容，可以考虑作为一个通用的字典下拉列表组件来做。
其实界面录入的时候，也往往需要这些条件下拉列表的。
那么我们来定义一个自定义组件，并在界面上使用看看。
在Components目录创建一个目录，并创建一个组件的vue文件，命名为my-dictdata.vue，如下所示。
界面模板代码我们就一个select组件为主即可。
<el-option
v-for=“(item, index) in dictItems”
:key=“index”
:label=“item.Text”
:value=“item.Value”
/>
script脚本逻辑代码如下所示。
智能推荐
vue3背景下，el-input嵌套在弹出框中，自动聚焦“失效”？如何实现自动聚焦_vue3 el-input 自动聚焦autofocus无效-程序员宅基地
文章浏览阅读436次，点赞15次，收藏2次。原因或许是，使用autofocus时，确实聚焦了！但是当我们又点击 显示弹出框的按钮时，input又失焦了，所以当我们看到input框时，没有自动聚焦。_vue3 el-input 自动聚焦autofocus无效
linux网络服务配置说课,《说课稿LINUX》PPT课件.ppt-程序员宅基地
文章浏览阅读222次。《《说课稿LINUX》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《说课稿LINUX》PPT课件.ppt(16页珍藏版)》请在装配图网上搜索。1、LINUX 基础应用与配置管理 桂林山水职业学院计算机系 朱笑雷 主要内容 课程定位 1 课程内容设置 2 教学方法与手段 3 教材建设 4 教学团度 5 主要内容 实践条件 6 课程考核 7 教学效果 8 课程特色 9 建设思路 10 一、课..._linux说课课件
在SpringBoot中启动时关于连接数据库失败的问题_springboot启动时数据库连接失败 不关闭-程序员宅基地
文章浏览阅读2.2k次。#在SpringBoot中启动时关于连接数据库失败的问题对照了application.yml，发现配置文件貌似没什么问题，但是在查找信息之后，发现问题正是出现在application.yml中问题出于datasource下的data-username和data-password只要将data-username和data-password改为username和password即可..._springboot启动时数据库连接失败 不关闭
antd-pro(V5)动态菜单_antdpro的菜单-程序员宅基地
文章浏览阅读4.6k次。一般情况下登录系统后菜单是由后端返回的，不是前端写死的。antd-pro也支持，修改的路径在app.tsx在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了，说明配置生效了，接下来就可以围绕这个配置做文章了，我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理，判断菜单里要展示哪些内容（比如替换字段，隐藏不显示的菜单，隐藏按钮等），处理好了后返回一个数组结构即可。示例代码如下export const layout: _antdpro的菜单
Linux安装使用jprofiler6分析服务器应用状态-程序员宅基地
文章浏览阅读77次。为什么80%的码农都做不了架构师？>>> ..._jprofiler6 key
苏小红C语言第四版课后习题练习7.7最大公约数三种计算方式_c语言程序设计第四版课后题答案苏小红第七章-程序员宅基地
文章浏览阅读170次。（可以看出递归算法更加侧重于计算的技巧，并且计算机计算的次数也相对更少）；_c语言程序设计第四版课后题答案苏小红第七章
随便推点
Fiddler抓包，并修改请求数据_filder改数据包-程序员宅基地
文章浏览阅读4.4w次，点赞8次，收藏51次。浏览器抓包（工具：fiddler）并 修改请求内容 工具下载：https://pan.baidu.com/s/1pyKdAwgTdNNvoWA2bGlk9A 1、正常打开网页，输入要提交的内容 2、打开工具，f11暂停了页面的所有提交动作 3、这时再点击提交按钮，请求的数据就会被工具拦截 4、双击截取的数据，右侧会看到请求的具体内容，任意修改数据 5、点击绿色按钮 run ..._filder改数据包
视频格式转换器榜单：10 款最值得拥有的高清视频转换器_奇客视频转换-程序员宅基地
文章浏览阅读560次。如果您想在计算机或任何其他设备上播放高质量的视频，高清视频转换器可以帮助确保您的视频与您的操作系统和硬件兼容。您还可以使用高清转换器更改视频的分辨率，无论您是想提高质量还是降低分辨率以生成更小的文件。在下表中，我们描述了用于转换高清视频的最流行和可用的桌面程序和在线服务。它们各有优缺点，因此请根据您的需要进行选择。_奇客视频转换
Unity血条效果，图片动画_游戏血条动图-程序员宅基地
文章浏览阅读1.9k次。欢迎来到unity学习、unity培训、unity企业培训教育专区，这里有很多U3D资源、U3D培训视频，我们致力于打造业内unity3d培训、学习第一品牌。今天开始做我们的游戏了，组长给分配了任务，我负责做剧情动画，人物血条和种植植物。 一、剧情动画 动画是以多个图片的形式展现的，图片是自己制作的。 private GUITextu_游戏血条动图
环境变量的加载顺序、环境变量集合_环境变量的顺序-程序员宅基地
文章浏览阅读1k次。*******字符编码ASCII,GB2312,GBK,Unicode,UTF-8比较参考：https://blog.csdn.net/softwarenb/article/details/51994943**环境变量的加载顺序：Mac系统的环境变量，加载顺序为：a. /etc/profileb. /etc/pathsc. ~/.bash_profiled. ~/..._环境变量的顺序
科学家发现让人类幸福感飙升的密码！给大脑植入这个算法 | 精选-程序员宅基地
文章浏览阅读316次。▼大型年度AI人物评选——2017中国AI英雄风云榜已于12月4日在乌镇张榜，12月18日在北京国贸三期举行颁奖典礼。榜单评选出年度技术创新人物TOP 10；商业创新人物TOP 10，获取完整榜单请关注网易智能公众号（ID：smartman163），回复关键词“评奖”。本文系网易智能工作室出品聚焦AI，读懂下一个大时代【网易智能讯12月10日消息】不只有你会_人类大脑植入代码
正则表达式匹配中括号内的内容_正则<>里内容-程序员宅基地
文章浏览阅读3.6k次。几经研究， 终于实现了。time[2020-06-04 11:43:36](?<=\[)(.*)(?=])(pattern) 匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。 (?:pattern) 匹配 pattern 但不获取匹配结..._正则<>里内容