在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框、多文本框、下拉列表,以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用,使得我们对如何利用Element组件有一个大概的认识。

1、列表界面和其他模块展示处理

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

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

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

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

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

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

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

  1. <el-dialog
  2. title="提示"
  3. :visible.sync="dialogVisible"
  4. width="30%"
  5. :before-close="handleClose">
  6. <span>这是一段信息</span>
  7. <span slot="footer" class="dialog-footer">
  8. <el-button @click="dialogVisible = false">取 消</el-button>
  9. <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  10. </span>
  11. </el-dialog>

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

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

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

  1. showView(id) {
  2. var param = { id: id }
  3. GetProductDetail(param).then(data => {
  4. Object.assign(this.viewForm, data);
  5. })
  6. this.isView = true
  7. },

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

模板HTML代码如下:

  1. <el-table
  2. v-loading="listLoading"
  3. :data="productlist"
  4. border
  5. fit
  6. stripe
  7. highlight-current-row
  8. :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  9. @selection-change="selectionChange"
  10. @row-dblclick="rowDbclick"
  11. >

JS逻辑代码如下  

  1. rowDbclick(row, column) {
  2. var id = row.ID
  3. this.showView(id);
  4. },

2、常规界面组件的使用

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

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

对于表单,我们一般定义一个对应的名称,并设置它的data对应的模型名称即可,如下所示。

  1. <el-form ref="viewForm" :model="viewForm" label-width="80px">

而表单项,一般是定义好表单项的Label即可,然后在其中插入对应的录入控件或者展示控件。如对于单文本组件使用,如下所示。

  1. <el-form-item label="产品编号">
  2. <el-input v-model="editForm.ProductNo" />
  3. </el-form-item>

其中 v-model="editForm.ProductNo"  就是对应绑定的数据。

而表单项,可以添加对字段的验证处理,在数据提交前,可以校验客户的录入是否有效等。

  1. <el-form-item
  2. prop="email"
  3. label="邮箱"
  4. :rules="[
  5. { required: true, message: '请输入邮箱地址', trigger: 'blur' },
  6. { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
  7. ]"
  8. >
  9. <el-input v-model="dynamicValidateForm.email"></el-input>
  10. </el-form-item>

注意这里表单项,必须添加一个prop的属性设置,如 prop="email" 所示。

一般为了控制布局,我们还结合el-row进行一个布局的处理,如下代码所示(一行等于span为24,span=12也就是一行放两个控件组)。

  1. <el-row>
  2. <el-col :span="12">
  3. <el-form-item label="产品编号">
  4. <el-input v-model="editForm.ProductNo" />
  5. </el-form-item>
  6. </el-col>
  7. <el-col :span="12">
  8. <el-form-item label="条码">
  9. <el-input v-model="editForm.BarCode" />
  10. </el-form-item>
  11. </el-col>
  12. </el-row>

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

下拉列表的绑定处理,也是通过 v-model 进行值的绑定,而选项则可以通过数据列表进行绑定。

  1. <el-form-item label="商品类型">
  2. <el-select v-model="editForm.ProductType" filterable="" placeholder="请选择">
  3. <el-option
  4. v-for="(item, key) in typeList"
  5. :key="key"
  6. :label="item.value"
  7. :value="item.key"
  8. />
  9. </el-select>
  10. </el-form-item>

而选项中的 typeList,我们可以在页面初始化的时候获取出来即可。

  1. created() {
  2. // 获取产品类型,用于绑定字典等用途
  3. GetProductType().then(data => {
  4. if (data) {
  5. data.forEach(item => {
  6. this.productTypes.set(item.id, item.name)
  7. this.typeList.push({ key: item.id, value: item.name })
  8. })
  9.  
  10. // 获取列表信息
  11. this.getlist()
  12. }
  13. });
  14. },

对于textarea常规的多行文本框,其实和普通单行文本框处理差不多,指定它的type="textarea" 和 rows的数值即可。

  1. <el-tab-pane label="说明" name="second">
  2. <el-form-item label="说明">
  3. <el-input v-model="editForm.Description" type="textarea" :rows="10" />
  4. </el-form-item>
  5. </el-tab-pane>

而对于一些可能需要展示HTML内容的,我们可以使用DIV控件来展示,通过v-html标识来处理包含HTML代码的内容。

  1. <el-tab-pane label="详细说明">
  2. <el-form-item label="详细说明">
  3. <div class="border-radius" v-html="viewForm.Note" />
  4. </el-form-item>
  5. </el-tab-pane>

3)、图片展示

对于一些需要展示服务器图片,我们请求后,根据Element图片组件的设置处理即可,如下包括单个图片和多个图片的展示和预览操作。

