List 列表

概述

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

代码示例

List 列表 - 图1

基础用法

设置属性 size 可以显示三种不同尺寸的列表。

可以设置 headerfooter 来自定义列表头部或尾部。

  1. <template>
  2. <div>
  3. <strong>Default Size:</strong>
  4. <br><br>
  5. <List header="Header" footer="Footer" border>
  6. <ListItem>This is a piece of text.</ListItem>
  7. <ListItem>This is a piece of text.</ListItem>
  8. <ListItem>This is a piece of text.</ListItem>
  9. </List>
  10. <br>
  11. <strong>Small Size:</strong>
  12. <br><br>
  13. <List header="Header" footer="Footer" border size="small">
  14. <ListItem>This is a piece of text.</ListItem>
  15. <ListItem>This is a piece of text.</ListItem>
  16. <ListItem>This is a piece of text.</ListItem>
  17. </List>
  18. <br>
  19. <strong>Large Size:</strong>
  20. <br><br>
  21. <List header="Header" footer="Footer" border size="large">
  22. <ListItem>This is a piece of text.</ListItem>
  23. <ListItem>This is a piece of text.</ListItem>
  24. <ListItem>This is a piece of text.</ListItem>
  25. </List>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. }
  31. </script>

List 列表 - 图2

基础列表

带有图标、标题、描述的基础列表。

也可以带有列表操作组。

  1. <template>
  2. <List>
  3. <ListItem>
  4. <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" title="This is title" description="This is description, this is description." />
  5. </ListItem>
  6. <ListItem>
  7. <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" title="This is title" description="This is description, this is description." />
  8. </ListItem>
  9. <ListItem>
  10. <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" title="This is title" description="This is description, this is description." />
  11. <template slot="action">
  12. <li>
  13. <a href="">Edit</a>
  14. </li>
  15. <li>
  16. <a href="">More</a>
  17. </li>
  18. </template>
  19. </ListItem>
  20. <ListItem>
  21. <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" title="This is title" description="This is description, this is description." />
  22. <template slot="action">
  23. <li>
  24. <a href="">Edit</a>
  25. </li>
  26. <li>
  27. <a href="">More</a>
  28. </li>
  29. </template>
  30. </ListItem>
  31. </List>
  32. </template>
  33. <script>
  34. export default {
  35. }
  36. </script>

List 列表 - 图3

竖排列表样式

设置属性 item-layoutvertical 可实现竖排列表样式。

  1. <template>
  2. <List item-layout="vertical">
  3. <ListItem v-for="item in data" :key="item.title">
  4. <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
  5. {{ item.content }}
  6. <template slot="action">
  7. <li>
  8. <Icon type="ios-star-outline" /> 123
  9. </li>
  10. <li>
  11. <Icon type="ios-thumbs-up-outline" /> 234
  12. </li>
  13. <li>
  14. <Icon type="ios-chatbubbles-outline" /> 345
  15. </li>
  16. </template>
  17. <template slot="extra">
  18. <img src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large" style="width: 280px">
  19. </template>
  20. </ListItem>
  21. </List>
  22. </template>
  23. <script>
  24. export default {
  25. data () {
  26. return {
  27. data: [
  28. {
  29. title: 'This is title 1',
  30. description: 'This is description, this is description, this is description.',
  31. avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
  32. content: 'This is the content, this is the content, this is the content, this is the content.'
  33. },
  34. {
  35. title: 'This is title 2',
  36. description: 'This is description, this is description, this is description.',
  37. avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
  38. content: 'This is the content, this is the content, this is the content, this is the content.'
  39. },
  40. {
  41. title: 'This is title 3',
  42. description: 'This is description, this is description, this is description.',
  43. avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
  44. content: 'This is the content, this is the content, this is the content, this is the content.'
  45. }
  46. ]
  47. }
  48. }
  49. }
  50. </script>

API

List props

属性说明类型默认值
border是否显示边框Booleanfalse
item-layout设置 ListItem 布局, 可选值为 horizontal(横排)或 vertical(竖直)Stringhorizontal
header列表头部String-
footer列表底部String-
loading列表是否正在加载Booleanfalse
size列表尺寸,可选值为 small、large、defaultStringdefault
split是否展示分割线Booleantrue

List slot

名称说明
header自定义列表头部
footer自定义列表底部
loading自定义加载中

ListItem slot

名称说明
action列表操作组,根据 item-layout 的不同, 位置在卡片底部或者最右侧
extra额外内容, 通常用在 item-layout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧

ListItemMeta props

属性说明类型默认值
avatar列表元素的图标String-
title列表元素的标题String-
description列表元素的描述内容String-

ListItemMeta slot

名称说明
avatar自定义列表元素的图标
title自定义列表元素的标题
description自定义列表元素的描述内容