List 数据列表

简单列表，自定义列表展示组件，提供了数据加载、数据分页等功能。

基本用法

显示序号:

显示分割线:

显示边框:

列表项1

列表项2

列表项3

点击查看代码

vue

<template>
  <s-form :column="3" labelWidth="120px" showColon>
    <s-form-item label="显示序号">
      <el-switch v-model="listSerial" />
    </s-form-item>
    <s-form-item label="显示分割线">
      <el-switch v-model="listSplit" />
    </s-form-item>
    <s-form-item label="显示边框">
      <el-switch v-model="listBorder" />
    </s-form-item>
  </s-form>

  <s-list :dataSource="listData" :hasSerial="listSerial" :split="listSplit" :border="listBorder">
    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { ref, reactive } from "vue";

  const listSerial = ref(false);
  const listSplit = ref(true);
  const listBorder = ref(false);

  const listData = reactive([
    { id: "111", text: "列表项1" },
    { id: "222", text: "列表项2" },
    { id: "333", text: "列表项3" }
  ]);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

加载API数据

暂无数据

点击查看代码

vue

<template>
  <el-button style="margin-bottom: .5rem;" type="primary" @click="reloadListData">刷新数据</el-button>

  <s-list ref="listRef" :dataSource="listDataApi" autoload hasSerial border>
    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const listRef = ref();

  const listDataApi = () => {
    const listData = new Array(5).fill(0).map((_, i) => {
      return { id: `key${ i + 1 }`, text: `列表项${ i + 1 }` };
    });

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: listData
        });
      }, 1000);
    });
  };

  const reloadListData = () => {
    listRef.value?.reload(true);
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

数据选择

点击查看代码

vue

<template>
  <s-form labelWidth="120px" showColon>
    <s-form-item label="选择器类型">
      <el-radio-group v-model="selectionType">
        <el-radio value="checkbox">多选</el-radio>
        <el-radio value="radio">单选</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-list :dataSource="listData" :selection="selection" hasSerial border>
    <template #header>可选择列表</template>

    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { reactive } from "vue";
  import { useSDataList } from "@el-pro/index";

  const {
    selectionType,
    selection
  } = useSDataList();

  const listData = reactive([
    { id: "111", text: "列表项1" },
    { id: "222", text: "列表项2" },
    { id: "333", text: "列表项3" }
  ]);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

数据分页

点击查看代码

vue

<template>
  <el-button style="margin-bottom: .5rem;" type="primary" @click="reload">刷新数据</el-button>

  <s-list ref="dataListRef" :dataSource="listDataApi" :pagination="pagination" autoload hasSerial border>
    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { useSDataList } from "@el-pro/index";

  const {
    dataListRef,
    pagination,
    reload
  } = useSDataList();

  // 模拟数据接口
  const listDataApi = (pageParams: Record<string, any>) => {
    const listData = new Array(25).fill(0).map((_, i) => {
      return { id: `key${ i + 1 }`, text: `列表项${ i + 1 }` };
    });

    const { currentPage, pageSize } = pageParams;
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: {
            currentPage: currentPage,
            pageSize: pageSize,
            total: listData.length,
            records: listData.filter((_, i) => {
              return i >= pageSize*(currentPage - 1) && i < pageSize*currentPage;
            })
          }
        });
      }, 1000);
    });
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

自定义内容

自定义列表标题

前置扩展

列表项1 - 0

后置扩展

前置扩展

列表项2 - 1

后置扩展

前置扩展

列表项3 - 2

后置扩展

自定义列表底部操作栏

点击查看代码

vue

<template>
  <s-list :dataSource="listData" hasSerial border>
    <template #header>
      <div>自定义列表标题</div>
    </template>

    <template #itemBefore>
      <div style="padding: 0 10px;">前置扩展</div>
    </template>

    <template #itemRender="{ record, index }">
      <div>{{ record.text }} - {{ index }}</div>
    </template>

    <template #itemAfter>
      <div style="padding: 0 10px;">后置扩展</div>
    </template>

    <template #loadMore>
      <div>自定义列表底部操作栏</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { reactive } from "vue";

  const listData = reactive([
    { id: "111", text: "列表项1" },
    { id: "222", text: "列表项2" },
    { id: "333", text: "列表项3" }
  ]);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

