注:xm-
前缀组件为自定的全局组件。
例子
<template>
<div>
<!-- header或面包屑部分 -->
<xm-header> ... </xm-header>
<!-- 列表条件组件,条件太多可以二次封装该组件 -->
<xm-table-condition deployable resetable @reset="resetConditions">
<el-form-item>条件1</el-form-item>
<el-form-item>条件2</el-form-item>
<el-form-item>...</el-form-item>
<el-form-item>条件n</el-form-item>
<!-- 初始化时折叠部分条件,条件少或无时,就不需要以下内容 -->
<template slot="folded">
<el-form-item>条件1</el-form-item>
<el-form-item>条件2</el-form-item>
<el-form-item>...</el-form-item>
<el-form-item>条件n</el-form-item>
</template>
</xm-table-condition>
<!-- 数据列表及分页 -->
<ListTable ref="table" :query="query" :data="data" @change="getList"/>
</div>
</template>
// https://site-name.com/?page=1&uid=2334&user_name=&other=0
// 请求服务器数据参数,根据api文档定
const DEF_QUERY = {
page: 1,
uid: 0,
nick_name: '',
start_time: 0,
end_time: 0,
order_by: '',
order_asc: 0,
other: 0
}
export default {
data () {
return {
// 根据DEF_QUERY配置,去过滤location.search参数
query: fliterQuery(this.$route.query, DEF_QUERY),
data: {
list: [],
pageSize: 10,
total: 0
}
}
},
methods: {
async getList () {
// 去除空值属性
let params = fliterQuery(this.qurey)
// 特殊字段处理,因为某些接口比较特殊,可能需要字段值为0
if (params.order_asc && !params.order_asc) params.order_asc = this.query.order_asc
try {
// 请求数据,request为自定义http请求方法
this.data = await request('api-path', params)
} catch (e) {
this.$message.error(e.message)
}
},
// 用户点击“重置”条件按钮时
resetConditions () {
// 调用组件ListTable提供的clearSortAndFilter方法
this.$refs.table.clearSortAndFilter()
this.qurey = { ...DEF_QUERY }
}
},
watch: {
query: {
handler () {
this.getList()
},
deep: true
}
}
}
未定义的方法简单实现:
/**
* 过滤对象空值,空数组
* @param query 需要被过滤的参数对象
* @param DEF_QUERY 默认参数配置对象
*/
function fliterQuery (query, DEF_QUERY) {
let data = {}
let key, val
for (key in query) {
val = query[key]
// 去除null undefined 0 'null' 'undefined' ''
if (!val || val === 'null' || val === 'undefined') continue
// 处理“特殊”字符串
if (/^\[.*\]$/.test(val)) {
// 这里最好放在try里面
val = JSON.parse(val)
}
// 去除空数组
if (Array.isArray(val) && val.length === 0) continue
data[key] = val
}
return DEF_QUERY ? filterFrom(data, DEF_QUERY) : data
}
/**
* 过滤表单类多余字段
* @param form 需要被过滤的参数对象
* @param DEF_FROM 默认表单参数配置对象
*/
function filterFrom (form, DEF_FORM) {
let data = {}
let key, val
for (key in DEF_FORM) {
val = form[key]
data[key] = typeof val === 'undefined' ? DEF_FORM[key] : val
}
return data
}
最后
开发项目除了规范命名外,能统一处理逻辑,对后期代码维护至关重要。如果团队同事都“自由发挥”,后期同事离职或被辞退,接手的人很可能会重构之前同学的代码…