@blueking/ediatable

支持 Vue2/Vue3 版本无差别使用

安装

npm i @blueking/ediatable

使用

vue2/vue3框架下使用

<template>
  <Ediatable :thead-list="theadList">
    <!-- thead-list 等价写法 -->
    <!-- <template #default>
      <RenderTableHeadColumn
        required
        :min-width="120"
        :width="450"
      >
        <span>目标集群</span>
      </RenderTableHeadColumn>
      <RenderTableHeadColumn
        fixed="right"
        :required="false"
        :width="100"
      >
        操作
      </RenderTableHeadColumn>
    </template> -->
    <template #data>
      <RenderRow
        v-for="(item, index) in tableData"
        :key="item.rowKey"
        ref="rowRefs"
        :data="item"
        @add="payload => handleAppend(index, payload)"
        @remove="handleRemove(index)"
      />
    </template>
  </Ediatable>
  <Button
    theme="primary"
    @click="handleSubmit"
  >
    提交
  </Button>
</template>
<script setup lang="tsx">
  import { ref } from 'vue';

  import { Ediatable } from '@blueking/ediatable';
  import('@blueking/ediatable/vue3/vue3.css');

  const rowRefs = ref();
  const tableData = ref([createRowData()]);

  const theadList: IHead[] = [
    {
      minWidth: 120,
      title: '目标集群',
      width: 450,
      renderAppend: () => <span style='color: red;margin-left:5px;font-size:10px'>必填</span>,
    },
    {
      fixed: 'right',
      required: false,
      title: '操作',
      width: 100,
    },
  ];

  // 追加一个集群
  const handleAppend = (index: number, appendList: Array<IDataRow>) => {
    tableData.value.splice(index + 1, 0, ...appendList);
  };

  // 删除一个集群
  const handleRemove = (index: number) => {
    tableData.value.splice(index, 1);
  };

  const handleSubmit = async () => {
    const params = await Promise.all(rowRefs.value.map((item: { getValue: () => any }) => item.getValue()));
    console.log('params>>>', params);
  };
</script>

RenderRow.vue参考代码

推荐自定义表格的行组件，将每一列的组件纳入其中统一管理，便于后期的增删及交互处理。

<template>
  <tr>
    <td>
      <RenderTargetCluster
        ref="clusterRef"
        :data="data.cluster"
        @input-finish="handleInputFinish"
      />
    </td>
    <td>
      <TextPlainColumn
        :data="data.nodeType"
        :is-loading="data.isLoading"
        placeholder="输入集群后自动生成"
      />
    </td>
    <td>
      <RenderTargetNumber
        ref="numRef"
        :data="data.targetNum"
        :disabled="!data.cluster"
        :is-loading="data.isLoading"
      />
    </td>
    <td>
      <RenderKeyRelated
        required
        ref="includeKeyRef"
      />
    </td>
    <td>
      <RenderTargetDateTime
        ref="timeRef"
        :data="data.targetDateTime"
        :is-loading="data.isLoading"
      />
    </td>
    <td>
      <RenderSwitchMode
        ref="switchModeRef"
        :data="data.switchMode"
        :is-loading="data.isLoading"
      />
    </td>
    <OperationColumn
      :removeable="removeable"
      show-copy
      @add="handleAppend"
      @remove="handleRemove"
    />
  </tr>
</template>
<script lang="ts">
  import _ from 'lodash';
  import { OperationColumn, TextPlainColumn } from '@blueking/ediatable';
  // 下面这几个都是自定义列组件
  import RenderTargetCluster from './cluster-name.vue';
  import RenderSwitchMode from './switch-mode.vue';
  import RenderTargetNumber from './target-number.vue';
  import RenderKeyRelated from './regex-keys.vue';
  import RenderTargetDateTime from './target-datetime.vue';

  export interface IDataRow {
    rowKey?: string;
    isLoading?: boolean;
    cluster: string;
    nodeType?: string;
    switchMode?: string;
    targetNum?: number;
    targetDateTime?: string;
  }

  const random = () => `${_.random(0, 999999)}_${Date.now()}_${_.random(0, 999999)}`;

  // 创建表格行数据
  export const createRowData = (data?: IDataRow): IDataRow => ({
    rowKey: random(),
    isLoading: false,
    cluster: data?.cluster ?? '',
    nodeType: data?.nodeType ?? '',
    switchMode: data?.switchMode ?? '',
  });
