循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处...
source link: http://www.cnblogs.com/wuhuacong/p/13024097.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在我们一般开发的系统界面里面，列表页面是一个非常重要的综合展示界面，包括有条件查询、列表展示和分页处理，以及对每项列表内容可能进行的转义处理，本篇随笔介绍基于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 前端应用开发(1）--- 开发环境的准备工作
循序渐进VUE+Element 前端应用开发(2）--- Vuex中的API、Store和View的使用
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK