• change事件
• click事件
• focus事件
• blur事件
• enter事件

组件事件

vue2

vue3

目前组件有 5 个事件`change`,`click`,`focus`,`blur`,`enter`

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({
  name: '11'
});

const option = ref({
  column: [{
    label: '姓名',
    prop: 'name',
    change: ({ value, column }) => {
      ElMessage.success('change事件查看控制台');
      console.log('值改变', value, column);
    },
    click: ({ value, column }) => {
      ElMessage.success('click事件查看控制台');
      console.log('点击事件', value, column);
    },
    focus: ({ value, column }) => {
      ElMessage.success('focus事件查看控制台');
      console.log('获取焦点', value, column);
    },
    blur: ({ value, column }) => {
      ElMessage.success('blur事件查看控制台');
      console.log('失去焦点', value, column);
    },
    enter: ({ value, column }) => {
      ElMessage.success('enter事件查看控制台');
      console.log('回车事件', value, column);
    }
  }]
});
</script>

组件对象

提示

• input-table 组件实际用法

vue2

vue3

<template>
  <tvue-form ref="formRef"
             v-model="form"
             :option="option"></tvue-form>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({});
const formRef = ref(null)
const option = {
  labelWidth: 120,
  column: [{
    label: '测试框',
    prop: 'text',
  }]
};

onMounted(() => {
  setTimeout(() => {
    ElMessage.success('查看控制台');
    console.log('text的ref对象')
    console.log(formRef.value.getPropRef('text').$refs.temp)
  });
});
</script>

组件交互

vue2

vue3

可以写判断逻辑，返回对应改变的对象属性

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  text1: 0,
});

const option = ref({
  column: [
    {
      label: "内容1",
      prop: "text1",
      type: "radio",
      control: (val, form) => {
        if (val === 0) {
          return {
            text2: {
              display: true,
            },
            text3: {
              label: "内容3",
            },
          };
        } else {
          return {
            text2: {
              display: false,
            },
            text3: {
              label: "有没有发现我变了",
            },
          };
        }
      },
      dicData: [
        {
          label: "显示",
          value: 0,
        },
        {
          label: "隐藏",
          value: 1,
        },
      ],
    },
    {
      label: "内容2",
      prop: "text2",
      display: true,
      control: (val, form) => {
        return new Promise((resolve) => {
          if (val) {
            resolve({
              text1: {
                label: "改变内容1",
              },
            });
          } else {
            resolve({
              text1: {
                label: "内容1",
              },
            });
          }
        });
      },
    },
    {
      label: "内容3",
      prop: "text3",
    },
  ],
});
</script>