@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/table/custom-head.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="row">
+    <bk-table
+      :columns="columns"
+      :data="tableData"
+    />
+  </div>
+</template>
+
+<script lang="jsx">
+  import { random } from 'lodash';
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS, DATA_TABLE } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        isLoading: false,
+        tableData: DATA_TABLE.map((d, index) => Object.assign({}, d, { msg: index * random(0, 20, true) })),
+        dynamicColumn: 'create_time',
+      };
+    },
+    computed: {
+      columns() {
+        return [{
+          label: () => {
+            /* eslint-disable */
+            return <div style="display: flex; align-items: center;">
+            <label>自定义组件：</label>
+            <bk-select
+              v-model={ this.dynamicColumn }
+              filterable
+              auto-focus>
+              {
+                DATA_COLUMNS.filter(col => !!col.field)
+                  .map(col =>  <bk-option key={ col.field } value={ col.field } label={ col.field }>
+                  </bk-option>)
+              }
+            </bk-select>
+          </div>
+          },
+          field: this.dynamicColumn,
+          sort: true,
+        }, {
+          label: () => '自定义字符串: 来源',
+          field: 'source',
+        }];
+      },
+    },
+  });
+</script>
+<style scoped>
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.cell {
+  flex: 1;
+  margin: 0 5px 0 5px;
+}
+</style>

package/knowledge/examples/table/data-empty-cell.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="row">
+    <bk-table
+      :columns="columns"
+      :data="tableData"
+      :settings="settings"
+      :show-overflow-tooltip="overflowTooltip"
+      empty-cell-text="--"
+      stripe
+      @cell-click="handleCellClick"
+      @cell-dblclick="handleCellDblclick"
+      @column-sort="handleSortBy"
+      @dblclick="handleDblClick"
+      @row-mouse-enter="handleMouseEnter"
+      @row-mouse-leave="handleMouseLeave"
+    />
+  </div>
+</template>
+
+<script lang="jsx">
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS } from './options';
+  const DATA_TABLE = [
+    {
+      ip: '192.168.0.1-2018-05-25 15:02:241',
+      source: false,
+      status: '创建中',
+      create_time: '2018-05-25 15:02:241',
+    },
+    {
+      ip: '192.168.0.2',
+      source: null,
+      status: '正常',
+      create_time: undefined,
+      selected: false,
+    },
+    {
+      ip: '192.168.0.3',
+      source: 'QQ',
+      status: '',
+      create_time: '2018-05-25 15:02:243',
+      selected: null,
+    },
+    {
+      ip: '192.168.0.3',
+      source: 0,
+      status: '',
+      create_time: '2018-05-25 15:02:244',
+      selected: true,
+    },
+    {
+      ip: '192.168.0.3',
+      source: 'QQ',
+      status: '创建中',
+      create_time: '2018-05-25 15:02:24',
+      selected: false,
+    },
+  ];
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        isLoading: false,
+        tableData: DATA_TABLE,
+        columns: [...DATA_COLUMNS],
+        overflowTooltip: {
+          popoverOption: {
+            maxWidth: 400,
+          },
+        },
+        settings: {
+          fields: [
+            {
+              name: '序号',
+              id: 'index',
+              disabled: true,
+            },
+            {
+              name: '名称/内网IP',
+              id: 'ip',
+            },
+            {
+              name: '来源',
+              id: 'source',
+            },
+            {
+              name: '创建时间',
+              id: 'create_time',
+            },
+          ],
+          checked: ['ip', 'index'],
+        },
+      };
+    },
+    methods: {
+      handleCellClick(arg) {
+        const { cell, row, column } = arg;
+        console.log('handleCellClick', cell, row, column, cell.getValue());
+      },
+      handleCellDblclick(arg) {
+        const { cell, row, column } = arg;
+        console.log('handleCellDblclick', cell, row, column, cell.getValue());
+      },
+      handleSortBy(arg) {
+        console.log('handleSortBy', arg);
+      },
+      handleDblClick(...args) {
+        console.log(args);
+      },
+      handleMouseEnter(...args) {
+        console.log('mouse-enter', args);
+      },
+      handleMouseLeave(...args) {
+        console.log('mouse-leave', args);
+      },
+    },
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0 5px 0 5px;
+  }
+</style>

