YonBuilder 移动开发平台 AVM 框架封装数据表格组件

2022-12-21
北京
本文字数：2621 字
阅读完需：约 9 分钟

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 进入，然后选择

找到对应模块点击进入。

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

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

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

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

具体在项目中的使用步骤是，第一步将压缩文件中的 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 组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

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

发布于: 刚刚阅读数: 3

APICloud

关注

一次编码多端运行，移动应用低代码开发平台 2020-12-22 加入

用友YonBuilder移动端低代码开发平台，快速构建高性能多端应用

发布

暂无评论

创作场景

YonBuilder 移动开发平台 AVM 框架封装数据表格组件

APICloud

评论