登录
文档目录
图片名称

4.cloudpivot-list/list列表

2025-04-14 23:17:51(最后一次修改:2025-04-14 23:20:44)

主要用于渲染模型下列表设计在 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



  • 没有用(0

本文链接:https://open.hetusaas.com/?id=22

图片名称

网友评论

图片名称