List 列表

通用列表。

何时使用

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

示例

基础文字列表：

Small Size

Default Size

Large Size

<template>
  <h3 :style="{ margin: '16px 0' }">Small Size</h3>
  <f-list size="small" bordered :data-source="data">
    <template #renderItem="{ item }">
      <f-list-item>{{ item }}</f-list-item>
    </template>
    <template #header>
      <div>Header</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </f-list>
  <h3 :style="{ marginBottom: '16px' }">Default Size</h3>
  <f-list bordered :data-source="data">
    <template #renderItem="{ item }">
      <f-list-item>{{ item }}</f-list-item>
    </template>
    <template #header>
      <div>Header</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </f-list>
  <h3 :style="{ margin: '16px 0' }">Large Size</h3>
  <f-list size="large" bordered :data-source="data">
    <template #renderItem="{ item }">
      <f-list-item>{{ item }}</f-list-item>
    </template>
    <template #header>
      <div>Header</div>
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </f-list>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const data: string[] = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
]

export default defineComponent({
  setup() {
    return {
      data,
    }
  },
})
</script>

无边框列表：

<template>
  <f-list :data-source="data">
    <template #renderItem="{ item }">
      <f-list-item>{{ item }}</f-list-item>
    </template>
  </f-list>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const data: string[] = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
]

export default defineComponent({
  setup() {
    return {
      data,
    }
  },
})
</script>

斑马线列表：

<template>
  <f-list :data-source="data">
    <template #renderItem="{ item }">
      <f-list-item>{{ item }}</f-list-item>
    </template>
  </f-list>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
const data: string[] = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
]

export default defineComponent({
  setup() {
    return {
      data,
    }
  },
})
</script>
<style lang="scss" scoped>
.fs-list-split .fs-list-item:nth-child(2n) {
  background: #fbfdff;
}
.fs-list-split .fs-list-item {
  border-bottom: 1px solid var(--fs-buleGrey-base-2) !important;
}
</style>

多行文本列表：

<template>
  <f-list class="demo-loadmore-list" bordered :loading="initLoading" item-layout="horizontal" :data-source="list">
    <template #loadMore>
      <div v-if="!initLoading && !loading" :style="{ textAlign: 'center', padding: '12px 0', lineHeight: '18px' }">
        <span @click="onLoadMore" :style="{ cursor: 'pointer', color: '#378EEF' }">loading more</span>
      </div>
    </template>
    <template #renderItem="{ item }">
      <f-list-item>
        <template #actions>
          <a key="list-loadmore-edit">edit</a>
          <a key="list-loadmore-more">more</a>
        </template>
        <f-skeleton avatar :title="false" :loading="!!item.loading" active>
          <f-list-item-meta
            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
          >
            <template #title>
              <a href="https://www.antdv.com/">{{ item.name.last }}</a>
            </template>
            <template #avatar>
              <f-avatar :src="item.picture.large" :size="40" />
            </template>
          </f-list-item-meta>
        </f-skeleton>
      </f-list-item>
    </template>
  </f-list>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, nextTick } from 'vue'
const count = 3
const fakeDataUrl = `https://randomuser.me/api/?results=${count}&inc=name,gender,email,nat,picture&noinfo`

export default defineComponent({
  setup() {
    const initLoading = ref(true)
    const loading = ref(false)
    const data = ref([])
    const list = ref([])
    onMounted(() => {
      fetch(fakeDataUrl)
        .then(res => res.json())
        .then(res => {
          initLoading.value = false
          data.value = res.results
          list.value = res.results
        })
    })

    const onLoadMore = () => {
      loading.value = true
      list.value = data.value.concat([...new Array(count)].map(() => ({ loading: true, name: {}, picture: {} })))
      fetch(fakeDataUrl)
        .then(res => res.json())
        .then(res => {
          const newData = data.value.concat(res.results)
          loading.value = false
          data.value = newData
          list.value = newData
          nextTick(() => {
            // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
            // In real scene, you can using public method of react-virtualized:
            // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
            window.dispatchEvent(new Event('resize'))
          })
        })
    }

    return {
      loading,
      initLoading,
      data,
      list,
      onLoadMore,
    }
  },
})
</script>
<style scoped>
.demo-loadmore-list {
  min-height: 350px;
}
</style>