</script>
<script setup lang="ts">
  import { ref } from 'vue';
  interface Props {
    data: IDataRow;
    removeable: boolean;
  }

  interface Emits {
    (e: 'add', params: Array<IDataRow>): void;
    (e: 'remove'): void;
    (e: 'clusterInputFinish', value: string): void;
  }

  interface Exposes {
    getValue: () => Promise<{
      cluster: string;
      target_num: number;
      include_keys: string[];
      target_time: string;
      mode: string;
    }>;
  }

  const props = defineProps<Props>();

  const emits = defineEmits<Emits>();

  const clusterRef = ref<InstanceType<typeof RenderTargetCluster>>();
  const numRef = ref<InstanceType<typeof RenderTargetNumber>>();
  const includeKeyRef = ref<InstanceType<typeof RenderKeyRelated>>();
  const timeRef = ref<InstanceType<typeof RenderTargetDateTime>>();
  const switchModeRef = ref<InstanceType<typeof RenderSwitchMode>>();

  const handleInputFinish = (value: string) => {
    emits('clusterInputFinish', value);
  };

  const handleAppend = () => {
    emits('add', [createRowData()]);
  };

  const handleRemove = () => {
    if (props.removeable) {
      return;
    }
    emits('remove');
  };

  defineExpose<Exposes>({
    async getValue() {
      return await Promise.all([
        clusterRef.value!.getValue(),
        numRef.value!.getValue(),
        includeKeyRef.value!.getValue(),
        timeRef.value!.getValue(),
        switchModeRef.value!.getValue(),
      ]).then(data => {
        const [cluster, target_num, include_keys, target_time, mode] = data;
        return {
          cluster,
          target_num,
          include_keys,
          target_time,
          mode,
        };
      });
    },
  });
</script>

RenderTargetCluster.vue参考代码

其他自定义列组件也可参考进行封装

<template>
  <InputColumn
    ref="editRef"
    v-model="localValue"
    placeholder=”请输入或选择集群"
    :rules="rules"
    @submit="value => handleInputFinish(value)"
  />
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';

  import { InputColumn } from '@blueking/ediatable';

  interface Props {
    data?: string;
  }

  interface Emits {
    (e: 'input-finish', value: string): void;
  }

  interface Exposes {
    getValue: () => Promise<string>;
  }

  const props = withDefaults(defineProps<Props>(), {
    data: '',
    inputed: () => [],
  });

  const emits = defineEmits<Emits>();

  const localValue = ref(props.data);
  const editRef = ref();

  const rules = [
    {
      validator: (value: string) => Boolean(value),
      message: '目标集群不能为空',
    },
  ];

  watch(
    () => props.data,
    data => {
      localValue.value = data;
    },
    {
      immediate: true,
    },
  );

  const handleInputFinish = (value: string) => {
    emits('input-finish', value);
  };

  defineExpose<Exposes>({
    getValue() {
      return editRef.value.getValue().then(() => localValue.value);
    },
  });
</script>

属性列表

属性名	描述	属性类型	默认值
theadList	表头列表配置	`Array<IHead>`	[]

IHead

属性名	描述	属性类型	默认值
fixed	表头列是否固定	`right 或 left 或 undefined`	undefined
maxWidth	表头列最大宽度	`number 或 undefined`	undefined
minWidth	表头列最小宽度	`number 或 undefined`	undefined
memo	列名hover时的提示	`string 或 undefined`	undefined
required	是否必填标志	`boolean`	true
title	表头列名	`string 或 undefined`	undefined
width	表头列宽度	`number 或 undefined`	undefined
renderAppend	表头列名之后追加的元素	`() => JSX.Element 或 undefined`	undefined

Slots插槽

名称	描述
default	表头
data	列表

可编辑列基础组件(基于bkui-vue3组件库)

IRule

属性名	描述	属性类型	默认值
validator	校验函数	`(value: any) => boolean 或 Promise<boolean>`	无
message	校验出错提示	`string 或 (() => string)`	无

输入框组件

组件引用

<script lang="ts">
  import { InputColumn } from '@blueking/ediatable';
</script>

属性列表

属性名	描述	属性类型	默认值
rules	校验规则配置	`IRule[]`	undefined

其他配置同 bkui-vue3 的 Input 组件

Emits事件列表

