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

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

JavaScript

开源分享：docs.qq.com/doc/DSmRnRG…

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

在前面随笔《循序渐进VUE+Element 前端应用开发(5）— 表格列表页面的查询，列表展示和字段转义处理》介绍了基于列表展示了相关数据，并在列表界面整合了增删改查等常规的业务操作处理。

常规的列表展示界面，一般分为几个区域，一个是查询区域，一个是列表展示区域，一个是底部的分页组件区域。查询区域主要针对常规条件进行布局，以及增加一些全局或者批量的操作，如导入、导出、添加、批量添加、批量删除等按钮；而其中主体的列表展示区域，是相对比较复杂一点的地方，需要对各项数据进行比较友好的展示，可以结合Tag,图标，按钮等界面元素来展示，其中列表一般后面会包括一些对单行记录处理的操作，如查看、编辑、删除的操作，如果是批量删除，可以放到顶部的按钮区域。

对于常规按钮、表格、分页组件，前面已经做了相关的介绍，这里就不再赘述。

在介绍具体界面组件的时候，我们先来了解下，整体的界面布局，我们把常规的列表界面，新增、编辑、查看、导入等界面放在一起，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意所示。

每个对话框的:visible的属性值，则是确定哪个模态对话框的显示和隐藏。

在Vue的JS模块里面，我们除了定义对应的对话框显示的变量外，对每个对话框，我们定义一个表单信息用来进行数据的双向绑定处理。

在Vue的JS模块里面，我们除了定义对应的对话框显示的变量外，对每个对话框，我们定义一个表单信息用来进行数据的双向绑定处理。

常规的新增、编辑、查看、导入等内容的定义，作为一个对话框组件定义，常规的对话框组件的使用代码如下所示。

<el-dialog

title="提示"

:visible.sync="dialogVisible"

width="30%"

:before-close="handleClose">

这是一段信息

<el-button @click="dialogVisible = false">取 消

<el-button type="primary" @click="dialogVisible = false">确 定

为了控制对话框的样式，我们这里注意下footer的slot，这个我们一般是把处理按钮放在这里，如对于查看界面对话框，我们定义如下所示。

一般来说，对于表单内容比较多的场景，我们一般分开多个选项卡进行展示或者录入，这样方便管理，查看界面整体效果如下所示。

对于对话框的数据绑定，我们在打开对话框前，先通过API模块请求获得JSON数据，然后绑定在对应的对话框模型属性上即可，如对于查看界面，我们的处理逻辑如下所示。

showView(id) {

var param = { id: id }

GetProductDetail(param).then(data => {

Object.assign(this.viewForm, data);

})

this.isView = true

},

对于表格的双击，我们同样绑定它的查看明细处理操作，如下模板代码和JS代码所示。

模板HTML代码如下：

<el-table

v-loading="listLoading"

:data="productlist"

border

fit

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代码的内容。