package/knowledge/examples/table/data-empty.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h3>空数据</h3>
+    <div style="width: 100%; height: 300px">
+      <bk-table
+        :columns="columns"
+        :data="[]"
+        empty-text="没有数据"
+      />
+    </div>
+    <h3>过滤为空-试试过滤来源为 Email</h3>
+    <div style="width: 100%; height: 300px">
+      <bk-table
+        :border="['outer']"
+        :columns="columns"
+        :data="tableData"
+        empty-text="没有数据"
+      />
+    </div>
+    <h3>自定义空数据-empty插槽</h3>
+    <div style="width: 100%; height: 300px">
+      <bk-table
+        :columns="columns"
+        :data="[]"
+      >
+        <template #empty>
+          <div :style="emptyTextStyle">EMPTY</div>
+        </template>
+      </bk-table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS, DATA_TABLE } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        columns: [...DATA_COLUMNS],
+        activeRowInfo: {},
+        tableData: [...DATA_TABLE],
+      };
+    },
+    computed: {
+      emptyTextStyle() {
+        return 'width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 30px;';
+      },
+    },
+  });
+</script>

package/knowledge/examples/table/event.vue

@@ -0,0 +1,40 @@
+<template>
+  <div style="width: 100%; height: 300px">
+    <bk-table
+      :columns="columns"
+      :data="tableData"
+      :is-row-select-enable="isRowSelectEnable"
+      @row-click="handleRowClick"
+      @select="handleRowSelect"
+    />
+    <span>on row click: {{ `index: ${activeRowInfo.index}` }}</span>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_COLUMNS, DATA_TABLE } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        tableData: [...DATA_TABLE],
+        columns: [{ type: 'selection', width: 20 }, ...DATA_COLUMNS],
+        activeRowInfo: {},
+      };
+    },
+    methods: {
+      isRowSelectEnable({ index }) {
+        return index % 3 === 0;
+      },
+      handleRowSelect(arg) {
+        console.log('handleRowSelect', arg);
+      },
+      handleRowClick(e, row, index, rows, source) {
+        Object.assign(this.activeRowInfo, { e, row, index, rows, source });
+        console.log('active row', this.activeRowInfo);
+      },
+    },
+  });
+</script>

package/knowledge/examples/table/expand.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="cell">
+      <bk-button @click="handleSetAllRowExpand"> 展开|收起所有 </bk-button>
+      <bk-table
+        ref="refTable1"
+        :columns="columns"
+        :data="tableData"
+        @row-click="handleRowClick"
+        @row-expand="handleRowExpand"
+      >
+        <template #expandContent>
+          <span>Content</span>
+        </template>
+
+        <template #expandRow>
+          <span>Row Content</span>
+        </template>
+      </bk-table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_EXPAND_COLUMNS, DATA_TABLE } from './options';
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        tableData: [...DATA_TABLE],
+        columns: [...DATA_EXPAND_COLUMNS],
+        isExpand: false,
+      };
+    },
+    methods: {
+      handleRowClick(e, row) {
+        console.log('handleRowClick', row);
+        row.priority = row.priority + 1;
+      },
+      handleSetAllRowExpand() {
+        this.isExpand = !this.isExpand;
+        this.$refs.refTable1.setAllRowExpand(this.isExpand);
+      },
+      handleRowExpand({ row, column, index, rows, e }) {
+        // 可以通过自定义逻辑，阻止事件冒泡
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        e.preventDefault();
+
+        console.log('handleRowExpand', row, column, index, rows);
+      },
+    },
+  });
+</script>
+<style scoped>
+  .row {
+    display: flex;
+    width: 100%;
+  }
+
+  .cell {
+    flex: 1;
+    margin: 0px 5px 20px 5px;
+  }
+</style>