事件名	参数	参数类型	描述
submit	value	`string 或 number`	输入完成事件
error	value	`boolean`	校验报错事件
clear			清空事件｜

Exposes事件列表

事件名	描述
getValue	校验并获取最新值
focus	组件聚焦

时间选择器组件

组件引用

<script lang="ts">
  import { DateTimePickerColumn } from '@blueking/ediatable';
</script>

组件属性

属性名	描述	属性类型	默认值
rules	校验规则配置	`IRule[]`	undefined

其他配置同 bkui-vue3 的 TimerPicker 组件

Emits事件列表

事件名	参数	参数类型	描述
change	value	`[string, string] 或 string`	选择完成事件
error	value	`boolean`	校验报错事件

Exposes事件列表

事件名	描述
getValue	校验并获取最新值

下拉选框组件

组件引用

<script lang="ts">
  import { SelectColumn } from '@blueking/ediatable';
</script>

组件属性

属性名	描述	属性类型	默认值
rules	校验规则配置	`IRule[]`	undefined

其他配置同 bkui-vue3 的 Select 组件

Emits事件列表

事件名	参数	参数类型	描述
change	value	`string 或 number`	选择完成事件
error	value	`boolean`	校验报错事件

Exposes事件列表

事件名	描述
getValue	校验并获取最新值

TagInput输入框组件

组件引用

<script lang="ts">
  import { TagInputColumn } from '@blueking/ediatable';
</script>

组件属性

属性名	描述	属性类型	默认值
rules	校验规则配置	`IRule[]`	undefined

其他配置同 bkui-vue3 的 TagInput 组件

Emits事件列表

事件名	参数	参数类型	描述
change	value	`string[]`	输入完成事件
error	value	`boolean`	校验报错事件

Exposes事件列表

事件名	描述
getValue	校验并获取最新值

Slots插槽

名称	描述
tip	聚焦后的 popover 提示

纯文本展示组件

组件引用

<script lang="ts">
  import { TagInputColumn } from '@blueking/ediatable';
</script>

组件属性

属性名	描述	属性类型	默认值
data	文本内容	`string 或 number 或 undefined`	undefined
isLoading	是否加载中	`boolean 或 undefined`	undefined
placeholder	空白提示	`string 或 undefined`	undefined
rules	校验规则配置	`IRule[] 或 undefined`	undefined

Exposes事件列表

事件名	描述
getValue	校验并获取最新值

操作列组件

组件引用

<script lang="ts">
  import { OperationColumn } from '@blueking/ediatable';
</script>

组件属性

属性名	描述	属性类型	默认值
removeable	删除图标是否可用	`boolean`	true
showCopy	是否展示行克隆图标	`boolean`	false
showAdd	是否展示添加图标	`boolean`	true
showRemove	是否展示删除图标	`boolean`	true

Emits事件列表

事件名	参数	参数类型	描述
add			添加事件
copy			克隆事件
remove			删除事件

固定列组件

组件引用

<script lang="ts">
  import { FixedColumn } from '@blueking/ediatable';
</script>

组件属性

属性名	描述	属性类型	默认值
fixed	是否固定列	`left 或 right`	right

表头列组件

组件引用

<script lang="ts">
  import { HeadColumn } from '@blueking/ediatable';
</script>

组件属性

同 IHead 配置

Slots插槽

名称	描述
default	表头
append	表头追加元素

@blueking/ediatable

支持 Vue2/Vue3 版本 无差别使用

安装

使用

vue2/vue3框架下使用

RenderRow.vue参考代码

RenderTargetCluster.vue参考代码

属性列表

IHead

Slots插槽

可编辑列基础组件(基于bkui-vue3组件库)

IRule

输入框组件

组件引用

属性列表

Emits事件列表

Exposes事件列表

时间选择器组件

组件引用

组件属性

Emits事件列表

Exposes事件列表

下拉选框组件

组件引用

组件属性

Emits事件列表

Exposes事件列表

TagInput输入框组件

组件引用

组件属性

Emits事件列表

Exposes事件列表

Slots插槽

纯文本展示组件

组件引用

组件属性

Exposes事件列表

操作列组件

组件引用

组件属性

Emits事件列表

固定列组件

组件引用

组件属性

表头列组件

组件引用

组件属性

Slots插槽

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

支持 Vue2/Vue3 版本无差别使用

Weekly Downloads