Sard Uniapp

Appearance

在新窗口打开⤴

Table表格1.9+

介绍 ​

用于展示多条结构类似的数据。

引入 ​

js
import Table from 'sard-uniapp/components/table/table.vue'
import TableRow from 'sard-uniapp/components/table-row/table-row.vue'
import TableCell from 'sard-uniapp/components/table-cell/table-cell.vue'

代码演示 ​

基础使用 ​

表格组件是通过 flex 布局实现的，sar-table-row 组件表示一行，sar-table-cell 组件表示一个单元格。 给 sar-table-cell 组件设置 bold 属性进行加粗以表示表头。

vue
<template>
  <sar-table>
    <sar-table-row>
      <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold>
        <view class="cell">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in partialData" :key="record.id">
      <sar-table-cell v-for="item in partialColumns" :key="item.prop">
        <view class="cell">{{ record[item.prop] }}</view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

<style lang="scss" scoped>
.cell {
  padding: 12rpx 16rpx;
}
</style>

data.ts

ts
export const columns = [
  {
    title: 'ID',
    prop: 'id',
    width: '80rpx',
  },
  {
    title: '日期',
    prop: 'date',
    width: '200rpx',
  },
  {
    title: '姓名',
    prop: 'name',
    width: '100rpx',
  },
  {
    title: '城市',
    prop: 'city',
    width: '100rpx',
  },
  {
    title: '电话',
    prop: 'tel',
    width: '200rpx',
  },
  {
    title: '地址',
    prop: 'address',
    width: '300rpx',
  },
] as const

export const partialColumns = [
  {
    title: 'ID',
    prop: 'id',
    width: '1',
  },
  {
    title: '姓名',
    prop: 'name',
    width: '2',
  },
  {
    title: '城市',
    prop: 'city',
    width: '3',
  },
] as const

export const data = Array(20)
  .fill(0)
  .map((_, i) => {
    return {
      id: i + 1,
      name: '张三',
      city: '广州',
      tel: '138********',
      address: '广东省广州市**路22号',
      date: '2024-12-12',
    }
  })

export const partialData = data.slice(0, 3)
js
const columns = [
  {
    title: "ID",
    prop: "id",
    width: "80rpx"
  },
  {
    title: "\u65E5\u671F",
    prop: "date",
    width: "200rpx"
  },
  {
    title: "\u59D3\u540D",
    prop: "name",
    width: "100rpx"
  },
  {
    title: "\u57CE\u5E02",
    prop: "city",
    width: "100rpx"
  },
  {
    title: "\u7535\u8BDD",
    prop: "tel",
    width: "200rpx"
  },
  {
    title: "\u5730\u5740",
    prop: "address",
    width: "300rpx"
  }
];
const partialColumns = [
  {
    title: "ID",
    prop: "id",
    width: "1"
  },
  {
    title: "\u59D3\u540D",
    prop: "name",
    width: "2"
  },
  {
    title: "\u57CE\u5E02",
    prop: "city",
    width: "3"
  }
];
const data = Array(20).fill(0).map((_, i) => {
  return {
    id: i + 1,
    name: "\u5F20\u4E09",
    city: "\u5E7F\u5DDE",
    tel: "138********",
    address: "\u5E7F\u4E1C\u7701\u5E7F\u5DDE\u5E02**\u8DEF22\u53F7",
    date: "2024-12-12"
  };
});
const partialData = data.slice(0, 3);
export {
  columns,
  data,
  partialColumns,
  partialData
};

边框 ​

给 sar-table 组件添加 bordered 属性可以设置单元格的边框。

vue
<template>
  <sar-table bordered>
    <sar-table-row>
      <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold>
        <view class="cell">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in partialData" :key="record.id">
      <sar-table-cell v-for="item in partialColumns" :key="item.prop">
        <view class="cell">{{ record[item.prop] }}</view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

<style lang="scss" scoped>
.cell {
  padding: 12rpx 16rpx;
}
</style>

下边框 ​

给 sar-table 组件添加 underline 属性可以设置单元格的下边框。

vue
<template>
  <sar-table underline>
    <sar-table-row>
      <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold>
        <view class="py-12 px-16">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in partialData" :key="record.id">
      <sar-table-cell v-for="item in partialColumns" :key="item.prop">
        <view class="py-12 px-16">{{ record[item.prop] }}</view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

