Vue Element前端应用开发之常规Element界面组件
作者:伍华聪 发布时间:2024-04-26 17:39:32
1、列表界面和其他模块展示处理
常规的列表展示界面,一般分为几个区域,一个是查询区域,一个是列表展示区域,一个是底部的分页组件区域。查询区域主要针对常规条件进行布局,以及增加一些全局或者批量的操作,如导入、导出、添加、批量添加、批量删除等按钮;而其中主体的列表展示区域,是相对比较复杂一点的地方,需要对各项数据进行比较友好的展示,可以结合Tag,图标,按钮等界面元素来展示,其中列表一般后面会包括一些对单行记录处理的操作,如查看、编辑、删除的操作,如果是批量删除,可以放到顶部的按钮区域。
对于常规按钮、表格、分页组件,前面已经做了相关的介绍,这里就不再赘述。
在介绍具体界面组件的时候,我们先来了解下,整体的界面布局,我们把常规的列表界面,新增、编辑、查看、导入等界面放在一起,除了列表页面,其他内容以弹出层对话框的方式进行处理,如下界面示意所示。
每个对话框的:visible的属性值,则是确定哪个模态对话框的显示和隐藏。
在Vue的JS模块里面,我们除了定义对应的对话框显示的变量外,对每个对话框,我们定义一个表单信息用来进行数据的双向绑定处理。
常规的新增、编辑、查看、导入等内容的定义,作为一个对话框组件定义,常规的对话框组件的使用代码如下所示。
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
为了控制对话框的样式,我们这里注意下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对应的模型名称即可,如下所示。
<el-form ref="viewForm" :model="viewForm" label-width="80px">
而表单项,一般是定义好表单项的Label即可,然后在其中插入对应的录入控件或者展示控件。如对于单文本组件使用,如下所示。
<el-form-item label="产品编号">
<el-input v-model="editForm.ProductNo" />
</el-form-item>
其中 v-model="editForm.ProductNo" 就是对应绑定的数据。
而表单项,可以添加对字段的验证处理,在数据提交前,可以校验客户的录入是否有效等。
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
注意这里表单项,必须添加一个prop的属性设置,如prop="email" 所示。
一般为了控制布局,我们还结合el-row进行一个布局的处理,如下代码所示(一行等于span为24,span=12也就是一行放两个控件组)。
<el-row>
<el-col :span="12">
<el-form-item label="产品编号">
<el-input v-model="editForm.ProductNo" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="条码">
<el-input v-model="editForm.BarCode" />
</el-form-item>
</el-col>
</el-row>
2)下拉列表控件的绑定
下拉列表的绑定处理,也是通过v-model 进行值的绑定,而选项则可以通过数据列表进行绑定。
<el-form-item label="商品类型">
<el-select v-model="editForm.ProductType" filterable="" placeholder="请选择">
<el-option
v-for="(item, key) in typeList"
:key="key"
:label="item.value"
:value="item.key"
/>
</el-select>
</el-form-item>
而选项中的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的数值即可。
<el-tab-pane label="说明" name="second">
<el-form-item label="说明">
<el-input v-model="editForm.Description" type="textarea" :rows="10" />
</el-form-item>
</el-tab-pane>
而对于一些可能需要展示HTML内容的,我们可以使用DIV控件来展示,通过v-html标识来处理包含HTML代码的内容。
<el-tab-pane label="详细说明">
<el-form-item label="详细说明">
<div class="border-radius" v-html="viewForm.Note" />
</el-form-item>
</el-tab-pane>
3)图片展示
对于一些需要展示服务器图片,我们请求后,根据Element图片组件的设置处理即可,如下包括单个图片和多个图片的展示和预览操作。
图片展示的代码如下所示。
<el-tab-pane label="图片信息">
<el-form-item label="封面图片">
<el-image
style="width: 100px; height: 100px"
:src="viewForm.Picture"
:preview-src-list="[viewForm.Picture]"
/>
</el-form-item>
<el-form-item label="Banner图片">
<el-image
style="width: 100px; height: 100px"
:src="viewForm.Banner"
:preview-src-list="[viewForm.Banner]"
/>
</el-form-item>
<el-form-item label="商品展示图片">
<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()"
/>
</el-form-item>
</el-tab-pane>
上图中,如果是单个图片,那么预览我们设置一个集合为一个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 第三方组件来实现编辑处理,展示效果如下所示。
代码如下所示
<el-tab-pane label="详细说明" name="third">
<el-form-item label="详细说明">
<tinymce v-model="editForm.Note" :height="300" />
</el-form-item>
</el-tab-pane>
3、自定义组件的创建使用
使用Vue的比以往BS开发的好处,就是可以很容易实现组件化,这点很好,一旦我们定义好一个控件,就可以在多个界面里面进行使用,非常方便,而且封装性可以根据自己的需要进行处理。
查询区域一般的界面效果如下所示,除了包含一些常用的查询条件,一般会有一些下拉列表,这些可能是后台字典里面绑定的内容,可以考虑作为一个通用的字典下拉列表组件来做。
其实界面录入的时候,也往往需要这些条件下拉列表的。
那么我们来定义一个自定义组件,并在界面上使用看看。
在Components目录创建一个目录,并创建一个组件的vue文件,命名为my-dictdata.vue,如下所示。
界面模板代码我们就一个select组件为主即可。
<template>
<el-select v-model="svalue" filterable clearable placeholder="请选择">
<el-option
v-for="(item, index) in dictItems"
:key="index"
:label="item.Text"
:value="item.Value"
/>
</el-select>
</template>
script脚本逻辑代码如下所示。
<script>
// 引入API模块类方法
import { GetDictData } from '@/api/dictdata'
export default {
name: 'MyDictdata', // 组件的名称
props: {
typeName: { // 字典类型方式,从后端字典接口获取数据
type: String,
default: ''
},
options: {// 固定列表方式,直接绑定
type: Array,
default: () => { return [] }
}
},
data() {
return {
dictItems: [], // 设置的字典列表
svalue: '' // 选中的值
}
},
watch: {
// 判断下拉框的值是否有改变
svalue(val, oldVal) {
if (val !== oldVal) {
this.$emit('input', this.svalue);
}
}
},
mounted() {
var that = this;
if (this.typeName && this.typeName !== '') {
// 使用字典类型,从服务器请求数据
GetDictData(this.typeName).then(data => {
if (data) {
data.forEach(item => {
if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
that.dictItems.push(item)
}
});
}
})
} else if (this.options && this.options.length > 0) {
// 使用固定字典列表
this.options.forEach(item => {
if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
that.dictItems.push(item)
}
});
}
// 设置默认值
this.svalue = this.value;
},
methods: {
}
}
</script>
主要就是处理字典数据的获取,并绑定到模型对象上即可。
在页面上使用前,需要引入我们定义的组件
import myDictdata from '@/components/Common/my-dictdata'
然后包含进去components里面即可
export default {
components: { myDictdata },
那么原来需要直接使用select组件的代码
<el-select v-model="searchForm.ProductType" filterable clearable placeholder="请选择">
<el-option
v-for="(item, key) in typeList"
:key="key"
:label="item.value"
:value="item.key"
/>
</el-select>
则可以精简为一行代码
<my-dictdata v-model="searchForm.ProductType" type-name="商品类型" />
而对于固定列表的,我们也可以通用的处理代码
<my-dictdata v-model="searchForm.Status" :options="Status" />
其中Status是定义的一个对象集合
Status: [
{ Text: '正常', Value: 0 },
{ Text: '推荐', Value: 1 },
{ Text: '停用', Value: 2 }
]
是不是非常方便,而得到的效果则不变。
来源:https://www.cnblogs.com/wuhuacong/p/13031717.html
猜你喜欢
- 前段时间在网上找了一个“完美的”JavaScript对象克隆的函数,感觉还不错,但随后便出现了一些问题,发现这个克隆并不好用,在使用发现了如
- flask多进程会引起重复加载,解决方法:把耗资源的加载挪到函数里面或者类里面,就不会重复加载资源了。测试发现,不是flask引起的,是多进
- 本文实例讲述了python开发之文件操作用法。分享给大家供大家参考,具体如下:先来看看官方API:os-Miscellaneous oper
- 本文实例讲述了Python数学形态学。分享给大家供大家参考,具体如下:一 原始随机图像1、代码import numpy as npimpor
- 如何提取JSON数据指定内容假设我们要获取'pic_str'里的数据JSON数据{'err_no': 0,
- 暴力的重启服务方案一般服务器重启可以直接通过 kill 命令杀死进程,然后重新启动一个新的进程即可。但这种方法比较粗暴,有可能导致某些正在处
- 写在前面我的 CUDA 版本是什么? 这个问题本身就是有问题的,因为没有搞清楚cuda的分类这里的 CUDA 说的是 Driver CUDA
- #!/usr/bin/env python class Foo(object): x=1 if __name__=='__main_
- zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的
- 这篇文章主要介绍了Python @property装饰器原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 问题你正在试着使用正则表达式去匹配一大块的文本,而你需要跨越多行去匹配。解决方案这个问题很典型的出现在当你用点(.)去匹配任意字符的时候,忘
- python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理。有一点需要清楚
- 基本命令显示版本信息pip -V安装指定包pip install <packages>pip install -i 'h
- 1、DataFrame返回的不是对象。2、DataFrame查出来的数据返回的是一个dataframe数据集。3、DataFrame只有遇见
- 如下所示:jsonObject 是个jsonif (key in jsonObject) : print '有'else:
- 前言JavaScript 中的 Infinity 是一个可以应用于任何变量的数值,表示无穷大。下面就来看看 Infinity 是如何工作的,
- 以下代码在MYSQL中测试通过,MSSQL应该能跑通,未测试。#创建表如下 create temporary table tmp (a in
- 5月3日晚,央视在《新闻联播》前播放了B站青年宣言片《后浪》,这是B站首次登陆央视黄金时段,今天在朋友圈陆续看到相关的视频。最早用B站的同学
- 我们看一个现象:import pandas as pdtitanic = pd.read_csv('titanic_data.csv
- 运行vue项目报错 Module build failedModule build failed (from ./node_modules/