主要用于渲染模型下列表设计在 pc 与 mobile 供用户查询的列表
mobile
列表页面主要包含两个部分组成,一个是查询条件的渲染,另外一个是数据列表项的渲染
使用方法
import * as applicationList from '@cloudpivot/list'; @Component({ name: 'FormList', components: { AppsList: applicationList.components.mobile.ApplicationList } })
也可以只渲染查询条件的渲染:
// 引入 import * as applicationList from '@cloudpivot/list'; @Component({ name: 'FormList', components: { AppsList: applicationList.components.mobile.QueryForm } }) // 使用 <query-form ref="list" :fields="queryConditions"></query-form> // 参数 // 列表设计请求的到是数据中 queryConditions 直接扔进去就可以渲染 // 查询确认 // 数据传递 mounted() { Bus.$on('queryList', () => { this.query(); }); } destroyed() { Bus.$off('queryList'); } // 获取参数 query() { const list = this.$refs.list as any; const data = list.query(); }
pc
pc 主要导出了两个模块,ApplicationList,ApplicationCustomIframe,ListSelector:
ApplicationList 主要用于渲染查询列表 与列表数据
ApplicationCustomIframe 主要用于渲染后台添加的自定义页面 的打开入口
ListSelector 主要用于关联表单选择时,对列表的选择
使用方式
// 引入 import * as applicationList from '@cloudpivot/list'; // 路由使用 applicationList: { path: 'application-list/:schemaCode', name: 'applicationList', component: applicationList.components.pc.ApplicationList } // 自定义页面 iframe 打开 // 引入 import * as applicationList from '@cloudpivot/list'; @Component({ name: 'application-define', components: { applicationCustom: applicationList.components.pc.ApplicationCustomIframe } }) // 使用 <application-custom :url="url" /> // 参数 作为 iframe 打开的 url
-
有用(6)
-
没有用(0)