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

举报
三分恶 发表于 2021/04/23 23:10:04 2021/04/23
【摘要】 转载   原文作者:伍华聪 原文地址:https://www.cnblogs.com/wuhuacong/p/13024097.html 文章目录 1、列表查询界面效果2、查询区域的处理 在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询、列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔...

转载   原文作者:伍华聪 原文地址:https://www.cnblogs.com/wuhuacong/p/13024097.html



在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询、列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于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 },

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

视图模板代码如下所示:

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

其中产品类型的是下拉列表,我们通过在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 }) },

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

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

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

在这里插入图片描述

先定义一个表格头部,类似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" >

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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

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

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

  
 
  • 1

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

我们如果需要在显示里面增加处理效果,一般在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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

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

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

  
 
  • 1

在这里插入图片描述

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

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

  
 
  • 1
  • 2
  • 3

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

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

  
 
  • 1

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

在这里插入图片描述

效果可以使用Formatter来转义:

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

  
 
  • 1
  • 2
  • 3
  • 4

也可以使用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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

值得注意的是,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>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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

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

  
 
  • 1
  • 2
  • 3
  • 4

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

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

对于查看处理,我们除了在每行按钮上可以单击进行查看指定行记录外,我们双击指定的行,也应该弹出对应的查看记录界面:

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

  
 
  • 1
  • 2
  • 3
  • 4

这个就是表格定义里面的一些处理事件

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

每个对话框的: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: '已取消删除' }); }); },

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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

文章来源: blog.csdn.net,作者:三分恶,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/sinat_40770656/article/details/109478800

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200