自定义列表项

张三

2024-08-01

列表项1

列表项操作栏

列表项额外内容

李四

2024-08-01

列表项2

列表项操作栏

列表项额外内容

王五

2024-08-01

列表项3

列表项操作栏

列表项额外内容

点击查看代码

vue

<template>
  <s-list :dataSource="listData" border>
    <template #itemRender="{ record }">
      <s-list-item :title="record.name" :subtitle="record.date" showAvatar>
        <div>{{ record.desc }}</div>

        <template #actions>
          <div style="background: #e4e7ed;">列表项操作栏</div>
        </template>

        <template #extra>
          <div style="height: 100%;background: #e4e7ed;">列表项额外内容</div>
        </template>
      </s-list-item>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { reactive } from "vue";

  const listData = reactive([
    { id: "111", name: "张三", desc: "列表项1", date: "2024-08-01" },
    { id: "222", name: "李四", desc: "列表项2", date: "2024-08-01" },
    { id: "333", name: "王五", desc: "列表项3", date: "2024-08-01" }
  ]);
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

加载更多

点击查看代码

vue

<template>
  <el-button style="margin-bottom: .5rem;" type="primary" @click="reload">刷新数据</el-button>

  <s-list ref="dataListRef" style="height: 350px;" :dataSource="listDataApi" :pagination="pagination"
          autoload loadMore hasSerial border>
    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { useSDataList } from "@el-pro/index";

  const {
    dataListRef,
    pagination,
    reload
  } = useSDataList();

  // 模拟数据接口
  const listDataApi = (pageParams: Record<string, any>) => {
    const listData = new Array(25).fill(0).map((_, i) => {
      return { id: `key${ i + 1 }`, text: `列表项${ i + 1 }` };
    });

    const { currentPage, pageSize } = pageParams;
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: {
            currentPage: currentPage,
            pageSize: pageSize,
            total: listData.length,
            records: listData.filter((_, i) => {
              return i >= pageSize*(currentPage - 1) && i < pageSize*currentPage;
            })
          }
        });
      }, 1000);
    });
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

滚动加载

点击查看代码

vue

<template>
  <el-button style="margin-bottom: .5rem;" type="primary" @click="reload">刷新数据</el-button>

  <s-list ref="dataListRef" style="height: 350px;" :dataSource="listDataApi" :pagination="pagination"
          autoload rollLoad hasSerial border>
    <template #itemRender="{ record }">
      <div>{{ record.text }}</div>
    </template>
  </s-list>
</template>

<script setup lang="ts">
  import { useSDataList } from "@el-pro/index";

  const {
    dataListRef,
    pagination,
    reload
  } = useSDataList();

  // 模拟数据接口
  const listDataApi = (pageParams: Record<string, any>) => {
    const listData = new Array(25).fill(0).map((_, i) => {
      return { id: `key${ i + 1 }`, text: `列表项${ i + 1 }` };
    });

    const { currentPage, pageSize } = pageParams;
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          data: {
            currentPage: currentPage,
            pageSize: pageSize,
            total: listData.length,
            records: listData.filter((_, i) => {
              return i >= pageSize*(currentPage - 1) && i < pageSize*currentPage;
            })
          }
        });
      }, 1000);
    });
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

List Props

List Slots

List Methods

ListItem Props

ListItem Slots

List 数据列表 ​

基本用法 ​

加载API数据 ​

数据选择 ​

数据分页 ​

自定义内容 ​

自定义列表项 ​

加载更多 ​

滚动加载 ​

List Props ​

List Slots ​

List Methods ​

ListItem Props ​

ListItem Slots ​

List 数据列表

基本用法

加载API数据

数据选择

数据分页

自定义内容

自定义列表项

加载更多

滚动加载

List Props

List Slots

List Methods

ListItem Props

ListItem Slots