List 数据列表

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

基本用法

显示序号:

显示分割线:

显示边框:

列表项1

列表项2

列表项3

点击查看代码

<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>

加载API数据

暂无数据

点击查看代码

<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

列表项1

2

列表项2

3

列表项3

点击查看代码

<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="listSelection" hasSerial border>
    <template #header>可选择列表</template>

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

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

  const selectionType = ref("checkbox");
  const selectedRows = ref([]);
  const selectedRowKeys = ref([]);

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

  const listSelection = computed(() => {
    return {
      type: selectionType.value,
      selectedRows: selectedRows.value,
      selectedRowKeys: selectedRowKeys.value,
      onChange: (record: Record<string, any>) => {
        selectedRows.value = record.selectedRows;
        selectedRowKeys.value = record.selectedRowKeys;
      }
    };
  });
</script>

数据分页

暂无数据

共 0 条

• 1

前往

页

点击查看代码

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

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

  const listRef = ref();
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);

  const pagination = computed(() => {
    return {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      total: total.value,
      onChange: (record: Record<string, any>) => {
        currentPage.value = record.currentPage;
        pageSize.value = record.pageSize;
        total.value = record.total;
      }
    };
  });

  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);
    });
  };

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

自定义内容

自定义列表标题

前置扩展

1

列表项1 - 0

后置扩展

前置扩展

2

列表项2 - 1

后置扩展

前置扩展

3

列表项3 - 2

后置扩展

自定义列表底部操作栏

点击查看代码

<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>

自定义列表项

张三

2024-08-01

列表项1

列表项操作栏

列表项额外内容

李四

2024-08-01

列表项2

列表项操作栏

列表项额外内容

王五

2024-08-01

列表项3

列表项操作栏

列表项额外内容

点击查看代码

<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>

加载更多

暂无数据

点击查看代码

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

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

  const listRef = ref();
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);

  const pagination = computed(() => {
    return {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      total: total.value,
      onChange: (record: Record<string, any>) => {
        currentPage.value = record.currentPage;
        pageSize.value = record.pageSize;
        total.value = record.total;
      }
    };
  });

  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);
    });
  };

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

滚动加载

暂无数据

点击查看代码

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

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

  const listRef = ref();
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);

  const pagination = computed(() => {
    return {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      total: total.value,
      onChange: (record: Record<string, any>) => {
        currentPage.value = record.currentPage;
        pageSize.value = record.pageSize;
        total.value = record.total;
      }
    };
  });

  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);
    });
  };

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

List Props

List Slots

List Methods

ListItem Props

ListItem Slots