package/knowledge/examples/table/filter-scope.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="cell">
+      <span class="title">默认过滤: scope = current, match = fuzzy</span>
+      <bk-table :columns="columns" :data="tableData" :pagination="pagination" @column-filter="handleFilter"
+        @column-sort="handleSortBy" />
+    </div>
+    <div class="cell">
+      <span class="title">filter scope = all, match = fuzzy,</span>
+      <bk-table :columns="columns1" :data="tableData" :pagination="pagination" @dblclick="handleDblClick" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+
+import { DATA_COLUMNS, DATA_COLUMNS1 } from './options';
+const DATA_ROWS = new Array(Math.ceil(Math.random() * 100) + 100).fill('').map((_, index) => ({
+  ip: `${index}--192.168.0.x`,
+  source: `${index}_QQ`,
+  status: '创建中',
+  create_time: `2018-05-25 15:02:24.${index}`,
+}));
+export default defineComponent({
+  components: {},
+  data() {
+    return {
+      columns: [...DATA_COLUMNS],
+      columns1: [...DATA_COLUMNS1],
+      tableData: DATA_ROWS,
+      pagination: { count: DATA_ROWS.length, limit: 10 },
+    };
+  },
+
+  methods: {
+    handleSortBy(arg) {
+      console.log('handleSortBy', arg);
+    },
+    handleDblClick(...args) {
+      console.log(args);
+    },
+    handleFilter(...args) {
+      console.log('handleFilter', ...args);
+    }
+  },
+});
+</script>
+<style scoped>
+.row {
+  display: flex;
+  width: 100%;
+}
+
+.cell {
+  flex: 1;
+  margin: 0px 5px 20px 5px;
+}
+</style>

package/knowledge/examples/table/fixed.vue

@@ -0,0 +1,24 @@
+<template>
+  <div style="height: 300px;">
+    <bk-table :columns="columns" :data="tableData" :max-height="maxHeight" @scroll-bottom="handleScrollBottom" />
+  </div>
+</template>
+
+<script setup type="jsx">
+import { defineComponent, ref, computed, reactive } from 'vue';
+import { DATA_FIX_COLUMNS, DATA_FIX_TABLE } from './options';
+const t = (str) => str;
+
+const tableData = reactive(DATA_FIX_TABLE);
+
+const columns = computed(() => DATA_FIX_COLUMNS);
+
+const maxHeight = ref(300);
+
+const handleDblClick = (...args) => {
+  console.log(args);
+}
+const handleScrollBottom = (args) => {
+  console.log('handleScrollBottom', args);
+}
+</script>

package/knowledge/examples/table/flex-layout.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div class="table-layout-demo">
+      <bk-table
+        :columns="columns"
+        :data="tableData"
+        :pagination="pagination"
+        :pagination-heihgt="60"
+        is-flex
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+
+  import { DATA_FIX_COLUMNS } from './options';
+  const DATA_ROWS = new Array(Math.ceil(Math.random() * 100) + 100).fill('').map((_, index) => ({
+    ip: `${index}--192.168.0.x`,
+    source: `${index}_QQ`,
+    status: '创建中',
+    create_time: `2018-05-25 15:02:24.${index}`,
+  }));
+
+  export default defineComponent({
+    components: {},
+    data() {
+      return {
+        tableData: DATA_ROWS,
+        columns: DATA_FIX_COLUMNS.map(item => ({ ...item })),
+        pagination: { count: DATA_ROWS.length, limit: 10 },
+      };
+    },
+  });
+</script>
+<style>
+  .table-layout-demo {
+    width: 100%;
+    height: 400px;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    overflow: auto;
+  }
+</style>