竖排列表：

<template>
  <f-list bordered item-layout="vertical" :pagination="pagination" :data-source="listData">
    <template #renderItem="{ item }">
      <f-list-item key="item.title">
        <template #actions>
          <span v-for="{ type, text } in actions" :key="type">
            <component :is="type" style="margin-right: 4px; font-size: 14px" />
            <span style="font-size: 12px">{{ text }}</span>
          </span>
        </template>
        <template #extra>
          <div class="picture">
            <img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
          </div>
        </template>
        <f-list-item-meta :description="item.description">
          <template #title>
            <a :href="item.href">{{ item.title }}</a>
          </template>
          <template #avatar><f-avatar :src="item.avatar" :size="40" /></template>
        </f-list-item-meta>
      </f-list-item>
    </template>
  </f-list>
</template>
<script lang="ts">
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue'
import { defineComponent } from 'vue'

const listData: Record<string, string>[] = []

for (let i = 0; i < 23; i++) {
  listData.push({
    href: 'https://www.antdv.com/',
    title: `ant design vue part ${i}`,
    avatar: '//via.placeholder.com/40',
    description:
      'Ant Design, a design language for background applications,Ant Design, for background applications, is refined by Ant UED Team.',
  })
}

export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },
  setup() {
    const pagination = {
      onChange: (page: number) => {
        console.log(page)
      },
      pageSize: 3,
    }
    const actions: Record<string, string>[] = [
      { type: 'StarOutlined', text: '156' },
      { type: 'LikeOutlined', text: '156' },
      { type: 'MessageOutlined', text: '2' },
    ]
    return {
      listData,
      pagination,
      actions,
    }
  },
})
</script>

<style lang="scss" scoped>
.picture {
  width: 158px;
  height: 98px;
  border-radius: 3px;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>

API

List

参数	说明	类型	默认值	版本
bordered	是否展示边框	boolean	false
dataSource	列表数据源	any[]	-	1.5.0
footer	列表底部	string|slot	-
grid	列表栅格配置	object	-
header	列表头部	string|slot	-
itemLayout	设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排	string	-
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean|object	false
loadMore	加载更多	string|slot	-
locale	默认文案设置，目前包括空数据文案	object	emptyText: '暂无数据'
pagination	对应的 pagination 配置, 设置 false 不显示	boolean|object	false
renderItem	自定义Item函数，也可使用 #renderItem="{item, index}"	({item, index}) => vNode		-
rowKey	各项 key 的取值，可以是字符串或一个函数	item => string|number
size	list 的尺寸	default | middle | small	default
split	是否展示分割线	boolean	true

pagination

分页的配置项。

参数	说明	类型	默认值
position	指定分页显示的位置	'top' | 'bottom' | 'both'	'bottom'

更多配置项，请查看 Pagination。

List grid props

参数	说明	类型	默认值	版本
column	列数	number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24]	-
gutter	栅格间隔	number	0
xxxl	≥2000px 展示的列数	number	-	3.0
xs	<576px 展示的列数	number	-
sm	≥576px 展示的列数	number	-
md	≥768px 展示的列数	number	-
lg	≥992px 展示的列数	number	-
xl	≥1200px 展示的列数	number	-
xxl	≥1600px 展示的列数	number	-

List.Item

参数	说明	类型	默认值	版本
actions	列表操作组，根据 itemLayout 的不同, 位置在卡片底部或者最右侧	vNode[] | slot	-
extra	额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧	string|slot	-

List.Item.Meta

参数	说明	类型	默认值
avatar	列表元素的图标	slot	-
description	列表元素的描述内容	string|slot	-
title	列表元素的标题	string|slot	-