APICloud AVM框架 封装数据表格组件

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。

组件功能介绍

用以展示基础表格数据的组件。 

组件的核心功能点是在数据展示的时候，用到了2个v-for循环，第一层循环是数据对象的循环，然后嵌套列名的对象，通过列名中的key值在数据对象中查询对应的数据，这样就保证了在数据对象与列名对象顺序打乱的情况下也可以把数据对应起来，并能够在列名没有对应的数据的时候进行特殊处理。

示例展示

组件开发

组件文件

easy-data-grid.stml

<template>
	<view class="easy-data-grid_contanier">
		<view class="easy-data-grid_header">
			<view class="easy-data-grid_header-item" v-for="(item, index) in columns">
				<text class="easy-data-grid_header-item-content">{item.lable}</text>
			</view>
		</view>
		<scroll-view class="easy-data-grid_tbody" scroll-y>
			<view class="easy-data-grid_tbody-item" v-for="(item, index) in dataList">
				<view class="easy-data-grid_tbody-item-columns" v-for="(itemcol,indexcol) in columns">
					<text class="easy-data-grid_tbody-item-content" v-if="item[itemcol.key]">{item[itemcol.key]}</text>
					<text class="easy-data-grid_tbody-item-content" v-else>/</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
	name: 'easy-data-grid',
	props:{
		columns:Object,
		dataList:Object
	},
	data() {
		return{
		}
	},
	methods: {

	}
}
</script>
<style>
	.easy-data-grid_header{
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	.easy-data-grid_header-item{
		background-color: #cccccc;
		text-align: center;
		justify-content: center;
		flex-flow: row nowrap;
		padding: 5px;
		width: 20%;
	}
	.easy-data-grid_header-item-content{
		font-size: 15px;
		font-weight: bolder;
	}
	.easy-data-grid_tbody{
		height: 200px;
	}
	.easy-data-grid_tbody-item{
		flex-flow:  row nowrap;
		justify-content: center;
		align-items: center;
		border-bottom: 0.5px solid #cccccc;	
		padding: 5px 0;
		width: 100%;
	}
	.easy-data-grid_tbody-item-columns{
		flex-flow:  row nowrap;
		text-align: center;
		width: 20%;
		justify-content: center;
	}
	.easy-data-grid_tbody-item-content{
		font-size: 14px;
	}
</style>

组件使用说明

本组件是基于AVM.js开发的多端组件，通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。

首先需要登录开发平台，http://www.apicloud.com。 通过控制平台右上方的模块Store进入，然后选择AVM组件。

 

找到对应模块点击进入。 

 

也可通过搜索栏，通过组件名称关键字进行检索。

 

进入模块详情，点击立即下载下载完整的组件安装包。  

 

组件压缩包的文件目录如下

 

 也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。 

 具体在项目中的使用步骤是，第一步将压缩文件中的easy-data-grid.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-easy-data-grid.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。

demo-easy-data-grid.stml

<template>
	<view class="page">
		<safe-area></safe-area>
		<easy-data-grid 
			:columns={columns} 
			:dataList={dataList}
		></easy-data-grid>	
	</view>
</template>
<script>
import '../../components/easy-data-grid.stml'
export default {
	name: 'demo-easy-data-grid',
	apiready(){//like created

	},
	data() {
		return{
			columns:[
					{
						lable: '姓名',
						key: 'name',
					},{
						lable: '年龄',
						key: 'age',
					},{
						lable: '性别',
						key: 'sex',
					},{
						lable: '职业',
						key: 'office',
					},{
						lable: '学历',
						key: 'edu',
					}
				],
				dataList:[
					{name:'张一',age:'12',sex:'男',office:'技术工程师',edu:'大学本科'},
					{name:'王三',age:'20',sex:'男',office:'车间工人',edu:'博士'},
					{name:'张二',age:'30',sex:'男',office:'销售人员',edu:'本科'},
					{office:'技术专家',name:'李一',age:'18',sex:'女',edu:'专科'},
					{age:'12',sex:'男',name:'张三',office:'集团老板',edu:'小学'},
					{name:'张四',sex:'男',age:'20'},
					{sex:'男',name:'张五',age:'30'},
					{name:'张刘一',age:'18',sex:'女'}
				]
		}
	},
	methods: {

	}
}
</script>
<style>
	.page {
		height: 100%;
		background-color: #f0f0f0;
	}
</style>

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

这是组件化开发的在线文档地址