在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询、列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表页面的查询,列表展示和字段转义处理。

在前面随笔《循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理》介绍了一个对产品列表的卡片式图片分页展示处理,其中涉及到了对于Element 组件分页控件的操作,本篇随笔继续深化这一组件的使用,结合表格展示来处理效果展示。

1、列表查询界面效果

在介绍任何代码处理逻辑之前,我们先来做一个感官的认识,贴上一个效果图,在逐一介绍其中处理的步骤和注意事项。

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

2、查询区域的处理

查询区域一般的界面效果如下所示,除了包含一些常用的查询条件,并增加一些常规的处理按钮,如查询、重置、新增、批量删除、导入、导出等按钮。

对于查询区域来说,它也是一个表单的处理,因此也需要添加一一个对应的对象来承载表单的数据,在data里面增加一个searchForm的模型对象,以及一个用于分页查询的pageinfo对象,如下代码所示。

export default {
data() {
return {
listLoading: true,
pageinfo: {
pageindex: 1,
pagesize: 10,
total: 0
},
searchForm: {
ProductNo: '',
BarCode: '',
ProductType: '',
ProductName: '',
Status: 0
},

视图模板代码如下所示

    <el-form ref="searchForm" :model="searchForm" label-width="80px">
<el-row>
<el-col :span="6">
<el-form-item label="产品编号" prop="ProductNo">
<el-input v-model="searchForm.ProductNo" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="产品名称" prop="ProductName">
<el-input v-model="searchForm.ProductName" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="商品类型" prop="ProductType">
<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>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="状态" prop="Status">
<el-select v-model="searchForm.Status" filterable clearable placeholder="请选择">
<el-option
v-for="item in Status"
:key="item.Value"
:label="item.Text"
:value="item.Value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row style="float:right;padding-bottom:10px">
<el-button icon="el-icon-search" type="primary" round @click="search()">查询</el-button>
<el-button icon="el-icon-refresh-left" type="warning" round plain @click="resetForm('searchForm')">重置</el-button>
<el-button icon="el-icon-document-add" type="success" round @click="showAdd()">新增</el-button>
<el-button icon="el-icon-document-remove" type="danger" round @click="BatchDelete()">批量删除</el-button>
<el-button icon="el-icon-upload2" type="danger" plain="" round @click="showImport()">导入</el-button>
</el-row>

其中产品类型的是下拉列表,我们通过在data区域获取一个对象,并在此遍历可以展示字典内容,如果我们花点时间,可以把这些下拉列表统一按照一个常规的处理模式,定义一个字典组件的方式实现,简单赋予一个字典类型的Prop值,就可以绑定下拉列表了,这个稍后在细讲。

在Vue的脚本处理逻辑里面,我们可以在Created声明周期里面,通过API获取数据,绑定在模型上,界面就会自动进行更新了,处理过程代码如下所示。

  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()
},
methods: {
getlist() {
// 构造常规的分页查询条件
var param = {
type: this.producttype === 'all' ? '' : this.producttype,
pageindex: this.pageinfo.pageindex,
pagesize: this.pageinfo.pagesize
}; // 把SearchForm的条件加入到param里面,进行提交查询
param.type = this.searchForm.ProductType // 转换为对应属性
Object.assign(param, this.searchForm); // 获取产品列表,绑定到模型上,并修改分页数量
this.listLoading = true
GetProductList(param).then(data => {
this.productlist = data.list
this.pageinfo.total = data.total_count
this.listLoading = false
})
},

其中 Object.assign(param, this.searchForm); 语句处理,是把获得的查询条件,覆盖原来对象里面的属性,从而实现查询条件的变量赋值。

获得列表数据,就是介绍如何展示表格列表数据的过程了,表格界面效果如下所示。

先定义一个表格头部,类似HTML里面的<table>的标签,指定样式和一些常规的操作函数,如下代码所示。

    <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"
>

具体的属性可以参考下Element组件关于表格控件的属性了,在表格列里面,我们主要关注它的data绑定即可。

接着定义一列复选框选择的列,用于批量处理的勾选,如批量删除操作。

  <el-table-column type="selection" width="55"/>

接着就是根据返回JSON属性,逐一进行内容转换为表格列的展示过程了,如下所示。

  <el-table-column label="商品编号" width="80">
<template slot-scope="scope">
{{ scope.row.ProductNo }}
</template>
</el-table-column>

我们如果需要在显示里面增加处理效果,一般在template里面修改展示效果即可,如下是单位的处理,增加一个tag标志强调下。

  <el-table-column align="center" label="单位" width="80">
<template slot-scope="scope">
<el-tag type="" effect="plain"> {{ scope.row.Unit }}</el-tag>
</template>
</el-table-column>

而对于一些需要判断处理的效果,我们可以对内容进行判断输出,如下状态所示。

  <el-table-column label="状态" width="80">
<template slot-scope="scope">
<el-tag v-if="scope.row.Status==0" type="" effect="dark">正常</el-tag>
<el-tag v-else-if="scope.row.Status==1" type="success" effect="dark">推荐</el-tag>
<el-tag v-else-if="scope.row.Status==2" type="danger" effect="dark">停用</el-tag>
</template>
</el-table-column>

另外,对于一些常见的日期处理,我们可以使用Formatter,Filter等手段进行内容的转义处理,可以去掉后面的时间部分。

<el-table-column align="center" label="创建日期" width="120" prop="CreateTime" :formatter="dateFormat" />

dataFormat就是一个转义函数,函数代码如下所示。

    dateFormat(row, column, cellValue) {
return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd') : ''
},

使用的时候,需要在顶部引入一个类库即可

import * as fecha from 'element-ui/lib/utils/date'

对于类似需要进行字典转义的操作,我们可以使用Formatter的方式转义,如增加一个函数来解析对应的值为中文信息

效果可以使用Formatter来转义

    productTypeFormat(row, column, cellValue) {
var display = this.productTypes.get(cellValue)
return display || ''
},

也可以使用Filter模式来进行处理。

这里介绍使用Filter的操作处理,首先在界面HTML代码里面增加对应的操作,如下代码所示。

  <el-table-column align="center" label="商品类型" width="120" prop="ProductType">
<template slot-scope="scope">
<el-tag type="danger"> {{ scope.row.ProductType | productTypeFilter }}</el-tag>
</template>
</el-table-column>

Filter其实就是一个 | 过滤符号,以及接着一个过滤函数处理即可。

export default {
filters: {
productTypeFilter: function(value) {
if (!value) return '' var display = that.productTypes.get(value)
return display || ''
}
},

值得注意的是,Filter本身不能引用data里面的属性列表进行转义的需要,如果需要,那么需要在beforeCreate的钩子函数里面记录this的引用,如下代码所示。

对于操作按钮,我们需要增加一行来显示几个按钮即可,如果需要权限控制,可以再根据权限集合判断一下可操作权限即可。

      <el-table-column label="操作" width="140">
<template scope="scope">
<el-row>
<el-tooltip effect="light" content="查看" placement="top-start">
<el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.ID)" />
</el-tooltip>
<el-tooltip effect="light" content="编辑" placement="top-start">
<el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.ID)" />
</el-tooltip>
<el-tooltip effect="light" content="删除" placement="top-start">
<el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.ID)" />
</el-tooltip>
</el-row>
</template>
</el-table-column>

这里showView/showEdit/ShowDelete主要就是做一些弹出层前的处理操作,我们在data项里面定义了几个变量,用来确定是那个操作显示的需要。

      isAdd: false,
isEdit: false,
isView: false,
isImport: false,

例如对应编辑操作,我们是需要通过API处理类,获取后端数据,并赋值给编辑框的表单对象上,进行展示即可。

    showEdit(id) {
// 通过ID参数,使用API类获取数据后,赋值给对象展示
var param = { id: id }
GetProductDetail(param).then(data => {
Object.assign(this.editForm, data);
})
this.isEdit = true
},

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

而对于删除操作,我们只需要确认一下,然后提交远端处理,返回正常结果,就提示用户删除成功即可。如下逻辑代码所示。

    showDelete(id) {
this.$confirm('您确认删除选定的记录吗?', '操作提示',
{
type: 'warning' // success,error,info,warning
// confirmButtonText: '确定',
// cancelButtonText: '取消'
}
).then(() => {
// 删除操作处理代码 this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},

以上就是常规表格列表页面查询、列表展示、字段转义的一些常规操作,以及对新增、编辑、查看、删除操作的一些常规处理,通过对这些模型的操作,减少了我们以往重新获取对应DOM的繁琐操作,是的数据的操作处理,变得方便了很多。

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

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

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

  2. 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合

    循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...

  3. 循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码

    VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...

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

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

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

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

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

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

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

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

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

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

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

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

随机推荐

  1. Eugene and an array(边界麻烦的模拟)

    一道看似小学生的题,搞了我几个小时...... 首先思路就有两种: \(Ⅰ.找和为0的bad子串,再用n*(n+1)/2-bad子串得到答案\) \(Ⅱ.找和不为0的good子串\) 如果你选择找ba ...

  2. M - Little Pony and Harmony Chest 状压dp

    M - Little Pony and Harmony Chest 怎么感觉自己越来越傻了,都知道状态的定义了还没有推出转移方程. 首先这个a的范围是0~30   这里可以推出 b数组的范围 0~60 ...

  3. Java流式思想和方法引用

    目录 Java流式思想和方法引用 1. Stream流 1.1 概述 传统集合的多步遍历代码 Stream的更优写法 1.2 流式思想的概述 1.3 获取流 1.4 常用方法 ①逐一处理:forEac ...

  4. Spring官网阅读(十八)Spring中的AOP

    文章目录 什么是AOP AOP中的核心概念 切面 连接点 通知 切点 引入 目标对象 代理对象 织入 Spring中如何使用AOP 1.开启AOP 2.申明切面 3.申明切点 切点表达式 excecu ...

  5. python学习之组成字符串的两种方式

    第一种就是加法,比如 a ='张三' b = '李四' 那么print c =a+b 例如之前提到的 或者数值转换成字符串的 num  = 100 str(num) 其他参照表格中的转换即可 2.组成 ...

  6. 一篇文章彻底理解Redis持久化:RDB和AOF

    为什么需要持久化? Redis对数据的操作都是基于内存的,当遇到了进程退出.服务器宕机等意外情况,如果没有持久化机制,那么Redis中的数据将会丢失无法恢复.有了持久化机制,Redis在下次重启时可以 ...

  7. 移动端网站开发要点-meta设置

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

  8. java ->会话技术Cookie&Session

    会话技术Cookie&Session 会话技术简介 存储客户端的状态 由一个问题引出今天的内容,例如网站的购物系统,用户将购买的商品信息存储到哪里?因为Http协议是无状态的,也就是说每个客户 ...

  9. bcdedit 替代easybcd 编辑grub

    bcdedit这个命令是win7下,继续安装xubuntu时遇到的.当时xubuntu的语言设置为en-us,时区改为HK,可是仍有很多不太适应的地方.于是,删了xubuntu,重装它.同时,grub ...

  10. mybatis多对一与一对多

    步骤: 1.创建maven项目 2.编写工具类 3.编写实体类 4.编写mapper接口 5.配置xml 6.测试 多对一:多个学生关联一个老师 工具类: //sqlSessionFactory -- ...