有条纹的 ​

可以自由的给 sar-table-row 组件添加背景色。

vue
<template>
  <sar-table>
    <sar-table-row>
      <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold>
        <view class="py-12 px-16">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row
      v-for="(record, i) in partialData"
      :key="record.id"
      :root-style="{
        background: i % 2 === 0 ? 'var(--sar-secondary-bg)' : undefined,
        borderRadius: '8rpx',
      }"
    >
      <sar-table-cell v-for="item in partialColumns" :key="item.prop">
        <view class="py-12 px-16">{{ record[item.prop] }}</view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

单元格条纹 ​

也可以自由的给其他元素添加背景色来定制样式。

vue
<template>
  <sar-table>
    <sar-table-row>
      <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold>
        <view class="cell">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="(record, i) in partialData" :key="record.id">
      <sar-table-cell v-for="item in partialColumns" :key="item.prop">
        <view :class="['cell', { striated: i % 2 === 0 }]">
          {{ record[item.prop] }}
        </view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

<style lang="scss" scoped>
.cell {
  flex: 1;
  padding: 12rpx 16rpx;
  margin: 0 8rpx;
  text-align: center;
  border-radius: 8rpx;
}
.striated {
  background-color: var(--sar-secondary-bg);
}
</style>

自定义宽度 ​

因为表格组件是通过 flex 布局实现的，因此需要给同一列的单元格设置相同的宽度以便上下的单元格宽度可以对齐。

通过 sar-table-cell 组件的 width 属性可以设置任意宽度。可以是带有单位的，也可以不带有单位，但需要注意的是，要么全部带有单位，要么全部不带有单位，内部会使用 parseFloat() 将宽度值转换为 flex-grow 属性的值，以便在任意宽度屏幕上等比平分空间。

vue
<template>
  <sar-table bordered>
    <sar-table-row>
      <sar-table-cell
        v-for="item in partialColumns"
        :key="item.prop"
        bold
        :width="item.width"
      >
        <view class="py-12 px-16">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in partialData" :key="record.id">
      <sar-table-cell
        v-for="item in partialColumns"
        :key="item.prop"
        :width="item.width"
      >
        <view class="py-12 px-16">{{ record[item.prop] }}</view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, partialData } from './data'
</script>

固定表头 ​

给 sar-table 组件设置 height 属性，并给第一个 sar-table-row 组件设置 fixed 属性即可将其固定到表格的顶部。

vue
<template>
  <sar-table underline height="400rpx">
    <sar-table-row fixed>
      <sar-table-cell v-for="item in partialColumns" :key="item.prop" bold>
        <view class="py-12 px-16">{{ item.title }}</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in data" :key="record.id">
      <sar-table-cell v-for="item in partialColumns" :key="item.prop">
        <view class="py-12 px-16">{{ record[item.prop] }}</view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { partialColumns, data } from './data'
</script>

固定列 ​

给 sar-table-cell 组件设置 fixed 或 fixed="left" 属性可以将其固定在左边，设置 fixed="right" 可以将其固定在右边。

vue
<template>
  <sar-table underline>
    <sar-table-row>
      <sar-table-cell
        v-for="(item, i) in columns"
        :key="item.prop"
        bold
        :width="item.width"
        :fixed="i === 0"
      >
        <view class="py-12 px-16 whitespace-nowrap">{{ item.title }}</view>
      </sar-table-cell>
      <sar-table-cell bold fixed="right" width="120rpx">
        <view class="py-12 px-16 whitespace-nowrap">操作</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in partialData" :key="record.id">
      <sar-table-cell
        v-for="(item, i) in columns"
        :key="item.prop"
        :width="item.width"
        :fixed="i === 0"
      >
        <view class="py-12 px-16 whitespace-nowrap">
          {{ record[item.prop] }}
        </view>
      </sar-table-cell>
      <sar-table-cell fixed="right" width="120rpx">
        <view class="py-12 px-16 whitespace-nowrap">
          <sar-button size="small">编辑</sar-button>
        </view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { columns, partialData } from './data'
</script>

固定表头和列 ​

可以同时固定表头和列。

