循序渐进VUE+Element 前端应用开发(6）--- 常规Element 界面组件的使用(1)

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里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);

},

2、常规界面组件的使用

=======================================================================

一般情况下，我们使用界面组件的时候，参考下官网《Element组件使用》，寻找对应组件的代码进行参考，就差不多了，这里还是就各种常规的Element组件进行大概的介绍吧。

1）表单和表单项、单文本框

---

对于表单，我们一般定义一个对应的名称，并设置它的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也就是一行放两个控件组）。

2）、下拉列表控件的绑定

---

下拉列表的绑定处理，也是通过 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代码的内容。

3）、图片展示

---

对于一些需要展示服务器图片，我们请求后，根据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

}

4）、第三方扩展控件

---

对于一些需要使用扩展组件的，我们一般搜索下解决方案，通过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 第三方组件来实现编辑处理，展示效果如下所示。

代码如下所示:

以上就是一些常规的界面组件的使用，后面在继续介绍文件上传和图片结合的操作。

3、自定义组件的创建使用

========================================================================

使用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脚本逻辑代码如下所示。