TUI

<template>
  <TsTable :columns="commonColumns" :dataSource="commonDataSource" />
</template>

<script setup lang="ts">
const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="fitWidthColumns" :dataSource="fitDataSource" single-line>
    <template #deliveryAreas="{ row }">
      <div class="tag-wrap">
        <TsTag v-for="(item, index) in row.deliveryAreas" :key="index">{{ item }}</TsTag>
      </div>
    </template>
  </TsTable>
</template>
<script setup lang="ts">
const fitWidthColumns = [
  { title: '产品编号', key: 'productCode', width: 100 },
  { title: '产品名称', key: 'productName' },
  { title: '供应商ID', key: 'supplierId' },
  { title: '供应商密钥', key: 'supplierSecret' },
  { title: '库存数量', key: 'stockCount' },
  { title: '保质期(天)', key: 'shelfLife' },
  { title: '商品出厂时间', key: 'productFinishTime' },
  { title: '商品检验时间', key: 'productCheckTime' },
  { title: '上架时间', key: 'createdAt' },
  { title: '更新时间', key: 'updatedAt' },
];

const fitDataSource = [
  {
    productId: 'p10001',
    productCode: 'PRD-001',
    productName: '智能手表 X1',
    supplierId: 'SUP-100',
    supplierSecret: 'sec-abc123xyz82abc123xyz82881881',
    deliveryAreas: ['华东', '华南', '西南'],
    isHot: true,
    isNew: false,
    isFreeShipping: true,
    isLimited: false,
    stockCount: 120,
    shelfLife: 365,
    productType: '电子产品',
    productFinishTime: '2025-01-15 10:22:33',
    productCheckTime: '2025-03-20 15:10:12',
    createdAt: '2025-01-15 10:22:33',
    updatedAt: '2025-03-20 15:10:12',
  },
];
</script>

<style scoped>
.tag-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: 6px;
}
</style>

<template>
  <TsTable :columns="commonColumns" :dataSource="ofDataSource" />
</template>

<script setup lang="ts">
const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const ofDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  {
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <TsTable :columns="ofColumns" :dataSource="ofDataSource" />
</template>
<script setup lang="ts">
const ofColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address', showOverflowTooltip: true },
];

const ofDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  {
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <TsTable :columns="slotTooltipColums" :dataSource="commonDataSource">
    <template #age="{ row }">
      <TsTooltip :content="row.age" :placements="['top-center', 'top-start', 'top-end', 'left-start', 'right-start', 'right-center']">
        <span style="height: 100%; line-height: 22px; padding: 9px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; width: 100%">
          {{ row.age }} -- 我接管了这里的内容来超出悬浮展示，你看不到我，你看不到我，你看不到我, 这是一个很长的文案来保证超出悬浮效果展示
        </span>
      </TsTooltip>
    </template>
  </TsTable>
  <div class="ts-doc-tip">注意：使用 slot 自定义渲染内容时，请确保自行处理 overflow 样式，避免内容溢出遮挡其他列。</div>
</template>

<script setup lang="ts">
const slotTooltipColums = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', custom: true },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>
<style scoped>
.ts-doc-tip {
  margin-top: 12px;
  padding: 8px 12px;
  background-color: var(--ts-bg-gray-color);
  border-left: 4px solid #ccc;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ts-color-primary);
}
</style>

<template>
  <TsTable :columns="expandCustomColumns" :dataSource="ofDataSource"></TsTable>
</template>
<script setup lang="ts">
const expandList = [{ name: '查看' }, { name: '编辑' }, { name: '删除', type: 'danger' }, { name: '驳回' }, { name: '提交' }, { name: '预览' }, { name: '下载' }];

const expandCustomColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
  { title: '操作', key: 'expand', expandList, custom: true },
];
const ofDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  {
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <TsTable border :headerBg="true" :columns="commonColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="indexColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const indexColumns = [
  { title: 'index', key: 'index' },
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="selectionColumns" :dataSource="commonDataSource" />
</template>

<script setup lang="ts">
const selectionColumns = [
  {
    title: 'selection',
    key: 'selection',
    disabled: (row: any) => {
      return row.name === 'John Brown';
    },
  },
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="renderColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const renderColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', render: (row: any) => row.age + '岁' },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <div class="component-card-demo-wrap-center">
    <TsButton @click="autoFitOnDataChange = !autoFitOnDataChange">{{ autoFitOnDataChange ? '关闭动态计算' : '开启动态计算' }}</TsButton>
    <TsButton @click="handleAddDataSource">增加数据数据</TsButton>
  </div>
  <TsTable :columns="commonColumns" :autoFitOnDataChange="autoFitOnDataChange" singleLine :autoFit="false" :dataSource="orginDataSource" />
</template>
<script setup lang="ts">
import { ref } from 'vue';

const autoFitOnDataChange = ref(false);
const orginDataSource = ref([{ name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }]);

const commonColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address' },
];

const handleAddDataSource = () => {
  orginDataSource.value.push({
    name: 'Joe Black is a good name',
    age: 32,
    address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',
  });
};
</script>

<template>
  <TsTable :columns="renderColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const renderColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', render: (row: any) => row.age + '岁' },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :columns="renderColumns" :dataSource="commonDataSource" />
</template>
<script setup lang="ts">
const renderColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', render: (row: any) => row.age + '岁' },
  { title: 'address', key: 'address' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
</script>

<template>
  <TsTable :autoFit="false" :columns="childrenColumns" :dataSource="childrenDateSource" />
</template>

<script setup lang="ts">
const childrenColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age', width: 'auto' },
  { title: 'address', key: 'address', width: 200 },
  { title: 'action', key: 'action', width: 100 },
];

const childrenDateSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  {
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    children: [
      { name: 'his brother', age: 32, address: 'Sydney No. 1 Lake Park' },
      { name: 'his sister', age: 30, address: 'Sydney No. 1 Lake Park' },
    ],
  },
  {
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
];
</script>

<template>
  <TsTable singleLine :columns="scrollColumns" :dataSource="commonDataSource">
    <template #expand>
      <div class="docs-table-expand-wrap ts-select-none">
        <div class="docs-table-expand-item">查看</div>
        <div class="docs-table-expand-item">预览</div>
      </div>
    </template>
  </TsTable>
  <TsTable :autoFit="false" :columns="longColumns" :dataSource="longDataSource" singleLine>
    <template #deliveryAreas="{ row }">
      <div class="tag-wrap">
        <TsTag v-for="(item, index) in row.deliveryAreas" :key="index">{{ item }}</TsTag>
      </div>
    </template>
  </TsTable>
</template>
<script setup lang="ts">
const scrollColumns = [
  { title: 'name', key: 'name' },
  { title: 'age', key: 'age' },
  { title: 'address', key: 'address', width: 1500 },
  { title: '操作', key: 'expand', custom: true, fixed: 'right' },
];
const commonDataSource = [
  { name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },
  { name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
  { name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },
];
const longColumns = [
  { title: '产品编号', key: 'productCode' },
  { title: '产品名称', key: 'productName'},
  { title: '供应商ID', key: 'supplierId'},
  { title: '供应商密钥', key: 'supplierSecret', showOverflowTooltip: true },
  { title: '库存数量', key: 'stockCount' },
  { title: '保质期(天)', key: 'shelfLife' },
  { title: '是否热销', key: 'isHot', render: (row: any) => (row.isHot ? '是' : '否') },
  { title: '是否新品', key: 'isNew', render: (row: any) => (row.isNew ? '是' : '否') },
  { title: '支持配送区域', key: 'deliveryAreas', custom: true, minWidth: 200 },
  { title: '是否包邮', key: 'isFreeShipping', render: (row: any) => (row.isFreeShipping ? '是' : '否') },
  { title: '是否限购', key: 'isLimited', render: (row: any) => (row.isLimited ? '是' : '否') },
  { title: '商品类型', key: 'productType' },
  { title: '上架时间', key: 'createdAt' },
  { title: '更新时间', key: 'updatedAt'},
  { title: '操作', key: 'actions', custom: true, fixed: 'right' },
];
const longDataSource = [
  {
    productId: 'p10002',
    productCode: 'PRD-002',
    productName: '蓝牙耳机 AirLite',
    supplierId: 'SUP-101',
    supplierSecret: 'sec-xyz789qwxyz789qweisiajakkeisiajakk',
    deliveryAreas: ['华北', '东北', '西北', '华中'],
    isHot: false,
    isNew: true,
    isFreeShipping: false,
    isLimited: true,
    stockCount: 50,
    shelfLife: 180,
    productType: '音频设备',
    createdAt: '2025-02-01 09:12:45',
    updatedAt: '2025-03-21 11:00:00',
  },
  {
    productId: 'p10003',
    productCode: 'PRD-003',
    productName: '空气净化器 Pro',
    supplierId: 'SUP-102',
    supplierSecret: 'sec-555aaa7770555aaa77708s82jskak8s82jskak',
    deliveryAreas: ['全国'],
    isHot: true,
    isNew: true,
    isFreeShipping: true,
    isLimited: false,
    stockCount: 300,
    shelfLife: 720,
    productType: '家用电器',
    createdAt: '2025-02-10 14:35:20',
    updatedAt: '2025-03-22 13:25:56',
  },
  {
    productId: 'p10004',
    productCode: 'PRD-004',
    productName: '运动水杯 Max',
    supplierId: 'SUP-103',
    supplierSecret: 'sec-999bbb3999bbb333sajslalallsl33sajslalallsl',
    deliveryAreas: ['华东', '华中'],
    isHot: false,
    isNew: false,
    isFreeShipping: true,
    isLimited: true,
    stockCount: 200,
    shelfLife: 1095,
    productType: '生活用品',
    createdAt: '2025-03-01 08:50:05',
    updatedAt: '2025-03-23 18:45:33',
  },
];
</script>

<style scoped>
.tag-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: 6px;
}
</style>