@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/table/column-template-index.vue

@@ -0,0 +1,66 @@
+<template>
+  <section>
+    <bk-table :data="tableData">
+      <bk-table-column
+        :filter="{ list: statusFilters }"
+        :label="'数量'"
+        :sort="sort"
+        field="count"
+      />
+      <template
+        v-for="column in columns"
+        :key="column.label"
+      >
+        <bk-table-column
+          :field="column.field"
+          :index="column.index"
+          :label="column.label"
+          :type="column.type"
+        />
+      </template>
+      <template v-if="showOptionColumn">
+        <bk-table-column label="操作">
+          <template #default="{}">
+            <bk-button theme="primary">Option</bk-button>
+          </template>
+        </bk-table-column>
+      </template>
+    </bk-table>
+  </section>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue';
+
+  import { DATA_TABLE } from './options';
+  const sort = reactive({ sortScope: 'all' });
+  const tableData = reactive(DATA_TABLE.map((d, index) => ({ ...d, count: index })));
+  const showOptionColumn = ref(true);
+  const t = str => str;
+  const statusFilters = reactive([
+    { text: t('已启用'), value: 'enabled' },
+    { text: t('未启用'), value: 'disabled' },
+  ]);
+  const columns = reactive([
+    {
+      label: '序号',
+      type: 'index',
+      index: 0,
+    },
+    {
+      label: '名称/内网IP',
+      field: 'ip',
+      index: 2,
+    },
+    {
+      label: '来源',
+      field: 'source',
+      index: 1,
+    },
+    {
+      label: '创建时间',
+      field: 'create_time',
+      index: 3,
+    },
+  ]);
+</script>

package/knowledge/examples/table/column-template.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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, reactive } from 'vue';
+
+import { DATA_TABLE } from './options';
+
+export default defineComponent({
+  setup() {
+    return () => {
+      const tableData = reactive([...DATA_TABLE]);
+
+      const columns = reactive([
+        {
+          label: '名称/内网IP',
+          field: 'ip',
+        },
+        {
+          label: '来源',
+          field: 'source',
+        },
+        {
+          label: '创建时间',
+          field: 'create_time',
+        },
+      ]);
+      return (
+        <div>
+          <bk-table data={tableData}>
+            {columns.map(column => (
+              <bk-table-column
+                field={column.field}
+                label={column.label}
+              ></bk-table-column>
+            ))}
+          </bk-table>
+        </div>
+      );
+    };
+  },
+});

package/knowledge/examples/table/column-template.vue

@@ -0,0 +1,129 @@
+<template>
+  <section>
+    <bk-button @click="handleColumnsIndexChange"> 打乱顺序 </bk-button>
+    <bk-table
+      height="auto"
+      :data="tableData"
+      :settings="settings"
+    >
+      <template
+        v-for="column in columns"
+        :key="column.label"
+      >
+        <bk-table-column
+          :field="column.field"
+          :index="column.index"
+          :label="column.label"
+          :type="column.type"
+          :width="column.width"
+        >
+          <template #default="{ data }">
+            {{ data[column.field] }}
+          </template></bk-table-column
+        >
+      </template>
+    </bk-table>
+    <h2>如何动态改变列的顺序</h2>
+    <h3>1、增加index属性(建议设置index，更新次数少，性能更好)，通过改变index属性触发`bk-table-column`更新</h3>
+    <code>
+      { label: '序号', type: 'index', width: '120px', index: 0 }, { label: '名称/内网IP', field: 'ip', width: '320px',
+      index: 1 }, ...
+    </code>
+    <br />
+    <br />
+    <code>
+      {{ `<bk-table-column
+        :label="column.label"
+        :type="column.type"
+        :field="column.field"
+        :width="column.width"
+        :index="column.index"
+      />` }}
+    </code>
+    <br />
+    <br />
+    <code>
+      {{
+        `const targetIndex = this.columns[2].index;
+        this.columns[2].index = this.columns[3].index;
+        this.columns[3].index = targetIndex;`
+      }}
+    </code>
+    <h3>
+      2、通过nextTicket 或者
+      setTimeout更新Column数组，先删除，再追加，保证两次更新间隔，避免只是更新Column数组顺序，绑定组件属性不变
+    </h3>
+    <code> const target = this.columns.splice(2, 1); setTimeout(() => { this.columns.push(...target); }); </code>
+  </section>
+</template>
+
+<script>
+  import { DATA_TABLE } from './options';
+  export default {
+    data() {
+      return {
+        tableData: [...DATA_TABLE],
+        count: 0,
+        columns: [
+          {
+            label: '序号',
+            type: 'index',
+            width: '120px',
+            index: 0,
+          },
+          {
+            label: '名称/内网IP',
+            field: 'ip',
+            width: '320px',
+            index: 1,
+          },
+          {
+            label: '来源',
+            field: 'source',
+            width: '120px',
+            index: 2,
+          },
+          {
+            label: '创建时间',
+            field: 'create_time',
+            width: '220px',
+            index: 3,
+          },
+        ],
+        settings: {
+          trigger: 'click',
+          fields: [
+            {
+              name: '序号',
+              id: 'index',
+            },
+            {
+              name: '名称/内网IP',
+              id: 'ip',
+            },
+            {
+              name: '来源',
+              id: 'source',
+            },
+            {
+              name: '创建时间',
+              id: 'create_time',
+            },
+          ],
+          checked: [],
+        },
+      };
+    },
+    methods: {
+      handleColumnsIndexChange() {
+        const targetIndex = this.columns[2].index;
+        this.columns[2].index = this.columns[3].index;
+        this.columns[3].index = targetIndex;
+        // const target = this.columns.splice(2, 1);
+        // setTimeout(() => {
+        //   this.columns.push(...target);
+        // });
+      },
+    },
+  };
+</script>