数值联动

数值联动

通过设置watcher可以监听表单数据变化

<template>
  <RenderForm :fields="fields" :watcher="watcher"></RenderForm>
</template>
<script>
export default {
  name: "Watcher",
  data() {
    return {
      fields: [
        {
          label: "数值联动",
          children: [
            {
              key: "key1",
              label: "字段1",
            },
            {
              key: "key2",
              label: "显示字段1的值",
            },
          ],
        },
      ],
      watcher: {
        key1(value, data) {
          data.key2 = "字段1的值是：" + value;
        },
      },
    };
  },
};
</script>
<style lang="css" scoped></style>

Expand Copy Copy

数值与属性联动

<template>
  <RenderForm :fields="fields" :watcher="watcher" ref="form"></RenderForm>
</template>
<script>
export default {
  name: "Watcher",
  data() {
    return {
      fields: [
        {
          label: "数值联动",
          children: [
            {
              key: "key1",
              label: "后一个元素的disabled",
              type: "radio",
              options: [
                {
                  value: true,
                  label: "true",
                },
                {
                  value: false,
                  label: "false",
                },
              ],
            },
            {
              key: "key2",
              label: "显示字段1的值",
            },
          ],
        },
      ],
      watcher: {
        key1(value, data, updateField) {
          updateField("key2", { disabled: value });
        },
      },
    };
  },
};
</script>
<style lang="css" scoped></style>

Expand Copy Copy