简体中文

English

简体中文

English

深色模式

表格 Table ​

基础用法 ​

1李小颖5224
15杜小浩46218
18汤小青48212
28田小锋47515
35吴小豪37241
41吴小可40433
46木小亦40940
43邹小辉29353
vue
<template>
  <bp-table
    :data="list"
    border
    row-key="seat"
    :row-selection="rowSelection"
    v-model:selectedKeys="selectedKeys"
    v-model:selectedKey="selectedKey"
  >
    <template #columns>
      <bp-table-column title="座号" data-index="seat" :width="100">
        <template #cell="{ record }">
          <span style="font-weight: bold">{{ record.seat }}</span>
        </template>
      </bp-table-column>
      <bp-table-column title="姓名" data-index="name" align="center" />
      <bp-table-column title="成绩" data-index="results" :width="100" />
      <bp-table-column title="班级排名" data-index="ranking" :width="100" />
    </template>
  </bp-table>
</template>

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

const list = [
  { seat: "1", name: "李小颖", results: "522", ranking: "4" },
  { seat: "15", name: "杜小浩", results: "462", ranking: "18" },
  { seat: "18", name: "汤小青", results: "482", ranking: "12" },
  { seat: "28", name: "田小锋", results: "475", ranking: "15" },
  { seat: "35", name: "吴小豪", results: "372", ranking: "41" },
  { seat: "41", name: "吴小可", results: "404", ranking: "33" },
  { seat: "46", name: "木小亦", results: "409", ranking: "40" },
  { seat: "43", name: "邹小辉", results: "293", ranking: "53" },
];

const selectedKey = ref("");
const selectedKeys = ref([]);
const rowSelection = {
  type: "radio",
  // type: "checkbox",
};
</script>

表头滚动同步测试

测试表头和内容滚动同步，以及列对齐问题

固定列宽 + 横向滚动（容器宽度600px，表格内容宽度约1000px）

1张三28北京前端开发工程师zhangsan@example.com在职
2李四32上海后端开发工程师lisi@example.com在职
3王五26深圳UI设计师wangwu@example.com离职
4赵六30广州产品经理zhaoliu@example.com在职

混合宽度（部分固定宽度 + 自适应）

1张三28北京前端开发工程师zhangsan@example.com在职
2李四32上海后端开发工程师lisi@example.com在职
3王五26深圳UI设计师wangwu@example.com离职
4赵六30广州产品经理zhaoliu@example.com在职

纵向 + 横向滚动

