请求接口计算数量

热忱学习

已于 2022-03-21 20:24:50 修改

阅读量486

点赞数

分类专栏： vue 前端保存代码文章标签：前端 vue

于 2021-11-10 17:33:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42180156/article/details/121252363

版权

博客内容讲述了如何在前端使用Vue处理大列表，根据筛选条件拆分为逆变器、并网箱和组件等部分，并进行数量计算，避免了额外的接口请求，直接在获取数据后进行数据处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求就是一个大list 拆分成逆变器，并网箱，组件红框那里都需要计算

	<view class="cell_list">
					<!-- 逆变器 -->
					<view class="cell" v-for="(item,index) in distributionListVOS" :key="index">
						<view class="cell_title" @click="item.show=!item.show">
							<view>{
  {item.deviceName}}</view>
							<u-icon :name="item.show?'arrow-down':'arrow-right'" label-pos="right"></u-icon>
						</view>
						<view class="cell_detail" v-show='item.show'>
							<u-table border-color='#E8E8E8' align="left">
								<u-tr>
									<!-- allCount，toBeSendCount，signInCount -->
									<u-th>型号</u-th>
									<u-th>总数量({
  {getCount('allCount',item.list)}})</u-th>
									<u-th v-show="type!='TO_BE_REVIEWED'">运输中({
  {getCount('toBeSendCount',item.list)}})</u-th>
									<u-th v-show="type!='TO_BE_REVIEWED'">已签收({
  {getCount('signInCount',item.list)}})</u-th>
									
									<u-th>品牌</u-th>
								</u-tr>
								<u-tr v-for="(_item,_idx) in item.list" :key="_idx">
									<u-td>{
  {_item.equipmentModel}}{
  {_item.equipmentType == 'COMPONENT'?'':'kW'}}</u-td>

最低0.47元/天解锁文章