JVxetable自定义组件（vue3.0）

---

一、参考链接

https://www.jianshu.com/p/f4668a0da259

二、代码实现

1.引入库

代码如下（示例）以颜色选择器组件为例：

<template>
  <div>
    <a-input
      style="display: inline-block; width: 60%; position: relative; top: -5px"
      ref="input"
      :value="innerValue"
      v-bind="cellProps"
      @blur="handleBlur"
      @change="handleChange"
    />
    <colorPicker
      style="display: inline-block; width: 10%"
      v-model="colorValue"
      @change="selectColorPicker"
      :size="'small'"
      show-alpha
      :color-format="'rgb'"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { JVxeComponent, JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
  import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
  import { colorPicker } from '/@/components/colorPicker';
  const colorValue = ref();

  export default defineComponent({
    name: 'JVxeColorCell',
    components: { colorPicker },
    props: useJVxeCompProps(),
    setup(props: JVxeComponent.Props) {
      const { innerValue, cellProps, handleChangeCommon } = useJVxeComponent(props);

      function selectColorPicker(event) {
        console.log('event', event);
        innerValue.value = event;
        handleChangeCommon(event, true);
      }

      /** 处理change事件 */
      function handleChange(event) {
        let { target } = event;
        let { value, selectionStart } = target;
        let change = true;
        // 触发事件，存储输入的值
        if (change) {
          handleChangeCommon(value);
        }
      }

      /** 处理blur失去焦点事件 */
      function handleBlur(event) {
        let { target } = event;
        handleChangeCommon(target.value, true);
      }

      return {
        innerValue,
        cellProps,
        colorValue,
        selectColorPicker,
        handleChange,
        handleBlur,
      };
    },
    enhanced: {
      installOptions: {
        autofocus: '.ant-input',
      },
      getValue(value, ctx) {
        colorValue.value = value;
        return value;
      },
    } as JVxeComponent.EnhancedPartial,
  });
</script>
<style lang="less" scoped>
  /deep/ .ant3-color-picker--small {
    width: 32px;
    height: 32px;
    /* padding-top: 3px; */
    top: 5px;
    left: 5px;
    padding: 0;
  }
</style>