vant4简单实现表格功能

1. 效果

2. 实现

    <div class="table-box">
      <!-- 固定表头 -->
      <van-sticky>
        <van-row class="bg-gray-100 font-bold">
          <van-col>状态</van-col>
          <van-col>员工姓名</van-col>
          <van-col>员工ID</van-col>
          <van-col>职位名称</van-col>
          <van-col>隶属工作组</van-col>
          <van-col>操作</van-col>
        </van-row>
      </van-sticky>

      <!-- 表格内容 -->
      <van-list>
        <van-cell-group>
          <van-row
            v-for="(item, index) in staffList"
            :key="index"
            class="border-b hover:bg-gray-50"
          >
            <van-col class="p-2">在线</van-col>
            <van-col class="p-2">赖霖霖</van-col>
            <van-col class="p-2">12345678</van-col>
            <van-col class="p-2">理财顾问</van-col>
            <van-col class="p-2">外汇货币组</van-col>
            <van-col class="p-2">
              <van-button size="mini" color="#5CCAFB"> 详情 </van-button>
            </van-col>
          </van-row>
        </van-cell-group>
      </van-list>
    </div>

3. 参考

vant layout 文档