表单初始化

form/form-ajax/init

配置项服务端加载

提示

• 这里没有走真真的服务器请求，而是做了一个模拟

vue2

vue3

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

<template>
  <el-button type="primary"
             icon="el-icon-sort"
             @click="getOption">服务端加载</el-button>
  <tvue-form :key="reload"
             v-model="form"
             :option="option"
             v-loading="loading"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const reload = ref(Math.random());
const loading = ref(true);
const form = ref({});
const option = ref({});

function getOption () {
  ElMessage.success('模拟2s后服务端动态加载');
  setTimeout(() => {
    option.value = {
      border: true,
      align: 'center',
      menuAlign: 'center',
      column: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '省份',
          prop: 'province',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
          rules: [
            {
              required: true,
              message: '请选择省份',
              trigger: 'blur'
            }
          ]
        }
      ]
    };
    form.value = {
      name: '张三',
      sex: '男',
      province: '110000'
    };
    reload.value = Math.random();
    loading.value = false;
  }, 2000);
}
</script>

配置项切换

vue2

vue3

<template>
  <el-button type="primary"
             icon="el-icon-sort"
             @click="handleSwitch">切 换</el-button>
  <br /><br />
  <tvue-form :key="reload"
             v-model="form"
             :option="option"></tvue-form>
</template>

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

const reload = ref(Math.random());
const type = ref(true);
const form = ref({
  name: '张三',
  sex: '男',
  username: 'smallwei',
  password: 'smallwei'
});
const option = ref({});

const option1 = {
  addBtn: false,
  column: [
    {
      label: '昵称',
      prop: 'name'
    }
  ]
};

const option2 = {
  addBtn: false,
  column: [
    {
      label: '用户名',
      prop: 'username'
    },
    {
      label: '密码',
      prop: 'password',
      type: 'password'
    },
    {
      label: '姓名',
      prop: 'name'
    }
  ]
};

function handleSwitch () {
  type.value = !type.value;
  if (type.value) {
    option.value = option1;
  } else {
    option.value = option2;
  }
  reload.value = Math.random();
}

onMounted(() => {
  handleSwitch();
});
</script>

动态改变结构

vue2

vue3

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

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

const defaults = ref({});
const form = ref({
  text1: 0
});
const option = {
  column: [
    {
      label: '内容1',
      prop: 'text1',
      type: 'radio',
      dicData: [
        { label: '显示', value: 0 },
        { label: '隐藏', value: 1 }
      ]
    },
    {
      label: '内容2',
      prop: 'text2',
      display: true
    },
    {
      label: '内容3',
      prop: 'text3'
    }
  ]
};

watch(() => form.value.text1, (val) => {
  if (val == 0) {
    defaults.value.text2 = { ...defaults.value.text2, display: true };
    defaults.value.text3 = { ...defaults.value.text3, label: '内容3' };
  } else {
    defaults.value.text2 = { ...defaults.value.text2, display: false };
    defaults.value.text3 = { ...defaults.value.text3, label: '有没有发现我变了' };
  }
});
</script>