【vant 手机端封装表格】

组件封装

<template>
  <div
    class="mobile-table-container"
    :style="{width: screenWidth + 'px'}"
  >
    <div
      v-if="loading"
      class="loading"
    >
      加载中...
    </div>
    <div
      v-else-if="error"
      class="error"
    >
      {
  { error }}
    </div>
    <table
      v-else
      class="mobile-table"
    >
      <thead>
        <tr>
          <th
            v-for="column in columns"
            :key="column.key"
            class="sortable-header"
            @click="requestSort(column.key)"
          >
            {
  { column.title }}

            <span
              v-if="sortConfig.key === column.key"
              class="sort-icon"
            >
              <van-icon
                v-if="sortConfig.key === column.key"
                :name="sortConfig.direction === 'ascending' ? 'arrow-up' : 'arrow-down'"
              />
            </span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="item in sortedData"
          :key="item.id || item[columns[0].key]"
        >
          <td
            v-for="column in columns"
            :key="column.key"
          >
            {
  { item[column.key] }}
          </td>
        </tr>
      </tbody>
    </table>
    <!-- 分页器 -->