1张三28北京前端开发工程师zhangsan@example.com13800138001在职
2李四32上海后端开发工程师lisi@example.com13800138002在职
3王五26深圳UI设计师wangwu@example.com13800138003离职
4赵六30广州产品经理zhaoliu@example.com13800138004在职
5用户525北京开发工程师user5@example.com138001380005离职
6用户626上海设计师user6@example.com138001380006在职
7用户727深圳产品经理user7@example.com138001380007在职
8用户828广州测试工程师user8@example.com138001380008离职
9用户929杭州运营user9@example.com138001380009在职
10用户1030北京开发工程师user10@example.com138001380010在职
11用户1131上海设计师user11@example.com138001380011离职
12用户1232深圳产品经理user12@example.com138001380012在职
13用户1333广州测试工程师user13@example.com138001380013在职
14用户1434杭州运营user14@example.com138001380014离职
15用户1525北京开发工程师user15@example.com138001380015在职
16用户1626上海设计师user16@example.com138001380016在职
17用户1727深圳产品经理user17@example.com138001380017离职
18用户1828广州测试工程师user18@example.com138001380018在职
19用户1929杭州运营user19@example.com138001380019在职
20用户2030北京开发工程师user20@example.com138001380020离职
21用户2131上海设计师user21@example.com138001380021在职
22用户2232深圳产品经理user22@example.com138001380022在职
23用户2333广州测试工程师user23@example.com138001380023离职
24用户2434杭州运营user24@example.com138001380024在职
vue
<template>
  <div>
    <h3>表头滚动同步测试</h3>
    <p>测试表头和内容滚动同步，以及列对齐问题</p>
    
    <!-- 测试固定列宽 + 横向滚动 -->
    <h4>固定列宽 + 横向滚动（容器宽度600px，表格内容宽度约1000px）</h4>
    <div style="width: 600px; ">
      <bp-table
        :data="list"
        border
        row-key="id"
        :scroll="{ x: 1000 }"
        :row-selection="{ type: 'radio' }"
      >
        <template #columns>
          <bp-table-column title="ID" data-index="id" :width="80" />
          <bp-table-column title="姓名" data-index="name" :width="120" />
          <bp-table-column title="年龄" data-index="age" :width="80" />
          <bp-table-column title="城市" data-index="city" :width="120" />
          <bp-table-column title="职业" data-index="job" :width="200" />
          <bp-table-column title="邮箱" data-index="email" :width="250" />
          <bp-table-column title="状态" data-index="status" :width="100" />
        </template>
      </bp-table>
    </div>
    
    <!-- 测试混合宽度 -->
    <h4>混合宽度（部分固定宽度 + 自适应）</h4>
    <div style="width: 500px; ">
      <bp-table
        :data="list"
        border
        row-key="id"
        :scroll="{ x: 800 }"
      >
        <template #columns>
          <bp-table-column title="ID" data-index="id" :width="60" />
          <bp-table-column title="姓名" data-index="name" :width="100" />
          <bp-table-column title="年龄" data-index="age" />
          <bp-table-column title="城市" data-index="city" />
          <bp-table-column title="职业" data-index="job" :width="180" />
          <bp-table-column title="邮箱" data-index="email" :width="220" />
          <bp-table-column title="状态" data-index="status" />
        </template>
      </bp-table>
    </div>
    
    <!-- 测试纵向 + 横向滚动 -->
    <h4>纵向 + 横向滚动</h4>
    <div style="width: 700px; ">
      <bp-table
        :data="bigList"
        border
        row-key="id"
        :scroll="{ x: 900, y: 200 }"
        :row-selection="{ type: 'checkbox' }"
      >
        <template #columns>
          <bp-table-column title="ID" data-index="id" :width="60" />
          <bp-table-column title="姓名" data-index="name" :width="100" />
          <bp-table-column title="年龄" data-index="age" :width="80" />
          <bp-table-column title="城市" data-index="city" :width="120" />
          <bp-table-column title="职业" data-index="job" :width="180" />
          <bp-table-column title="邮箱" data-index="email" :width="200" />
          <bp-table-column title="电话" data-index="phone" :width="120" />
          <bp-table-column title="状态" data-index="status" :width="80" />
        </template>
      </bp-table>
    </div>
  </div>
</template>

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

const list = ref([
  {
    id: 1,
    name: "张三",
    age: 28,
    city: "北京",
    job: "前端开发工程师",
    email: "zhangsan@example.com",
    phone: "13800138001",
    status: "在职"
  },
  {
    id: 2,
    name: "李四",
    age: 32,
    city: "上海",
    job: "后端开发工程师", 
    email: "lisi@example.com",
    phone: "13800138002",
    status: "在职"
  },
  {
    id: 3,
    name: "王五",
    age: 26,
    city: "深圳",
    job: "UI设计师",
    email: "wangwu@example.com",
    phone: "13800138003",
    status: "离职"
  },
  {
    id: 4,
    name: "赵六",
    age: 30,
    city: "广州",
    job: "产品经理",
    email: "zhaoliu@example.com",
    phone: "13800138004",
    status: "在职"
  }
]);

// 生成更多数据用于测试纵向滚动
const bigList = ref([
  ...list.value,
  ...Array.from({ length: 20 }, (_, i) => ({
    id: i + 5,
    name: `用户${i + 5}`,
    age: 25 + (i % 10),
    city: ["北京", "上海", "深圳", "广州", "杭州"][i % 5],
    job: ["开发工程师", "设计师", "产品经理", "测试工程师", "运营"][i % 5],
    email: `user${i + 5}@example.com`,
    phone: `1380013800${(i + 5).toString().padStart(2, '0')}`,
    status: i % 3 === 0 ? "离职" : "在职"
  }))
]);
</script>