vue
<template>
  <sar-table underline height="400rpx">
    <sar-table-row fixed>
      <sar-table-cell
        v-for="(item, i) in columns"
        :key="item.prop"
        bold
        :width="item.width"
        :fixed="i === 0"
      >
        <view class="cell">{{ item.title }}</view>
      </sar-table-cell>
      <sar-table-cell bold fixed="right" width="120rpx">
        <view class="cell">操作</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in data" :key="record.id">
      <sar-table-cell
        v-for="(item, i) in columns"
        :key="item.prop"
        :width="item.width"
        :fixed="i === 0"
      >
        <view class="cell">{{ record[item.prop] }}</view>
      </sar-table-cell>
      <sar-table-cell fixed="right" width="120rpx">
        <view class="cell">
          <sar-button size="small">编辑</sar-button>
        </view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { columns, data } from './data'
</script>

<style lang="scss" scoped>
.cell {
  padding: 12rpx 16rpx;
  white-space: nowrap;
}
</style>

满屏表格 ​

可以使用 calc() 函数、--window-top 导航高度变量、vh 相对视窗单位来设置表格的高度以实现满屏的表格效果。

vue
<template>
  <sar-status-bar />
  <view class="wrapper">
    <sar-table :height="`calc(100vh - ${statusBarHeight}px)`">
      <sar-table-row fixed>
        <sar-table-cell
          v-for="(item, i) in columns"
          :key="item.prop"
          bold
          width="160rpx"
          :fixed="i === 0"
        >
          <view class="cell cell-title">{{ item.title }}</view>
        </sar-table-cell>
      </sar-table-row>

      <sar-table-row v-for="(record, rowIndex) in data" :key="record.level">
        <sar-table-cell
          v-for="(item, colIndex) in columns"
          :key="item.prop"
          width="160rpx"
          :fixed="colIndex === 0"
          :bold="colIndex === 0"
        >
          <view
            class="cell"
            :style="{ background: getBgColor(rowIndex, colIndex) }"
          >
            {{ record[item.prop] }}
          </view>
        </sar-table-cell>
      </sar-table-row>
    </sar-table>
  </view>
</template>

<script setup lang="ts">
import { columns, data } from './level-data'

const statusBarHeight = uni.getWindowInfo().statusBarHeight

const bgColor = [
  ['rgba(var(--sar-primary-rgb), 0.15)', 'rgba(var(--sar-primary-rgb), 0.05)'],
  ['rgba(var(--sar-primary-rgb), 0.05)', 'rgba(var(--sar-primary-rgb), 0)'],
]

const getBgColor = (row: number, col: number) => {
  return bgColor[row % 2][col % 2]
}
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 0 15rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
}
.cell {
  box-sizing: border-box;
  display: flex;
  padding: 12rpx 16rpx;
  height: 108rpx;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  font-size: var(--sar-text-sm);
}
.cell-title {
  background-color: var(--sar-primary);
  color: var(--sar-white);
}
</style>
vue
<template>
  <sar-status-bar />
  <view class="wrapper">
    <sar-table :height="`calc(100vh - ${statusBarHeight}px)`">
      <sar-table-row fixed>
        <sar-table-cell
          v-for="(item, i) in columns"
          :key="item.prop"
          bold
          width="160rpx"
          :fixed="i === 0"
        >
          <view class="cell cell-title">{{ item.title }}</view>
        </sar-table-cell>
      </sar-table-row>

      <sar-table-row v-for="(record, rowIndex) in data" :key="record.level">
        <sar-table-cell
          v-for="(item, colIndex) in columns"
          :key="item.prop"
          width="160rpx"
          :fixed="colIndex === 0"
          :bold="colIndex === 0"
        >
          <view
            class="cell"
            :style="{ background: getBgColor(rowIndex, colIndex) }"
          >
            {{ record[item.prop] }}
          </view>
        </sar-table-cell>
      </sar-table-row>
    </sar-table>
  </view>
</template>

