List 列表

基础列表，用于展示多条结构类似的数据。

基础用法

最基础的列表展示。

列表内容 1

额外信息

列表内容 2

额外信息

列表内容 3

额外信息

<template>
  <ZcList bordered>
    <ZcListItem>
      <div style="flex: 1;">列表内容 1</div>
      <div style="color: #909399;">额外信息</div>
    </ZcListItem>
    <ZcListItem>
      <div style="flex: 1;">列表内容 2</div>
      <div style="color: #909399;">额外信息</div>
    </ZcListItem>
    <ZcListItem>
      <div style="flex: 1;">列表内容 3</div>
      <div style="color: #909399;">额外信息</div>
    </ZcListItem>
  </ZcList>
</template>

带标题与加载

使用 header、footer 插槽添加头部和底部，loading 属性显示加载状态。

列表标题

列表内容 1

列表内容 2

列表内容 3

共 3 条数据

<template>
  <ZcList header="列表标题" bordered :loading="loading" footer="共 3 条数据">
    <ZcListItem>列表内容 1</ZcListItem>
    <ZcListItem>列表内容 2</ZcListItem>
    <ZcListItem>列表内容 3</ZcListItem>
  </ZcList>
</template>
<script setup>
import { ref } from 'vue'
const loading = ref(false)
</script>

List API

ZcList Props

参数	说明	类型	默认值
bordered	是否显示边框	boolean	false
split	是否显示分割线	boolean	true
splitPosition	分割线位置	'inside' | 'outside'	'outside'
size	列表尺寸	'large' | 'default' | 'small'	'default'
layout	布局	'vertical' | 'horizontal'	'vertical'
loading	是否加载中	boolean	false
header	头部文本	string	''
footer	底部文本	string	''
emptyText	空数据文本	string	'No data'

ZcList Slots

插槽名	说明
default	列表内容
header	自定义头部
footer	自定义底部
loading	自定义加载内容
empty	自定义空状态内容