自定义组件

如果现有的组件无法满足业务需求，我们可以通过自定义组件进行扩展。

首先需要先定义一个组件，这个组件的功能是将数值缩小100倍显示：

<template>
  <el-input :value="showValue" v-bind="attrs" v-on="listeners"></el-input>
</template>
<script>
export default {
  name: "CustomInput",
  props: {
    value: [String, Number],
  },
  data() {
    return {};
  },
  computed: {
    showValue() {
      return (this.value / 100).toFixed();
    },
    attrs() {
      return {
        ...this.$attrs,
      };
    },
    listeners() {
      return {
        ...this.$listeners,
        input: this.onInput,
      };
    },
  },
  methods: {
    onInput(value) {
      console.log(value);
      this.$emit("input", value * 100);
    },
  },
};
</script>

然后在使用v-render时注册：

import VRender from "@v-render";
import CustomInput from "./components/CustomInput.vue";

Vue.use(VRender, {
  "custom-input": { // 组件的type名
    component: CustomInput, // 自定义组件
    handler(options) { // 自定义组件的配置处理方法
      if (options.defaultValue === "") {
        options.defaultValue = 0;
      }
    },
  },
});

最后只要在配置fields时，设置type为我们配置的名称custom-input就可以使用自定义组件了。（左边为自定义组件，右边显示自定义组件的值）

<template>
  <RenderForm :fields="fields" :watcher="watcher"></RenderForm>
</template>
<script>
export default {
  name: "Custom",
  data() {
    return {
      fields: [
        {
          label: "自定义组件",
          children: [
            {
              key: "price",
              label: "价格",
              type: "custom-input",
            },
            {
              key: "show",
              label: "实际的值",
              textModel: true,
            },
          ],
        },
      ],
      watcher: {
        price(value, data) {
          data.show = value;
        },
      },
    };
  },
};
</script>
<style lang="css" scoped></style>

Expand Copy Copy