Table 数据表格

数据查询表格，对 s-table & s-search-form 进行了二次封装，用于快速创建带有数据查询功能的表格。

基本用法

姓名:

电话:

点击查看代码

<template>
  <s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableData"
                  @search="handleTableDataSearch"></s-search-table>
</template>

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

  const searchItems = reactive([
    { label: "姓名", name: "name", type: "text" },
    { label: "电话", name: "phone", type: "text" }
  ]);

  const tableColumns = reactive([
    { prop: "name", label: "姓名" },
    { prop: "phone", label: "电话" },
    { prop: "date", label: "日期" }
  ]);

  const dataSource = reactive([
    { id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" },
    { id: "222", name: "李四", phone: "17622222222", date: "2024-07-02" },
    { id: "333", name: "王五", phone: "17633333333", date: "2024-07-03" },
    { id: "444", name: "赵六", phone: "17644444444", date: "2024-07-04" }
  ]);

  const tableData = ref(dataSource);

  const handleTableDataSearch = (searchParams: Record<string, any>) => {
    const { name, phone } = searchParams || {};
    tableData.value = dataSource.filter((item: Record<string, any>) => {
      return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
    });
  };
</script>

加载API数据

姓名:

电话:

暂无数据

点击查看代码

<template>
  <s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableDataApi" autoload
                  @search="handleTableDataSearch"></s-search-table>
</template>

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

  const searchItems = reactive([
    { label: "姓名", name: "name", type: "text" },
    { label: "电话", name: "phone", type: "text" }
  ]);

  const tableColumns = reactive([
    { prop: "name", label: "姓名" },
    { prop: "phone", label: "电话" },
    { prop: "date", label: "日期" }
  ]);

  const tableDataApi = (params: Record<string, any>) => {
    const { name, phone } = params || {};
    const tableData = new Array(5).fill(0).map((_, i) => {
      return { id: `key${ i + 1 }`, name: `张三${ i + 1 }`, phone: "17611111111", date: "2024-07-01" };
    }).filter((item: Record<string, any>) => {
      return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
    });

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

  const handleTableDataSearch = (searchParams: Record<string, any>) => {
    console.log(searchParams);
  };
</script>

数据分页

点击查看代码

<template>
  <s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableDataApi" :pagination="pagination"
                  autoload border @search="handleTableDataSearch"></s-search-table>
</template>

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

  const { pagination } = useSDataList();

  const searchItems = reactive([
    { label: "姓名", name: "name", type: "text" },
    { label: "电话", name: "phone", type: "text" }
  ]);

  const tableColumns = reactive([
    { prop: "name", label: "姓名" },
    { prop: "phone", label: "电话" },
    { prop: "date", label: "日期" }
  ]);

  // 模拟数据接口
  const tableDataApi = (queryParams: Record<string, any>) => {
    const { name, phone, currentPage, pageSize } = queryParams;
    const tableData = new Array(25).fill(0).map((_, i) => {
      return { id: `key${ i + 1 }`, name: `张三${ i + 1 }`, phone: "17611111111", date: "2024-07-01" };
    }).filter((item: Record<string, any>) => {
      return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
    });

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

  const handleTableDataSearch = (searchParams: Record<string, any>) => {
    console.log(searchParams);
  };
</script>

表单扩展配置

姓名:

电话:

点击查看代码

<template>
  <s-search-table :searchItems="searchItems" :columns="tableColumns" :dataSource="tableData" :searchColumn="2" border
                  :searchProps="{ labelWidth: 60, border: true }" @search="handleTableDataSearch"></s-search-table>
</template>

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

  const searchItems = reactive([
    { label: "姓名", name: "name", type: "text" },
    { label: "电话", name: "phone", type: "text" }
  ]);

  const tableColumns = reactive([
    { prop: "name", label: "姓名" },
    { prop: "phone", label: "电话" },
    { prop: "date", label: "日期" }
  ]);

  const dataSource = reactive([
    { id: "111", name: "张三", phone: "17611111111", date: "2024-07-01" },
    { id: "222", name: "李四", phone: "17622222222", date: "2024-07-02" },
    { id: "333", name: "王五", phone: "17633333333", date: "2024-07-03" },
    { id: "444", name: "赵六", phone: "17644444444", date: "2024-07-04" }
  ]);

  const tableData = ref(dataSource);

  const handleTableDataSearch = (searchParams: Record<string, any>) => {
    const { name, phone } = searchParams || {};
    tableData.value = dataSource.filter((item: Record<string, any>) => {
      return (!name || item.name.includes(name)) && (!phone || item.phone.includes(phone));
    });
  };
</script>

Props

Slots

Emits

Methods