图片展示的代码如下所示。

  1. <el-tab-pane label="图片信息">
  2. <el-form-item label="封面图片">
  3. <el-image
  4. style="width: 100px; height: 100px"
  5. :src="viewForm.Picture"
  6. :preview-src-list="[viewForm.Picture]"
  7. />
  8. </el-form-item>
  9. <el-form-item label="Banner图片">
  10. <el-image
  11. style="width: 100px; height: 100px"
  12. :src="viewForm.Banner"
  13. :preview-src-list="[viewForm.Banner]"
  14. />
  15. </el-form-item>
  16. <el-form-item label="商品展示图片">
  17. <el-image
  18. v-for="item in viewForm.pics"
  19. :key="item.key"
  20. class="border-radius"
  21. :src="item.pic"
  22. style="width: 100px; height: 100px;padding:10px"
  23. :preview-src-list="getPreviewPics()"
  24. />
  25. </el-form-item>
  26. </el-tab-pane>

上图中,如果是单个图片,那么预览我们设置一个集合为一个url即可,如 [viewForm.Banner],如果是多个图片,需要通过一个函数来获取图片列表,如 getPreviewPics() 函数所示。

  1. getPreviewPics() {
  2. // 转换ViewForm.pics里面的pic集合
  3. var list = []
  4. if (this.viewForm.pics) {
  5. this.viewForm.pics.forEach(item => {
  6. if (item.pic) {
  7. list.push(item.pic)
  8. }
  9. })
  10. }
  11. return list
  12. }

4)、第三方扩展控件

对于一些需要使用扩展组件的,我们一般搜索下解决方案,通过npm安装对应的组件即可解决,如对于条码和二维码,我使用 @chenfengyuan/vue-barcode和 @chenfengyuan/vue-qrcode,一般在Github上搜索下关键字,总能找到一些很受欢迎的第三方组件。

安装这些组件都有具体的说明,如下所示(如果卸载,直接修改install为uninstall即可)。

  1. npm install @chenfengyuan/vue-barcode vue

以及

  1. npm install @chenfengyuan/vue-qrcode vue

条码和二维码的展示效果如下所示

如果全局引入barcode和qrcode 组件,我们在main.js里面引入即可,如下代码所示

  1. // 引入barcode,qrcode
  2. import VueBarcode from '@chenfengyuan/vue-barcode';
  3. import VueQrcode from '@chenfengyuan/vue-qrcode';
  4. Vue.component(VueBarcode.name, VueBarcode);

富文本编辑,我这里采用了 Tinymce 第三方组件来实现编辑处理,展示效果如下所示。

代码如下所示

  1. <el-tab-pane label="详细说明" name="third">
  2. <el-form-item label="详细说明">
  3. <tinymce v-model="editForm.Note" :height="300" />
  4. </el-form-item>
  5. </el-tab-pane>

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

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

使用Vue的比以往BS开发的好处,就是可以很容易实现组件化,这点很好,一旦我们定义好一个控件,就可以在多个界面里面进行使用,非常方便,而且封装性可以根据自己的需要进行处理。

查询区域一般的界面效果如下所示,除了包含一些常用的查询条件,一般会有一些下拉列表,这些可能是后台字典里面绑定的内容,可以考虑作为一个通用的字典下拉列表组件来做。

其实界面录入的时候,也往往需要这些条件下拉列表的。

那么我们来定义一个自定义组件,并在界面上使用看看。

在Components目录创建一个目录,并创建一个组件的vue文件,命名为my-dictdata.vue,如下所示。

界面模板代码我们就一个select组件为主即可。

  1. <template>
  2. <el-select v-model="svalue" filterable clearable placeholder="请选择">
  3. <el-option
  4. v-for="(item, index) in dictItems"
  5. :key="index"
  6. :label="item.Text"
  7. :value="item.Value"
  8. />
  9. </el-select>
  10. </template>

script脚本逻辑代码如下所示。

  1. <script>
  2. // 引入API模块类方法
  3. import { GetDictData } from '@/api/dictdata'
  4.  
  5. export default {
  6. name: 'MyDictdata', // 组件的名称
  7. props: {
  8. typeName: { // 字典类型方式,从后端字典接口获取数据
  9. type: String,
  10. default: ''
  11. },
  12. options: {// 固定列表方式,直接绑定
  13. type: Array,
  14. default: () => { return [] }
  15. }
  16. },
  17. data() {
  18. return {
  19. dictItems: [], // 设置的字典列表
  20. svalue: '' // 选中的值
  21. }
  22. },
  23. watch: {
  24. // 判断下拉框的值是否有改变
  25. svalue(val, oldVal) {
  26. if (val !== oldVal) {
  27. this.$emit('input', this.svalue);
  28. }
  29. }
  30. },
  31. mounted() {
  32. var that = this;
  33.  
  34. if (this.typeName && this.typeName !== '') {
  35. // 使用字典类型,从服务器请求数据
  36. GetDictData(this.typeName).then(data => {
  37. if (data) {
  38. data.forEach(item => {
  39. if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
  40. that.dictItems.push(item)
  41. }
  42. });
  43. }
  44. })
  45. } else if (this.options && this.options.length > 0) {
  46. // 使用固定字典列表
  47. this.options.forEach(item => {
  48. if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
  49. that.dictItems.push(item)
  50. }
  51. });
  52. }
  53. // 设置默认值
  54. this.svalue = this.value;
  55. },
  56. methods: {
  57.  
  58. }
  59. }
  60. </script>

