kubecube front components

# kube-table

kube-table 优化了表格加载样式，使用具名插槽的方式，可以适配更多情况，减少代码冗余，中间穿插 meta 数据，与源数据隔离，且与表格绑定，可以轻松实现展开收起，框选，排序等功能。

# Demo

副本名称IP副本状态重启次数CPU 使用量内存使用量创建时间操作
domain-registrar-65f4554c4d-mssmg192.168.28.253Running1040%60% 8/11/2021 查看详情 删除
domain-registrar-858c749f6d-8gxfg192.168.28.229Running1410%20% 8/11/2021 查看详情 删除

# Props

props description example
columns 列定义(name定义了数据结构中，数据所在结构的path) [ { name: 'demo.xxx.vvvv', title: '示例' } ]
items 行定义 [ { demo: 1 } ]
itemKey 行唯一键值（仅在选择行时有效）
maxHeight 最大高度（表格最大高度）
loading 表格数据加载状态
error 加载错误状态
resizable 表头是否可拖动

# Slots

具名插槽

# 列名具名插槽

[ { name: 'xxx.ccc.vvv', title: 'foo' } ] // columns 定义

对应的表格中会创建两个具名插槽，分别对应对表头和每行数据的插槽

<tempate>
<kube-table :columns="columns" :items="items">
    <template #[`column.xxx.ccc.vvv`]="{ column }">
        {{ column }}
    </template>
    <template #[`item.xxx.ccc.vvv`]="{ item, itemMeta, column }">
        {{ item }}
    </template>
</kube-table>
</template>
  • item 列数据
  • itemMeta 列元数据 { expand: false }
  • column 行定义

# 默认具名插槽

slot description props
error 加载错误时展示
noData 无数据时展示
expand 行展开内容 item: 单行数据

# Events

  • sort
@sort="(order, name) => {}"

<template>
  <kube-table
    :columns="columns"
    :items="items"
    itemKey="metadata.name"
  >
   <template #[`item.metadata.creationTimestamp`]="{ item }">
        {{ item.metadata.creationTimestamp | formatLocaleTime }}
        </template>
        <template #[`item.operation`]="{ item }">
            <a @click="view(item)">
                查看详情
            </a>
            <a @click="deleteItem(item)">
                删除
            </a>
        </template>
  </kube-table>
</template>

<script>
import kubeTable from '@kubecube/common/kube-table/index.vue';
export default {
    filters: {
        formatLocaleTime(val) {
            if (!val) return '-';
            const datetime = new Date(val);
            return new Intl.DateTimeFormat('zh-Hans-CN', { dateStyle: 'medium', timeStyle: 'medium' }).format(datetime);
        }
    },
    components: {
        kubeTable,
    },
    data() {
        return {
            columns: [
                { type: 'selection' },
                { title: '副本名称', name: 'metadata.name', sortable: true, textwrap: true },
                { title: 'IP', name: 'status.podIP', width: '100px' },
                { title: '副本状态', name: 'status.phase', width: '120px', sortable: true },
                { title: '重启次数', name: 'status.containerStatuses[0].restartCount', width: '70px' },
                { title: 'CPU 使用量', name: 'status.cpuUsage', width: '100px' },
                { title: '内存使用量', name: 'status.memoryUsage', width: '100px' },
                { title: '创建时间', name: 'metadata.creationTimestamp', width: '160px', sortable: true },
                { title: '操作', name: 'operation', width: '120px' },
            ],
            items: [
                {
                    "metadata": {
                        "name": "domain-registrar-65f4554c4d-mssmg",
                        "creationTimestamp": "2021-08-11T11:31:36Z"
                    },
                    "status": {
                        "containerStatuses": [
                            {
                                "containerID": "docker://78b05f7555baff1b7c936316aeb98a4a7143cc6e053f977a06777ed3c958b1af",
                                "image": "domain-registrar/domain-registrar:202108111",
                                "imageID": "docker://sha256:c74bd080b6e591af3417b720a8430927a500495f1ff30bc737e028ae4b2f44b3",
                                "lastState": {
                                    "terminated": {
                                        "containerID": "docker://8059b0f32766a2044bcc1b7b0334fbbcd41e41eeffdbe352eab11f21ccf77c87",
                                        "exitCode": 0,
                                        "finishedAt": "2021-08-24T02:09:00Z",
                                        "reason": "Completed",
                                        "startedAt": "2021-08-23T08:09:39Z"
                                    }
                                },
                                "name": "domain-registrar",
                                "ready": true,
                                "restartCount": 10,
                                "started": true,
                                "state": {
                                    "running": {
                                        "startedAt": "2021-08-24T02:10:59Z"
                                    }
                                }
                            }
                        ],
                        cpuUsage: '40%',
                        memoryUsage: '60%',
                        "hostIP": "10.173.32.129",
                        "phase": "Running",
                        "podIP": "192.168.28.253",
                        "podIPs": [
                            {
                                "ip": "192.168.28.253"
                            }
                        ],
                        "qosClass": "Guaranteed",
                        "startTime": "2021-08-17T03:08:23Z"
                    }
                },
                {
                    "metadata": {
                        "name": "domain-registrar-858c749f6d-8gxfg",
                        "creationTimestamp": "2021-08-11T11:32:01Z"
                    },
                    "status": {
                        "containerStatuses": [
                            {
                                "containerID": "docker://39c1b5fd436a897dd751f92dd5c26ba8dcca53f8a72f1bf42d1a883339fc2f80",
                                "image": "domain-registrar/domain-registrar:202108111",
                                "imageID": "docker://sha256:c74bd080b6e591af3417b720a8430927a500495f1ff30bc737e028ae4b2f44b3",
                                "lastState": {
                                    "terminated": {
                                        "containerID": "docker://968293c4eec165f3527e0792089cb865b63aa42a308624b27432b9f2c11b7068",
                                        "exitCode": 0,
                                        "finishedAt": "2021-08-24T02:09:00Z",
                                        "reason": "Completed",
                                        "startedAt": "2021-08-23T08:10:01Z"
                                    }
                                },
                                "name": "domain-registrar",
                                "ready": true,
                                "restartCount": 14,
                                "started": true,
                                "state": {
                                    "running": {
                                        "startedAt": "2021-08-24T02:12:30Z"
                                    }
                                }
                            }
                        ],
                        cpuUsage: '10%',
                        memoryUsage: '20%',
                        "hostIP": "10.173.32.129",
                        "phase": "Running",
                        "podIP": "192.168.28.229",
                        "podIPs": [
                            {
                                "ip": "192.168.28.229"
                            }
                        ],
                        "qosClass": "Burstable",
                        "startTime": "2021-08-11T11:32:01Z"
                    }
                }
            ]
        }
    },
    methods: {
        view() {

        },
        deleteItem() {

        }
    }
}
</script>

<style>

</style>

← x-request →