组件封装-List

Bunury2025-01-24 16:19

对于数组对象渲染列表的组件进行渲染，可支持定制里面的内容与列表外部的内容。

子组件

html 复制代码

<template>
  <view>
    <view v-for="item in data" :key="item.id" class="check-list-item">
      <nut-checkbox v-if="showCheckbox" :label="item.supplierId" class="w-full m_checkbox">
        <slot name="item" :item="item"></slot>
      </nut-checkbox>
      <view v-else>
        <slot name="item" :item="item"></slot>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts" generic="T extends Record<string, any> & { id: any }">
import { PropType, defineSlots } from 'vue';

defineProps({
  data: {
    // eslint-disable-next-line no-undef
    type: Array as PropType<T[]>,
    required: true
  },
 // 根据条件定制列表外内容
  showCheckbox: {
    type: Boolean,
    default: false
  },
  height: {
    type: [String, Number],
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  }
});

defineSlots<{
  // eslint-disable-next-line
  item(_props: { item: T }): any;
}>();
</script>

<style lang="scss">
.check-list-box {
  overflow-y: scroll;

  .check-list-item {
    // box-shadow: 2px 2px 8px 0 #9999991a;
    border-radius: 4px;
  }
}
</style>

父组件

html 复制代码

  <CheckList
        v-model:selected="selected"
        class="mt-[16px]"
        :data="detail?.bargainSupplierVos || []"
        :loading="loading"
        :height="`calc(100vh - 236px - env(safe-area-inset-top))`"
        :show-checkbox="status === 'fixed-point'"
      >
    <!-- 定制列表内部的内容 -->
        <template #item="{ item }">
          <view @click="(e) => goDetail(e, item)">
    <!-- 封装内容的每一项的组件 -->
            <QuoteCard :data="item" :currency="Currency[detail?.briefProcureReq?.currency as any] || 'CNY'" />
          </view>
        </template>
      </CheckList>