<style scoped>
h3, h4 {
  margin: 20px 0 10px 0;
  color: #333;
}

p {
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}

.bp-table {
  margin-bottom: 30px;
}

div[style*="border"] {
  margin-bottom: 20px;
  border-radius: 4px;
  background-color: #fafafa;
}
</style>

横向滚动示例

当列数较多时，表格会自动启用横向滚动，确保每列都有适当的宽度显示

自动横向滚动（无限制）

1张三28北京前端开发工程师zhangsan@example.com13800138001北京市朝阳区建国门外大街1号科技有限公司15000
2李四32上海后端开发工程师lisi@example.com13800138002上海市浦东新区世纪大道100号互联网公司18000
3王五26深圳UI设计师wangwu@example.com13800138003深圳市南山区科技园南区设计工作室12000
4赵六30广州产品经理zhaoliu@example.com13800138004广州市天河区珠江新城创业公司20000

指定横向滚动宽度（1200px）

1张三28北京前端开发工程师zhangsan@example.com13800138001北京市朝阳区建国门外大街1号科技有限公司15000
2李四32上海后端开发工程师lisi@example.com13800138002上海市浦东新区世纪大道100号互联网公司18000
3王五26深圳UI设计师wangwu@example.com13800138003深圳市南山区科技园南区设计工作室12000
4赵六30广州产品经理zhaoliu@example.com13800138004广州市天河区珠江新城创业公司20000

横向 + 纵向滚动

1张三28北京前端开发工程师zhangsan@example.com13800138001北京市朝阳区建国门外大街1号
2李四32上海后端开发工程师lisi@example.com13800138002上海市浦东新区世纪大道100号
3王五26深圳UI设计师wangwu@example.com13800138003深圳市南山区科技园南区
4赵六30广州产品经理zhaoliu@example.com13800138004广州市天河区珠江新城
5用户525北京开发工程师user5@example.com13800138005地址5号
6用户626上海设计师user6@example.com13800138006地址6号
7用户727深圳产品经理user7@example.com13800138007地址7号
8用户828广州测试工程师user8@example.com13800138008地址8号
9用户929杭州运营user9@example.com13800138009地址9号
10用户1030北京开发工程师user10@example.com138001380010地址10号
11用户1131上海设计师user11@example.com138001380011地址11号
12用户1232深圳产品经理user12@example.com138001380012地址12号
13用户1333广州测试工程师user13@example.com138001380013地址13号
14用户1434杭州运营user14@example.com138001380014地址14号
15用户1525北京开发工程师user15@example.com138001380015地址15号
16用户1626上海设计师user16@example.com138001380016地址16号
17用户1727深圳产品经理user17@example.com138001380017地址17号
18用户1828广州测试工程师user18@example.com138001380018地址18号
19用户1929杭州运营user19@example.com138001380019地址19号
20用户2030北京开发工程师user20@example.com138001380020地址20号
21用户2131上海设计师user21@example.com138001380021地址21号
22用户2232深圳产品经理user22@example.com138001380022地址22号
23用户2333广州测试工程师user23@example.com138001380023地址23号
24用户2434杭州运营user24@example.com138001380024地址24号
vue
<template>
  <div>
    <h3>横向滚动示例</h3>
    <p>当列数较多时，表格会自动启用横向滚动，确保每列都有适当的宽度显示</p>
    
    <!-- 无滚动限制 - 自动计算 -->
    <h4>自动横向滚动（无限制）</h4>
    <bp-table
      :data="list"
      border
      row-key="id"
      style="width: 800px;"
    >
      <template #columns>
        <bp-table-column title="ID" data-index="id" :width="80" />
        <bp-table-column title="姓名" data-index="name" :width="120" />
        <bp-table-column title="年龄" data-index="age" :width="80" />
        <bp-table-column title="城市" data-index="city" :width="120" />
        <bp-table-column title="职业" data-index="job" :width="150" />
        <bp-table-column title="邮箱" data-index="email" :width="200" />
        <bp-table-column title="电话" data-index="phone" :width="150" />
        <bp-table-column title="地址" data-index="address" :width="250" />
        <bp-table-column title="公司" data-index="company" :width="180" />
        <bp-table-column title="薪资" data-index="salary" :width="120" />
      </template>
    </bp-table>

    <!-- 指定横向滚动宽度 -->
    <h4>指定横向滚动宽度（1200px）</h4>
    <bp-table
      :data="list"
      border
      row-key="id"
      :scroll="{ x: 1200 }"
      style="width: 600px;"
    >
      <template #columns>
        <bp-table-column title="ID" data-index="id" :width="80" />
        <bp-table-column title="姓名" data-index="name" :width="120" />
        <bp-table-column title="年龄" data-index="age" :width="80" />
        <bp-table-column title="城市" data-index="city" :width="120" />
        <bp-table-column title="职业" data-index="job" :width="150" />
        <bp-table-column title="邮箱" data-index="email" :width="200" />
        <bp-table-column title="电话" data-index="phone" :width="150" />
        <bp-table-column title="地址" data-index="address" :width="250" />
        <bp-table-column title="公司" data-index="company" :width="180" />
        <bp-table-column title="薪资" data-index="salary" :width="120" />
      </template>
    </bp-table>

    <!-- 同时设置横向和纵向滚动 -->
    <h4>横向 + 纵向滚动</h4>
    <bp-table
      :data="bigList"
      border
      row-key="id"
      :scroll="{ x: 1000, y: 300 }"
      style="width: 700px;"
    >
      <template #columns>
        <bp-table-column title="ID" data-index="id" :width="80" />
        <bp-table-column title="姓名" data-index="name" :width="120" />
        <bp-table-column title="年龄" data-index="age" :width="80" />
        <bp-table-column title="城市" data-index="city" :width="120" />
        <bp-table-column title="职业" data-index="job" :width="150" />
        <bp-table-column title="邮箱" data-index="email" :width="200" />
        <bp-table-column title="电话" data-index="phone" :width="150" />
        <bp-table-column title="地址" data-index="address" :width="250" />
      </template>
    </bp-table>
  </div>