主要就是处理字典数据的获取,并绑定到模型对象上即可。

在页面上使用前,需要引入我们定义的组件

  1. import myDictdata from '@/components/Common/my-dictdata'

然后包含进去components里面即可

  1. export default {
  2. components: { myDictdata },

那么原来需要直接使用select组件的代码

  1. <el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
  2. <el-option
  3. v-for="(item, key) in typeList"
  4. :key="key"
  5. :label="item.value"
  6. :value="item.key"
  7. />
  8. </el-select>

则可以精简为一行代码

  1. <my-dictdata v-model="searchForm.ProductType" type-name="商品类型" />

而对于固定列表的,我们也可以通用的处理代码

  1. <my-dictdata v-model="searchForm.Status" :options="Status" />

其中Status是定义的一个对象集合

  1. Status: [
  2. { Text: '正常', Value: 0 },
  3. { Text: '推荐', Value: 1 },
  4. { Text: '停用', Value: 2 }
  5. ]

是不是非常方便,而得到的效果则不变。

以上就是多个页面内容,通过对话框层模式整合在一起,并介绍如何使用,以及对界面中常见的Element组件进行介绍如何使用,以及定义一个字典列表的主定义组件,用于简化界面代码使用,

列出以下前面几篇随笔的连接,供参考:

循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作

循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用

循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理

循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  2. 循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)

    在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...

  3. 循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用

    在我前面随笔<循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用>里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框.多文本框.下拉列 ...

  4. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  5. 循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理

    在我们很多模块里面,都需要使用到一些诸如图片.Excel文件.PDF文件等附件的管理,一般我们倾向于把它独立为一个公用的附件管理模块,这样可以有效的统一管理附件的信息.本篇随笔介绍附件内容的管理,包括 ...

  6. 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

  7. 循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示

    在我们做应用系统的时候,往往都会涉及图表的展示,综合的图表展示能够给客户带来视觉的享受和数据直观体验,同时也是增强客户认同感的举措之一.基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在 ...

  8. 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理

    VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...

  9. 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...

  10. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

随机推荐

  1. Lasso回归

    Lasso 是一个线性模型,它给出的模型具有稀疏的系数(sparse coefficients).它在一些场景中是很有用的,因为它倾向于使用较少参数的情况,能够有效减少给定解决方案所依赖变量的个数.因 ...

  2. 【mybatis】IF判断的坑

    http://cheng-xinwei.iteye.com/blog/2008200 最近在项目使用mybatis中碰到个问题 <if test="type=='y'"> ...

  3. HTTP接口测试

    HTTP接口测试 1.1 get接口 请求URL http://api.nnzhp.cn/api/user/stu_info 请求方式 get 请求参数 参数名 必选 类型 说明 stu_name 是 ...

  4. Hexo+GitHub Actions 完美打造个人博客

    Hexo简介 Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架.大家可以进入hexo官网进行详细查看, ...

  5. CODING 敏捷实战系列课第四讲:从头搭建持续集成 DevOps 流水线

    <从头搭建持续集成 DevOps 流水线>由资深敏捷教练.极限编程学院高级讲师.CODING 特邀敏捷顾问李小波老师主讲,将基于 CODING 展示如何编写 Jenkinsfile 搭建 ...

  6. elasticsearch kibana + 分词器安装详细步骤

    elasticsearch kibana + 分词器安装详细步骤 一.准备环境 系统:Centos7 JDK安装包:jdk-8u191-linux-x64.tar.gz ES安装包:elasticse ...

  7. MYsql 8 连接报错 MySQLNonTransientConnectionException: Could not create connection to database server.

    本地安装mysql 是8 项目中数据驱动 也要求是 8 <dependency> <groupId>mysql</groupId> <artifactId&g ...

  8. Redis数据类型简介(十分钟快速学习Redis)

    如何在ubuntu18.04上安装和保护redis 如何连接到Redis数据库 如何管理Redis数据库和Keys 如何在Redis中管理副本和客户端 如何在Redis中管理字符串 如何在Redis中 ...

  9. 一、HDFS 原理分析

    HDFS 全称 Hadoop Distribute File System,是 Hadoop 的一个分布式文件系统 一.HDFS 的系统结构 1.1 数据块 -- block 文件在 HDFS 上分块 ...

  10. MySQL 数据库的基本使用

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,而MySQL AB 公司被 Oracle 公司收购,故 MySQL 现在属于 Oracle 公司.MySQL 是一种关联数据 ...