表格示例

展示表格组件的各种使用场景。

基础表格

简单的数据展示表格。

<div id="demo-table" style="height: 300px;"></div>

<script>
  const table = new SaTable('#demo-table', {
    columns: [
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'age', label: '年龄', width: 100 },
      { prop: 'email', label: '邮箱', width: 200 },
      { prop: 'address', label: '地址' }
    ],
    data: [
      { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com', address: '北京市朝阳区' },
      { id: 2, name: '李四', age: 30, email: 'lisi@example.com', address: '上海市浦东新区' },
      { id: 3, name: '王五', age: 28, email: 'wangwu@example.com', address: '广州市天河区' }
    ]
  });
</script>

带分页的表格

结合分页组件的数据表格。

<div id="demo-table-pagination" style="height: 400px;"></div>
<div id="demo-pagination" style="margin-top: 16px;"></div>

<script>
  let currentPage = 1;
  const pageSize = 10;
  
  const table = new SaTable('#demo-table-pagination', {
    columns: [
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'age', label: '年龄', width: 100 },
      { prop: 'email', label: '邮箱', width: 200 },
      { prop: 'address', label: '地址' }
    ],
    data: []
  });
  
  const pagination = new SaPagination('#demo-pagination', {
    total: 100,
    pageSize: pageSize,
    current: currentPage,
    layout: 'total, prev, pager, next, jumper',
    onChange: async (page, size) => {
      currentPage = page;
      // 模拟数据获取
      const start = (page - 1) * size;
      const data = Array.from({ length: size }, (_, i) => ({
        id: start + i + 1,
        name: `用户${start + i + 1}`,
        age: 20 + Math.floor(Math.random() * 30),
        email: `user${start + i + 1}@example.com`,
        address: `地址${start + i + 1}`
      }));
      table.setData(data);
    }
  });
  
  // 初始化加载第一页数据
  pagination.onChange(1, pageSize);
</script>

表格与搜索表单组合

表格配合搜索表单的综合示例。

<!-- 搜索表单 -->
<div style="padding: 16px; background: #f5f7fa; border-radius: 8px; margin-bottom: 16px;">
  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <div class="sa-input" 
         data-placeholder="请输入姓名" 
         style="width: 200px;">
    </div>
    <div class="sa-select" 
         data-select
         data-placeholder="选择状态"
         data-options='[{"label":"全部","value":""},{"label":"启用","value":"1"},{"label":"禁用","value":"0"}]'
         style="width: 150px;">
    </div>
    <button class="sa-button" data-button data-type="primary">搜索</button>
    <button class="sa-button" data-button>重置</button>
  </div>
</div>

<!-- 表格 -->
<div id="demo-table-search" style="height: 400px;"></div>

<!-- 分页 -->
<div id="demo-pagination-search" style="margin-top: 16px;"></div>

<script>
  const table = new SaTable('#demo-table-search', {
    columns: [
      { prop: 'name', label: '姓名', width: 120 },
      { prop: 'status', label: '状态', width: 100 },
      { prop: 'email', label: '邮箱', width: 200 },
      { prop: 'createTime', label: '创建时间', width: 180 }
    ],
    data: []
  });
  
  const pagination = new SaPagination('#demo-pagination-search', {
    total: 0,
    pageSize: 10,
    current: 1,
    onChange: (page, size) => {
      // 加载数据
      loadTableData(page, size);
    }
  });
  
  function loadTableData(page, size) {
    // 模拟数据加载
    const data = Array.from({ length: size }, (_, i) => ({
      id: (page - 1) * size + i + 1,
      name: `用户${(page - 1) * size + i + 1}`,
      status: i % 2 === 0 ? '启用' : '禁用',
      email: `user${(page - 1) * size + i + 1}@example.com`,
      createTime: '2024-12-25 10:00:00'
    }));
    table.setData(data);
    pagination.setTotal(100);
  }
  
  loadTableData(1, 10);
  SA.init('body');
</script>