Table 表格

Table 表格组件是用于展示数据集的标准界面元素。

基础用法

<template>
    <cb-table>
        <template #colgroup>
            <col v-for="(head, index) in data.head" :key="index" :width="head.width"></col>
        </template>
        <template #thead>
            <tr>
                <th class="cb-font" v-for="(head, index) in data.head" :key="index">{{ head.label }}</th>
            </tr>
        </template>
        <template #tbody>
            <tr v-for="(body, index) in data.body" :key="index">
                <td class="cb-font" v-for="(line, index) in body">{{ line }}</td>
            </tr>
        </template>
    </cb-table>
</template>

<script setup>
import { ref } from 'vue'
import CbTable from '@/public/components/table/table.vue'

// 演示数据
const data = ref({
    head: [
        {
            label: 'DATE',
            width: '150px'
        },
        {
            label: 'NAME',
            width: '200px'
        },
        {
            label: 'STATE',
            width: '200px'
        },
        {
            label: 'MESSAGE'
        }
    ],
    body: []
})

for (let i = 0; i < 50; i++) {
    data.value.body.push({
        date: '05/09/2024',
        name: 'CB-' + (i < 10 ? '0' : '') + i,
        state: 'DESTROYED',
        message: 'NON'
    })
}
</script>

分割线

• 属性：line

• 类型：boolean | object

• 默认值：{ horizontal: false, vertical: true }

• 必须：否

• 使用示例：

<template>
    <cb-table :line="true">
        <template #colgroup>
            <col v-for="(head, index) in data.head" :key="index" :width="head.width"></col>
        </template>
        <template #thead>
            <tr>
                <th class="cb-font" v-for="(head, index) in data.head" :key="index">{{ head.label }}</th>
            </tr>
        </template>
        <template #tbody>
            <tr v-for="(body, index) in data.body" :key="index">
                <td class="cb-font" v-for="(line, index) in body">{{ line }}</td>
            </tr>
        </template>
    </cb-table>
</template>

<script setup>
// 重复内容不再描述
</script>

条纹

• 属性：stripe

• 类型：boolean

• 默认值：false

• 必须：否

• 示例：

<template>
    <cb-table :stripe="true">
        <template #colgroup>
            <col v-for="(head, index) in data.head" :key="index" :width="head.width"></col>
        </template>
        <template #thead>
            <tr>
                <th class="cb-font" v-for="(head, index) in data.head" :key="index">{{ head.label }}</th>
            </tr>
        </template>
        <template #tbody>
            <tr v-for="(body, index) in data.body" :key="index">
                <td class="cb-font" v-for="(line, index) in body">{{ line }}</td>
            </tr>
        </template>
    </cb-table>
</template>

<script setup>
// 重复内容不再描述
</script>