# List 数据列表

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

# 基本用法

点击查看代码

<template>
  <div>
    <el-descriptions :column="3" colon>
      <el-descriptions-item label="显示序号">
        <el-switch v-model="listSerial" />
      </el-descriptions-item>
      <el-descriptions-item label="显示分割线">
        <el-switch v-model="listSplit" />
      </el-descriptions-item>
      <el-descriptions-item label="显示边框">
        <el-switch v-model="listBorder" />
      </el-descriptions-item>
    </el-descriptions>

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

<script>
  export default {
    name: "ListBase",
    data() {
      return {
        listSerial: false,
        listSplit: true,
        listBorder: false,

        listData: [
          { 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
35
36
37
38
39
40

# 加载API数据

点击查看代码

<template>
  <div>
    <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>
  </div>
</template>

<script>
  export default {
    name: "ListDataApi",
    methods: {
      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);
        });
      },

      reloadListData() {
        this.$refs.listRef.reload();
      }
    }
  }
</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

# 数据选择

点击查看代码

<template>
  <div>
    <el-descriptions colon>
      <el-descriptions-item label="选择器类型">
        <el-radio-group v-model="selectionType">
          <el-radio label="checkbox">多选</el-radio>
          <el-radio label="radio">单选</el-radio>
        </el-radio-group>
      </el-descriptions-item>
    </el-descriptions>

    <s-list :dataSource="listData" :selection="listSelection" hasSerial border>
      <template #itemRender="{ record }">
        <div>{{ record.text }}</div>
      </template>
    </s-list>
  </div>
</template>

<script>
  export default {
    name: "ListSelection",
    data() {
      return {
        selectionType: "checkbox",
        selectedRows: [],
        selectedRowKeys: [],

        listData: [
          { id: "111", text: "列表项1" },
          { id: "222", text: "列表项2" },
          { id: "333", text: "列表项3" }
        ]
      }
    },
    computed: {
      listSelection() {
        return {
          type: this.selectionType,
          selectedRows: this.selectedRows,
          selectedRowKeys: this.selectedRowKeys,
          onChange: ({ selectedRows, selectedRowKeys }) => {
            this.selectedRows = selectedRows;
            this.selectedRowKeys = selectedRowKeys;
          }
        };
      }
    }
  }
</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
44
45
46
47
48
49
50

# 数据分页

点击查看代码

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

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

<script>
  export default {
    name: "ListPagination",
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    computed: {
      pagination() {
        return {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          total: this.total,
          onChange: ({ currentPage, pageSize, total }) => {
            this.currentPage = currentPage;
            this.pageSize = pageSize;
            this.total = total;
          },
        };
      }
    },
    methods: {
      listDataApi(pageParams) {
        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);
        });
      },

      reloadListData() {
        this.$refs.listRef.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 自定义内容

点击查看代码

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

    <template #itemSerial="{ index }">
      <div>No.{{ index + 1 }}</div>
    </template>

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

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

<script>
  export default {
    name: "ListScopedSlot",
    data() {
      return {
        listData: [
          { 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

# 自定义列表项

点击查看代码

<template>
  <s-list :dataSource="listData" border>
    <template #itemRender="{ record }">
      <s-list-item :title="record.name" :subtitle="record.date">
        <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>
  export default {
    name: "ListScopedItem",
    data() {
      return {
        listData: [
          { 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
28
29
30
31
32

# 加载更多

点击查看代码

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

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

<script>
  export default {
    name: "ListLoadMore",
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    computed: {
      pagination() {
        return {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          total: this.total,
          onChange: ({ currentPage, pageSize, total }) => {
            this.currentPage = currentPage;
            this.pageSize = pageSize;
            this.total = total;
          },
        };
      }
    },
    methods: {
      listDataApi(pageParams) {
        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);
        });
      },

      reloadListData() {
        this.$refs.listRef.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# 滚动加载

点击查看代码

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

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

<script>
  export default {
    name: "ListRollLoad",
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    computed: {
      pagination() {
        return {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          total: this.total,
          onChange: ({ currentPage, pageSize, total }) => {
            this.currentPage = currentPage;
            this.pageSize = pageSize;
            this.total = total;
          },
        };
      }
    },
    methods: {
      listDataApi(pageParams) {
        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);
        });
      },

      reloadListData() {
        this.$refs.listRef.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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# List Props

# List Slots

# List Methods

# ListItem Props

# ListItem Slots

# ListSelection Props

# ListPagination Props

← SortTable 排序表格 SortList 排序列表 →