</template>

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

const list = ref([
  {
    id: 1,
    name: "张三",
    age: 28,
    city: "北京",
    job: "前端开发工程师",
    email: "zhangsan@example.com",
    phone: "13800138001",
    address: "北京市朝阳区建国门外大街1号",
    company: "科技有限公司",
    salary: "15000"
  },
  {
    id: 2,
    name: "李四",
    age: 32,
    city: "上海",
    job: "后端开发工程师",
    email: "lisi@example.com",
    phone: "13800138002",
    address: "上海市浦东新区世纪大道100号",
    company: "互联网公司",
    salary: "18000"
  },
  {
    id: 3,
    name: "王五",
    age: 26,
    city: "深圳",
    job: "UI设计师",
    email: "wangwu@example.com",
    phone: "13800138003",
    address: "深圳市南山区科技园南区",
    company: "设计工作室",
    salary: "12000"
  },
  {
    id: 4,
    name: "赵六",
    age: 30,
    city: "广州",
    job: "产品经理",
    email: "zhaoliu@example.com",
    phone: "13800138004",
    address: "广州市天河区珠江新城",
    company: "创业公司",
    salary: "20000"
  }
]);

// 生成更多数据用于测试纵向滚动
const bigList = ref([
  ...list.value,
  ...Array.from({ length: 20 }, (_, i) => ({
    id: i + 5,
    name: `用户${i + 5}`,
    age: 25 + (i % 10),
    city: ["北京", "上海", "深圳", "广州", "杭州"][i % 5],
    job: ["开发工程师", "设计师", "产品经理", "测试工程师", "运营"][i % 5],
    email: `user${i + 5}@example.com`,
    phone: `1380013800${i + 5}`,
    address: `地址${i + 5}号`,
    company: `公司${i + 5}`,
    salary: `${10000 + i * 1000}`
  }))
]);
</script>

<style scoped>
h3, h4 {
  margin: 20px 0 10px 0;
  color: #333;
}

p {
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}

.bp-table {
  margin-bottom: 30px;
}
</style>