<script setup lang="js">
const statusBarHeight = uni.getWindowInfo().statusBarHeight;
const bgColor = [
  ["rgba(var(--sar-primary-rgb), 0.15)", "rgba(var(--sar-primary-rgb), 0.05)"],
  ["rgba(var(--sar-primary-rgb), 0.05)", "rgba(var(--sar-primary-rgb), 0)"]
];
const getBgColor = (row, col) => {
  return bgColor[row % 2][col % 2];
};
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 0 15rpx;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
}
.cell {
  box-sizing: border-box;
  display: flex;
  padding: 12rpx 16rpx;
  height: 108rpx;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  font-size: var(--sar-text-sm);
}
.cell-title {
  background-color: var(--sar-primary);
  color: var(--sar-white);
}
</style>

level-data.ts

ts
export const columns = [
  {
    title: '等级',
    prop: 'level',
  },
  {
    title: '好友上限',
    prop: 'gghysx',
  },
  {
    title: '等级加速',
    prop: 'vipgrade',
  },
  {
    title: '2000人群',
    prop: 'group2000',
  },
  {
    title: '1000人群',
    prop: 'group1000',
  },
  {
    title: '表情漫游',
    prop: 'face_move',
  },
  {
    title: '云消息服务',
    prop: 'chatmsg',
  },
  {
    title: '离线传文件',
    prop: 'file_off',
  },
] as const

