Vuejs & Element-UI后台开发列表页组件及处理逻辑

注：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
}

最后

开发项目除了规范命名外，能统一处理逻辑，对后期代码维护至关重要。如果团队同事都“自由发挥”，后期同事离职或被辞退，接手的人很可能会重构之前同学的代码…