@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/table/index.tsx

@@ -0,0 +1,495 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { defineComponent } from 'vue';
+
+import DemoBox from '../../components/demo-box';
+import DemoTitle from '../../components/demo-title';
+import PropsBox from '../../components/props-box';
+import basic from './basic.vue';
+import basicFilter from './basic-filter.vue';
+import basicSort from './basic-sort.vue';
+import basicSortBehavior from './basic-sort-behavior.vue';
+import BasicSpan from './basic-span.vue';
+import bordered from './bordered.vue';
+import cellRender from './cell-render';
+import TableTplTsx from './column-template';
+import ColumnTemplate from './column-template.vue';
+import ColumnTplIndex from './column-template-index.vue';
+import configList from './config';
+import CustomHead from './custom-head.vue';
+import DataEmpty from './data-empty.vue';
+import DataEmptyCell from './data-empty-cell.vue';
+import event from './event.vue';
+import Expand from './expand.vue';
+import filterScope from './filter-scope.vue';
+import fixed from './fixed.vue';
+import flexLayout from './flex-layout.vue';
+import MultiHeader from './multi-header.vue';
+import * as TABLE_DATA from './options';
+import pagination from './pagination.vue';
+import RemotePagination from './remotePagination.vue';
+import ScrollHorizontal from './scroll-horizontal.vue';
+import ScrollLoading from './scroll-loading.vue';
+import ScrollLoadingSlot from './scroll-loading-slot.vue';
+import Selection from './selection.vue';
+import virtualRender from './virtual-render.vue';
+
+export default defineComponent({
+  components: {
+    basic,
+    bordered,
+    virtualRender,
+    cellRender,
+    event,
+    pagination,
+    RemotePagination,
+    DataEmpty,
+    DataEmptyCell,
+    fixed,
+    ScrollLoading,
+    ScrollLoadingSlot,
+    Expand,
+    basicFilter,
+    basicSort,
+    filterScope,
+    ColumnTemplate,
+    Selection,
+    BasicSpan,
+    ColumnTplIndex,
+    TableTplTsx,
+    CustomHead,
+    flexLayout,
+    basicSortBehavior,
+    ScrollHorizontal,
+    MultiHeader,
+  },
+  render() {
+    const configs = [
+      {
+        attrs: {
+          title: '基础用法',
+          subtitle: '基础用法，用于表单内容的录入',
+          desc: '通过 stripe 设置是否为斑马纹',
+          componentName: 'table',
+          demoName: 'basic',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <basic></basic>,
+      },
+      {
+        attrs: {
+          title: '基础用法: min-width',
+          subtitle: 'min-width',
+          desc: '通过 min-width 设置最小列宽',
+          componentName: 'table',
+          demoName: 'scroll-horizontal',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <ScrollHorizontal></ScrollHorizontal>,
+      },
+      {
+        attrs: {
+          title: '基础用法-模板方式调用 bk-column',
+          subtitle: '基础用法，用于表单内容的录入',
+          desc: 'props: 支持 `field` 和 `prop`两种配置，配置效果一样',
+          componentName: 'table',
+          demoName: 'column-template',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <ColumnTemplate></ColumnTemplate>,
+      },
+      {
+        attrs: {
+          title: '多表头 & append-last-row实现统计功能',
+          subtitle: '基础用法，用于表单内容的录入',
+          desc: 'props: 支持 `field` 和 `prop`两种配置，配置效果一样',
+          componentName: 'table',
+          demoName: 'multi-header',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <MultiHeader></MultiHeader>,
+      },
+      {
+        attrs: {
+          title: '自定义Column index渲染',
+          subtitle: 'column.index <bk-table-column></bk-table-column>',
+          desc: '如果需要通过<bk-table-column></bk-table-column>方式渲染列表，但是列是动态可变的，可以通过指定列的index来保证表格列的排序，一般情况组件会自动获取排序，如果是深度定制的表格组件，可以通过指定index保证排序的正确性',
+          componentName: 'table',
+          demoName: 'column-template-index',
+          suffix: '.vue',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <ColumnTplIndex></ColumnTplIndex>,
+      },
+      {
+        attrs: {
+          title: '自定义Column index渲染',
+          subtitle: 'column.index <bk-table-column></bk-table-column>',
+          desc: '如果需要通过<bk-table-column></bk-table-column>方式渲染列表，但是列是动态可变的，可以通过指定列的index来保证表格列的排序，一般情况组件会自动获取排序，如果是深度定制的表格组件，可以通过指定index保证排序的正确性',
+          componentName: 'table',
+          demoName: 'column-template',
+          suffix: '.tsx',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <TableTplTsx></TableTplTsx>,
+      },
+      {
+        attrs: {
+          title: '设置边框',
+          subtitle: '设置边框显示样式',
+          desc: 'props: border',
+          componentName: 'table',
+          demoName: 'bordered',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <bordered></bordered>,
+      },
+      {
+        attrs: {
+          title: '自定义头部',
+          subtitle: 'custom head',
+          desc: 'props: border',
+          componentName: 'table',
+          demoName: 'custom-head',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <CustomHead></CustomHead>,
+      },
+      {
+        attrs: {
+          title: '启用虚拟滚动-渲染大数据表格',
+          subtitle: '大数据模式启用虚拟滚动',
+          desc: 'props: virtual-enabled',
+          componentName: 'table',
+          demoName: 'virtual-render',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <virtual-render></virtual-render>,
+      },
+      {
+        attrs: {
+          title: '自定义Column渲染',
+          subtitle: '自定义Column渲染',
+          desc: 'props: column.render',
+          componentName: 'table',
+          demoName: 'cell-render',
+          suffix: '.tsx',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <cell-render></cell-render>,
+      },
+
+      {
+        attrs: {
+          title: 'Events',
+          subtitle: 'table select event',
+          desc: 'event: select',
+          componentName: 'table',
+          demoName: 'event',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <event></event>,
+      },
+      {
+        attrs: {
+          title: 'Pagination - Local',
+          subtitle: '分页配置',
+          desc: 'props: pagination',
+          componentName: 'table',
+          demoName: 'pagination',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <pagination></pagination>,
+      },
+      {
+        attrs: {
+          title: 'Pagination - Remote',
+          subtitle: '分页配置: remote-pagination = true',
+          desc: 'props: pagination',
+          componentName: 'table',
+          demoName: 'remotePagination',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <RemotePagination></RemotePagination>,
+      },
+      {
+        attrs: {
+          title: 'Empty - 空数据提示',
+          subtitle: '',
+          desc: 'props: --',
+          componentName: 'table',
+          demoName: 'data-empty',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <data-empty></data-empty>,
+      },
+      {
+        attrs: {
+          title: '单元格空数据展示',
+          subtitle: '',
+          desc: 'props: --',
+          componentName: 'table',
+          demoName: 'data-empty-cell',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <data-empty-cell></data-empty-cell>,
+      },
+      {
+        attrs: {
+          title: '固定列',
+          subtitle: '横纵内容过多时，可选择固定列',
+          desc: 'props: column - fixed',
+          componentName: 'table',
+          demoName: 'fixed',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <fixed></fixed>,
+      },
+      {
+        attrs: {
+          title: '底部加载',
+          subtitle: '配置底部加载更多',
+          desc: '配置scroll-loading属性设置表格底部加载样式，结合scroll-end监听表格滚动至底部事件进行分页加载',
+          componentName: 'table',
+          demoName: 'scroll-loading',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <ScrollLoading></ScrollLoading>,
+      },
+      {
+        attrs: {
+          title: '底部加载插槽',
+          subtitle: '自定义配置底部加载更多,需要设置 scroll-loading = true',
+          desc: '配置scroll-loading属性设置表格底部加载样式，结合scroll-end监听表格滚动至底部事件进行分页加载',
+          componentName: 'table',
+          demoName: 'scroll-loading-slot',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <ScrollLoadingSlot></ScrollLoadingSlot>,
+      },
+      {
+        attrs: {
+          title: '折叠功能',
+          subtitle: '结合slot expandRow',
+          desc: '',
+          componentName: 'table',
+          demoName: 'expand',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <Expand></Expand>,
+      },
+      {
+        attrs: {
+          title: '自定义过滤配置',
+          subtitle: '自定义保存 & 重置按钮',
+          desc: '',
+          componentName: 'table',
+          demoName: 'basic-filter',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <basicFilter></basicFilter>,
+      },
+      {
+        attrs: {
+          title: '过滤范围',
+          subtitle: '通过设置filterScope设置过滤范围为当前页面还是全部数据，如果是all，则过滤完毕会重置分页为首页',
+          desc: '',
+          componentName: 'table',
+          demoName: 'filter-scope',
+        },
+        /**
+         * Table
+         * @returns
+         */
+        component: () => <filterScope></filterScope>,
+      },
+      {
+        attrs: {
+          title: '排序范围',
+          subtitle: '通过设置sortScope设置排序范围为当前页面还是全部数据',
+          desc: '',
+          componentName: 'table',
+          demoName: 'basic-sort',
+        },
+        /**
+         * basicSort
+         * @returns
+         */
+        component: () => <basicSort></basicSort>,
+      },
+      {
+        attrs: {
+          title: '列排序行为',
+          subtitle: '* independent：列与列之间的排序是独立的，互斥的 * interdependent：列排序是相互影响、依赖的',
+          desc: '',
+          componentName: 'table',
+          demoName: 'basic-sort-behavior',
+        },
+        /**
+         * basicSort
+         * @returns
+         */
+        component: () => <basicSortBehavior></basicSortBehavior>,
+      },
+      {
+        attrs: {
+          title: 'Selection',
+          subtitle: '内置选择功能',
+          desc: '',
+          componentName: 'table',
+          demoName: 'selection',
+        },
+        /**
+         * basicSort
+         * @returns
+         */
+        component: () => <Selection></Selection>,
+      },
+      {
+        attrs: {
+          title: '表格合并',
+          subtitle: 'colspan & rowspan',
+          desc: '',
+          componentName: 'table',
+          demoName: 'basic-span',
+        },
+        /**
+         * basicSort
+         * @returns
+         */
+        component: () => <BasicSpan></BasicSpan>,
+      },
+    ];
+
+    /**
+     * eventColumnMap
+     * @returns
+     */
+    const eventColumnMap = {
+      name: '名称',
+      desc: '说明',
+      params: '参数',
+    };
+
+    const qAColumMap = {
+      name: '问题',
+      desc: '说明',
+    };
+
+    const renderMap = {
+      QA: qAColumMap,
+      events: eventColumnMap,
+    };
+    return (
+      <div>
+        <DemoTitle
+          desc='Table组件， 为页面和功能提供列表。'
+          designLink='https://bkdesign.bk.tencent.com/design/35'
+          name='Table'
+        />
+        {configs.map(cfg => (
+          <DemoBox
+            {...cfg.attrs}
+            optionData={TABLE_DATA}
+          >
+            {cfg.component()}
+          </DemoBox>
+        ))}
+        {configList.map(cfg => (
+          <div>
+            <PropsBox
+              columnMap={renderMap[cfg.type]}
+              propsData={cfg.config}
+              subtitle={cfg.subTile}
+              title={cfg.title}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+});

package/knowledge/examples/table/multi-header.vue

@@ -0,0 +1,218 @@
+<template>
+  <h2>bk-table-column 模板模式：</h2>
+  <bk-table
+    :data="projectTable"
+    :height="500"
+    :pagination="pagination"
+    :append-last-row="appendLastRow"
+  >
+    <bk-table-column
+      type="index"
+      label="序号"
+      width="80"
+    ></bk-table-column>
+    <bk-table-column
+      :label="() => h('span', { style: { color: 'red' } }, ['用户组'])"
+      prop="groupName"
+    >
+      <bk-table-column
+        label="用户描述"
+        prop="groupDesc"
+      />
+      <bk-table-column
+        label="有效期"
+        prop="validityPeriod"
+      >
+        <template #default="{ data }">xx{{ data.validityPeriod }}</template>
+      </bk-table-column>
+    </bk-table-column>
+
+    <bk-table-column
+      label="加入时间"
+      prop="joinedTime"
+    />
+  </bk-table>
+  <h2>props.columns 绑定模式：</h2>
+  <bk-table
+    :append-last-row="appendLastRow"
+    :data="projectTable"
+    :columns="columns"
+    :height="500"
+    :pagination="pagination"
+  >
+  </bk-table>
+</template>
+
+<script lang="jsx" setup>
+  import { ref, reactive, h } from 'vue';
+  const pagination = ref({ count: 11, limit: 10, current: 1 });
+  const getColLabel = () => h('span', { class: 'col-label', style: { color: 'red', fontWeight: '800' } }, '用户组');
+
+  const columns = reactive([
+    {
+      label: '序号',
+      type: 'index',
+      width: 80,
+    },
+    {
+      label: '用户组',
+      children: [
+        {
+          label: '操作员1',
+          field: 'operator',
+        },
+        {
+          label: '操作员2',
+          field: 'operator',
+        },
+      ],
+    },
+    {
+      label: '用户描述',
+      field: 'groupDesc',
+    },
+    {
+      label: '有效期',
+      field: 'validityPeriod',
+    },
+    {
+      label: '加入时间',
+      field: 'joinedTime',
+    },
+  ]);
+
+  const appendLastRow = {
+    type: 'summary',
+    cellRender: (column, index) => {
+      if (index === 0) {
+        return <span style='font-weight: 700; color: red;'>统计</span>;
+      }
+
+      return index + 10;
+    },
+  };
+
+  const projectTable = ref([
+    {
+      groupId: 1,
+      groupName: '11',
+      groupDesc: '用户描述1',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: true,
+    },
+    {
+      groupId: 2,
+      groupName: '22',
+      groupDesc: '用户描述2',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 3,
+      groupName: '33',
+      groupDesc: '用户描述3',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 4,
+      groupName: '44',
+      groupDesc: '用户描述4',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 5,
+      groupName: '55',
+      groupDesc: '用户描述5',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 6,
+      groupName: '66',
+      groupDesc: '用户描述6',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 7,
+      groupName: '77',
+      groupDesc: '用户描述7',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 8,
+      groupName: '88',
+      groupDesc: '用户描述8',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 9,
+      groupName: '99',
+      groupDesc: '用户描述9',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 10,
+      groupName: '1010',
+      groupDesc: '用户描述10',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+    {
+      groupId: 11,
+      groupName: '1111',
+      groupDesc: '用户描述11',
+      validityPeriod: '0505',
+      joinedTime: '08-18',
+      operateSource: '加入组',
+      operator: '张三',
+      removeMemberButtonControl: false,
+    },
+  ]);
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0 5px 0 5px;
+  }
+</style>