在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如何使用自定义封装的字典显示处理。
1、字典内容管理
我们在系统中,往往维护着一些系统常用到的字典信息,在我各个框架中都有一个通用的字典管理模块,对于Vue&Element前端项目,也是一样,我们也需要对它进行管理,方便前端使用。本篇随笔介绍的内容适用于ABP开发框架的Vue&Element前端,微信框架和Bootstrap框架中的Vue&Element前端内容。
字典项目一般包括项目大类,字典项的管理,字典项包括显示内容和值,两者可以不一样,也可以一样,如下所示
或者如下所示
字典大类和字典项目的表设计图如下所示。
字典大类由PID构建无穷级的树结构,而字典项目则通过Name和Value来记录显示内容和值内容。
2、后端WebAPI的数据提供
在建立相关的数据表存储数据外,我们后端也需要提供相应的Web API来给各前端提供数据处理,对于显示处理,我们定义了一个适合于Select组件和Tree组件的数据结构,主要就是提供id和label的属性,如下代码所示。
/// <summary>
/// 通用树节点的定义
/// </summary>
[Serializable]
public class TreeNodeItem
{
/// <summary>
/// 默认构造函数
/// </summary>
public TreeNodeItem()
{
} /// <summary>
/// 构造函数
/// </summary>
public TreeNodeItem(CListItem item) :this()
{
this.Label = item.Text;
this.Id = item.Value;
} /// <summary>
/// 参数化构造CListItem对象
/// </summary>
/// <param name="label">显示的内容</param>
/// <param name="id">实际的值内容</param>
/// <param name="key">存储额外的键</param>
public TreeNodeItem(string id, string label, string key = null) : this()
{
this.Id = id;
this.Label = label;
this.Key = key;
} /// <summary>
/// 参数化构造CListItem对象
/// </summary>
/// <param name="label">显示的内容</param>
/// <param name="id">实际的值内容</param>
/// <param name="key">存储额外的键</param>
public TreeNodeItem(int id, string label, string key = null) : this()
{
this.Id = id.ToString();
this.Label = label;
this.Key = key;
} /// <summary>
/// 参数化构造CListItem对象
/// </summary>
/// <param name="text">显示的内容</param>
public TreeNodeItem(string text) : this()
{
this.Id = text;
this.Label = text;
} /// <summary>
/// 实际值内容
/// </summary>
public string Id { get; set; } /// <summary>
/// 显示内容
/// </summary>
public string Label { get; set; } /// <summary>
/// 用于存储额外的键
/// </summary>
public string Key { get; set; } /// <summary>
/// 子节点集合
/// </summary>
[JsonProperty(NullValueHandling = NullValueHandling.Ignore, DefaultValueHandling = DefaultValueHandling.Ignore)]
public List<TreeNodeItem> children { get; set; } /// <summary>
/// 返回显示的内容
/// </summary>
/// <returns></returns>
public override string ToString()
{
return Label.ToString();
}
}
有了这些数据结构,我们可以在Web API的控制器中提供相应的数据了。
而对于ABP框架后端,它们的调用方式也是类似的。
后端API执行返回的JSON数据结构如下所示。
有了这些数据,就需要在前端进行显示即可。
3、Element 前端组件显示
Vue&Element的前端,需要调用后端接口的时候,需要对API类进行一个简单的封装,这样可以方便通过类的方式进行访问后端接口。
前端界面组件中需要用到这个API调用的时候,import进来即可。
// 引入API模块类方法
import dictdata from '@/api/system/dictdata'
有了提供的数据结构和API的封装,我们可以在前端进行展示了,我们来看看Element的Select组件例子代码
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template> <script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
如果我们每次都需要用这个原始组件来进行展示,那么就需要编写很多代码,我们希望在编写显示字典列表的代码时候,尽量减少代码,因此我们定义了字典组件,用于接收两个数据参数,一个是字典大类名称,通过字典大类名称获取字典列表,并绑定的select组件中;另一个则是标准的集合列表。
我们来看看使用的界面效果和实际代码。
而使用代码如下所示。
<el-form-item label="付款方式" prop="payType">
<my-dictdata v-model="searchForm.status" type-name="付款方式" />
</el-form-item>
上面通过type-name来声明字典大类,从而由组件逻辑实现数据源的绑定处理。
另一种方式就是绑定数据列表,通过options变量进行绑定,如下所示。
<el-form-item label="表单分类" prop="category">
<my-dictdata v-model="searchForm.category" :options="FormCategorys" />
</el-form-item>
而其中这个数据源则可以在页面或者组件中实现获取即可。
4、自定义组件处理
上面介绍了如何实现自定义字典组件,那么字典组件如何自定义处理呢,我们来看看一般的处理如下。
<template>
<el-select v-model="keyword" filterable :clearable="clearable" :multiple="multiple" :disabled="disabled"
:placeholder="placeholder" @change="change">
<el-option v-for="(item, index) in dictItems" :key="index" :label="item.label" :value="item.id">
<span style="float: left;color:yello;">
<i class="el-icon-tickets" style="color:blue;" />
{{ item.label }}
</span>
</el-option>
</el-select>
</template>
不过上面这种对于字符型的数据显示没问题,如果对于包含数值型的选项赋值,则会出现不匹配的问题,因此我们改进一下上面的选项处理代码,以便适应字符型和数值型的绑定值处理。
<template>
<el-select v-model="keyword" filterable :clearable="clearable" :multiple="multiple" :disabled="disabled"
:placeholder="placeholder" @change="change">
<template v-for="(item, index) in dictItems">
<el-option v-if="typeof(keyword)=='string'" :key="index" :label="item.label" :value="'' + item.id" />
<el-option v-else-if="typeof(keyword)=='number'" :key="index" :label="item.label"
:value="('' + item.id).trim() == '' ? '' : parseInt(item.id)" />
<el-option v-else :key="index" :label="item.label" :value="item.id" />
</template>
</el-select>
</template>
以上代码通过判断选项绑定的值类型,从而进行相应的处理,避免数据格式不一致的问题。
而其中的字典列表,这是通过判断prop参数进行获取处理的。
加载的时候,获取数据进行显示绑定即可。
以上就是我们进行用到的字典处理过程,包括后端提供数据API、前端对API的封装,以及组件封装,然后就是界面组件的调用,这种方式极大的提高了自定义组件的使用效率,简化代码,一旦我们封装好自定义组件,使用起来非常方便。
在Vue&Element前端项目中,对于字典列表的显示处理的更多相关文章
- 在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用, ...
- 在Vue前端项目中,附件展示的自定义组件开发
在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&a ...
- 循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:A ...
- 循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对 ...
- VUE+Element 前端应用开发框架功能介绍
前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机 ...
- 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
在我们使用VUE+Element 处理界面的时候,往往碰到需要利用JS集合处理的各种方法,如Filter.Map.reduce等方法,也可以设计到一些对象属性赋值等常规的处理或者递归的处理方法,以前对 ...
- 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
- 循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用
在VUE+Element 前端应用中,图标是必不可少点缀界面的元素,因此整合一些常用的图标是非常必要的,还好Element界面组件里面提供了很多常见的图标,不过数量不是很多,应该是300个左右吧,因此 ...
- 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...
随机推荐
- golang channel原理
channel介绍 channel一个类型管道,通过它可以在goroutine之间发送和接收消息.它是Golang在语言层面提供的goroutine间的通信方式. 众所周知,Go依赖于称为CSP(Co ...
- Linux常用命令 - tail命令详解
21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 实时刷 ...
- Vue element keyup.enter失效不起作用
解决方式一 添加按键修饰符@keyup.enter.native 解决方式二 把事件绑定到父元素(外框),需注意多个input问题 <div @keyup.enter="login&q ...
- Vue设置全局js/css样式
''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...
- 硕盟SM-T54|type-c转接头HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞接口功能说明
硕盟SM-T54是一款 TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞,支持四口同时使用,您可以将含有USB 3.1协议的电脑主机,通过此产品连接到具有HDMI或VGA的显 ...
- request内部转发Demo
// 转发的Demo1 import javax.servlet.RequestDispatcher; import javax.servlet.ServletException; import ja ...
- Stage 1 项目需求分析报告
迷你商城后台管理系统-- 需求分析 1. 引言 作为互联网热潮的崛起,消费者们的普遍差异化,实体商城要想在互联网的浪潮中继续发展,就需要制定出针对用户以及消费者的消费习惯以及喜爱品种的消费方案.从而企 ...
- 基于swoole框架hyperf开发的纯API接口化的后台RBAC管理工具hyperfly@v1.0.0发布
hyperfly@v1.0.0发布 本文地址http://yangjianyong.cn/?p=323转载无需经过作者本人授权 github地址:https://github.com/vankour/ ...
- 数组转为unicode字符编码字符串
json_encode($data, JSON_UNESCAPED_UNICODE)在创建微信卡券,发送数据时需要这个
- P1909 [NOIP2016 普及组] 买铅笔
如果她选择购买第一种包装,那么她需要购买29份,共计2×29=58支,需要花费的钱为2×29=58. 实际上,P老师会选择购买第三种包装,这样需要买22份.虽然最后买到的铅笔数 量更多了,为30×2= ...