宜搭的案例《如何获取数据源在子表展示》(链接:https://docs.aliwork.com/docs/yida_subject/_8/oo5gqzzzulzr4ppc?spm=a311a.7996332.0.0.697f15b5VdwCOI)
指导案例中有小于100条数据和超过100条数据的代码指导,但是没看懂。另外超过100条数据的代码中数据源表查询条件组件是成员组件,不是demo中下拉单选的值。
请大师们帮个忙:在案例demo 里超过100条数据代码怎么写?
1,案例框架的代码和demo小于100条数据的怎么有机融合?
2,超过100条数据的代码是成员组件,换成demo里的下拉单选组件值,这个怎么修改?
技术小白请大师们能在demo的基础上指导一下实操
在宜搭案例《如何获取数据源在子表展示》中,当数据源表中的数据超过100条时,可以使用分页查询的方式来获取数据。以下是具体的操作步骤:
首先,在数据源表的查询条件组件中添加一个分页组件,设置每页显示的数据条数(例如100条)。
然后,在子表展示组件中,使用v-for
指令遍历分页后的数据列表。
对于超过100条数据的代码,可以修改成员组件的条件,使其只选择满足条件的记录。
下面是一个简单的示例代码:
<template>
<div>
<!-- 数据源表查询条件组件 -->
<alibaba-cloud-datasource-query
:config="config"
@success="handleSuccess"
/>
<!-- 子表展示组件 -->
<alibaba-cloud-table
:data="dataList"
:columns="columns"
/>
</div>
</template>
<script>
export default {
data() {
return {
config: {
// ...其他配置项
pageSize: 100, // 每页显示100条数据
},
dataList: [], // 存储分页后的数据列表
columns: [
// ...列定义
],
};
},
methods: {
handleSuccess(response) {
const data = response.data;
this.dataList = data.list; // 将分页后的数据列表赋值给dataList
},
},
};
</script>
在这个示例中,我们使用了分页组件来限制每次查询的数据条数为100条。然后,在子表展示组件中使用v-for
指令遍历分页后的数据列表。这样,即使数据源表中的数据超过100条,也可以在子表展示中正常显示。
export async function solveData(count, newArr) {
let Array = [];
//数据量大于100时的处理
for (let i = 0; i < Math.ceil(count / 100); i++) {
let params = {
formUuid: "数据源表单formUuid",
searchFieldJson: JSON.stringify({
数据源表查询条件组件唯一标识: [window.loginUser.userId]
}),
pageSize: 100,
currentPage: i + 1
};
await this.dataSourceMap.数据源名称.load(params).then(res => {
res.map((item) => {
Array.push({
text: item.formData.唯一标识,
label: item.formData.唯一标识,
value: item.formData.唯一标识
})
})
})
};
this.$('下拉组件的唯一标识').setValue(Array);
}
通过楼上的方法,把获取后的数据,进行清洗整理成[{"text":"","value":""}...]格式赋给下拉组件
1.宜搭读取数据是100一页,所以你当你的数据超过100你需要设置页数,重新读取(即currentPage: i + 1),然后你需要将每次读取到的数据push到你暂存数据的对象中(即
await this.dataSourceMap.数据源名称.load(params).then(res => {
newArr.push(...res.data);
}))
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。