export const data = [
  {
    level: '非会员',
    gghysx: '3000',
    vipgrade: '不加倍',
    group2000: '无',
    group1000: '无',
    face_move: '无',
    chatmsg: '无',
    file_off: '2G',
  },
  {
    level: 'SVIP1',
    gghysx: '3500',
    vipgrade: '1.4倍',
    group2000: '无',
    group1000: '无',
    face_move: '100个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP2',
    gghysx: '3500',
    vipgrade: '1.6倍',
    group2000: '无',
    group1000: '无',
    face_move: '200个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP3',
    gghysx: '3500',
    vipgrade: '1.7倍',
    group2000: '无',
    group1000: '无',
    face_move: '400个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP4',
    gghysx: '3500',
    vipgrade: '1.8倍',
    group2000: '无',
    group1000: '无',
    face_move: '600个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP5',
    gghysx: '3500',
    vipgrade: '1.8倍',
    group2000: '无',
    group1000: '无',
    face_move: '800个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP6',
    gghysx: '3800',
    vipgrade: '1.9倍',
    group2000: '无',
    group1000: '无',
    face_move: '1000个',
    chatmsg: '所有好友',
    file_off: '2T',
  },
  {
    level: 'SVIP7',
    gghysx: '4000',
    vipgrade: '2.1倍',
    group2000: '无',
    group1000: '无',
    face_move: '1200个',
    chatmsg: '所有好友',
    file_off: '2.5T',
  },
  {
    level: 'SVIP8',
    gghysx: '4500',
    vipgrade: '2.2倍',
    group2000: '1',
    group1000: '3',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP9',
    gghysx: '5000',
    vipgrade: '2.5倍',
    group2000: '3',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10',
    gghysx: '5000',
    vipgrade: '3.5倍',
    group2000: '6',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10一星',
    gghysx: '5000',
    vipgrade: '3.7倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10二星',
    gghysx: '5000',
    vipgrade: '4.0倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10三星',
    gghysx: '5000',
    vipgrade: '4.5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10四星',
    gghysx: '5000',
    vipgrade: '5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
  {
    level: 'SVIP10五星',
    gghysx: '5000',
    vipgrade: '5.5倍',
    group2000: '7',
    group1000: '4',
    face_move: '1400个',
    chatmsg: '所有好友',
    file_off: '4T',
  },
]
js
const columns = [
  {
    title: "\u7B49\u7EA7",
    prop: "level"
  },
  {
    title: "\u597D\u53CB\u4E0A\u9650",
    prop: "gghysx"
  },
  {
    title: "\u7B49\u7EA7\u52A0\u901F",
    prop: "vipgrade"
  },
  {
    title: "2000\u4EBA\u7FA4",
    prop: "group2000"
  },
  {
    title: "1000\u4EBA\u7FA4",
    prop: "group1000"
  },
  {
    title: "\u8868\u60C5\u6F2B\u6E38",
    prop: "face_move"
  },
  {
    title: "\u4E91\u6D88\u606F\u670D\u52A1",
    prop: "chatmsg"
  },
  {
    title: "\u79BB\u7EBF\u4F20\u6587\u4EF6",
    prop: "file_off"
  }
];
const data = [
  {
    level: "\u975E\u4F1A\u5458",
    gghysx: "3000",
    vipgrade: "\u4E0D\u52A0\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "\u65E0",
    chatmsg: "\u65E0",
    file_off: "2G"
  },
  {
    level: "SVIP1",
    gghysx: "3500",
    vipgrade: "1.4\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "100\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2T"
  },
  {
    level: "SVIP2",
    gghysx: "3500",
    vipgrade: "1.6\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "200\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2T"
  },
  {
    level: "SVIP3",
    gghysx: "3500",
    vipgrade: "1.7\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2T"
  },
  {
    level: "SVIP4",
    gghysx: "3500",
    vipgrade: "1.8\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "600\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2T"
  },
  {
    level: "SVIP5",
    gghysx: "3500",
    vipgrade: "1.8\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "800\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2T"
  },
  {
    level: "SVIP6",
    gghysx: "3800",
    vipgrade: "1.9\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "1000\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2T"
  },
  {
    level: "SVIP7",
    gghysx: "4000",
    vipgrade: "2.1\u500D",
    group2000: "\u65E0",
    group1000: "\u65E0",
    face_move: "1200\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "2.5T"
  },
  {
    level: "SVIP8",
    gghysx: "4500",
    vipgrade: "2.2\u500D",
    group2000: "1",
    group1000: "3",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP9",
    gghysx: "5000",
    vipgrade: "2.5\u500D",
    group2000: "3",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP10",
    gghysx: "5000",
    vipgrade: "3.5\u500D",
    group2000: "6",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP10\u4E00\u661F",
    gghysx: "5000",
    vipgrade: "3.7\u500D",
    group2000: "7",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP10\u4E8C\u661F",
    gghysx: "5000",
    vipgrade: "4.0\u500D",
    group2000: "7",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP10\u4E09\u661F",
    gghysx: "5000",
    vipgrade: "4.5\u500D",
    group2000: "7",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP10\u56DB\u661F",
    gghysx: "5000",
    vipgrade: "5\u500D",
    group2000: "7",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  },
  {
    level: "SVIP10\u4E94\u661F",
    gghysx: "5000",
    vipgrade: "5.5\u500D",
    group2000: "7",
    group1000: "4",
    face_move: "1400\u4E2A",
    chatmsg: "\u6240\u6709\u597D\u53CB",
    file_off: "4T"
  }
];
export {
  columns,
  data
};

多级表头 ​

使用 sar-table-row 和 sar-table-cell 的“你中有我我中有你”可以实现多级表头。需要注意单元格都需要设置指定宽度以便对齐。

vue
<template>
  <sar-table bordered height="500rpx">
    <sar-table-row fixed>
      <sar-table-cell bold width="80rpx" fixed>
        <view class="cell">ID</view>
      </sar-table-cell>
      <sar-table-cell bold width="200rpx">
        <view class="cell">日期</view>
      </sar-table-cell>
      <sar-table-cell width="700rpx">
        <sar-table-row>
          <sar-table-cell bold>
            <view class="cell">收货地址</view>
          </sar-table-cell>
        </sar-table-row>
        <sar-table-row>
          <sar-table-cell bold width="100rpx">
            <view class="cell">姓名</view>
          </sar-table-cell>
          <sar-table-cell width="600rpx">
            <sar-table-row>
              <sar-table-cell bold>
                <view class="cell">地址信息</view>
              </sar-table-cell>
            </sar-table-row>
            <sar-table-row>
              <sar-table-cell bold width="100rpx">
                <view class="cell">城市</view>
              </sar-table-cell>
              <sar-table-cell bold width="200rpx">
                <view class="cell">电话</view>
              </sar-table-cell>
              <sar-table-cell bold width="300rpx">
                <view class="cell">地址</view>
              </sar-table-cell>
            </sar-table-row>
          </sar-table-cell>
        </sar-table-row>
      </sar-table-cell>
      <sar-table-cell bold fixed="right" width="120rpx">
        <view class="cell">操作</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row v-for="record in data" :key="record.id">
      <sar-table-cell
        v-for="(item, i) in columns"
        :key="item.prop"
        :width="item.width"
        :fixed="i === 0"
      >
        <view class="cell">{{ record[item.prop] }}</view>
      </sar-table-cell>
      <sar-table-cell fixed="right" width="120rpx">
        <view class="cell">
          <sar-button size="small">编辑</sar-button>
        </view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

<script setup lang="ts">
import { columns, data } from './data'
</script>

<style lang="scss" scoped>
.cell {
  padding: 12rpx 16rpx;
  white-space: nowrap;
}
</style>

合并行或列 ​

不同于 HTMLTableCellElement 使用 rowSpan 和 colSpan 属性合并行或列。在 sar-table 中需要使用 flex 布局的思维来合并单元格。且同一列的单元格需要设置相同的宽度，跨多列的单元格宽度为其跨越的列的宽度的和。

vue
<template>
  <sar-table bordered>
    <sar-table-row>
      <sar-table-cell width="360rpx">
        <sar-table-row>
          <sar-table-cell width="80rpx">
            <view class="py-12 px-16 flex-1 sbg-secondary">姓名</view>
          </sar-table-cell>
          <sar-table-cell width="100rpx">
            <view class="py-12 px-16 flex-1">张三</view>
          </sar-table-cell>
          <sar-table-cell width="80rpx">
            <view class="py-12 px-16 flex-1 sbg-secondary">性别</view>
          </sar-table-cell>
          <sar-table-cell width="100rpx">
            <view class="py-12 px-16 flex-1">男</view>
          </sar-table-cell>
        </sar-table-row>
        <sar-table-row>
          <sar-table-cell width="80rpx">
            <view class="py-12 px-16 flex-1 sbg-secondary">民族</view>
          </sar-table-cell>
          <sar-table-cell width="100rpx">
            <view class="py-12 px-16 flex-1">汉</view>
          </sar-table-cell>
          <sar-table-cell width="80rpx">
            <view class="py-12 px-16 flex-1 sbg-secondary">电话</view>
          </sar-table-cell>
          <sar-table-cell width="100rpx">
            <view class="py-12 px-16 flex-1">138***</view>
          </sar-table-cell>
        </sar-table-row>
        <sar-table-row>
          <sar-table-cell width="80rpx">
            <view class="py-12 px-16 flex-1 sbg-secondary">职称</view>
          </sar-table-cell>
          <sar-table-cell width="280rpx">
            <view class="py-12 px-16 flex-1">自媒体运营</view>
          </sar-table-cell>
        </sar-table-row>
      </sar-table-cell>
      <sar-table-cell width="100rpx">
        <view class="py-12 px-16 flex-1">照片</view>
      </sar-table-cell>
    </sar-table-row>

    <sar-table-row>
      <sar-table-cell width="80rpx">
        <view class="py-12 px-16 flex-1 sbg-secondary">个人亮点</view>
      </sar-table-cell>
      <sar-table-cell width="380rpx">
        <view class="py-12 px-16 flex-1">
          擅长结合热点事件与受众兴趣，创作出具有病毒式传播潜力的内容，多次策划的内容在社交媒体上获得百万级阅读量。
        </view>
      </sar-table-cell>
    </sar-table-row>
  </sar-table>
</template>

API ​

TableProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
bordered给单元格添加边框booleanfalse
underline给单元格添加下边框booleanfalse
height设置表格高度以便可以固定表头string-

TableSlots ​

插槽描述属性
default自定义默认内容-

TableRowProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
fixed固定列到表格顶部booleanfalse

TableRowSlots ​

插槽描述属性
default自定义默认内容-

TableCellProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
fixed固定单元到表格左边或右边，true 表示左边boolean | 'left' | 'right'-
width设置单元格宽度占比，可以带单位或不带单位string'1'
bold单元格字体加粗booleanfalse

TableCellSlots ​

插槽描述属性
default自定义默认内容-

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-table-border-color: var(--sar-border-color);
  --sar-table-bg: var(--sar-emphasis-bg);

  --sar-table-row-fixed-bg: var(--sar-emphasis-bg);

  --sar-table-cell-fixed-bg: var(--sar-emphasis-bg);
  --sar-table-fixed-left-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
  --sar-table-fixed-right-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}

CSS 变量 - 暗黑模式 ​

scss
@include theme-dark {
  --sar-table-fixed-left-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, 0.75);
  --sar-table-fixed-right-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.75);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao