提示

这里子子表单只能用于简单的场景，复杂的场景可以利用Form自定义嵌入一个Crud行编辑

表格用法

内部组件为crud组件，大部分属性参考Crud文档

vue2

vue3

配置`dynamic`的`children`字段即可

<template>
  <el-button @click="addAll"
             type="primary">添加10条子表单数据</el-button>
  <br /><br />
  <tvue-form :option="option"
             v-model="form">
    <template #input="{row}">
      <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
    </template>
  </tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({
  dynamic: [
    { input: 1, select: 1 },
    { input: 2, select: 2 }
  ]
});

const option = {
  column: [
    {
      label: '子表单',
      prop: 'dynamic',
      type: 'dynamic',
      span: 24,
      children: {
        align: 'center',
        headerAlign: 'center',
        rowAdd: (done) => {
          ElMessage.success('新增回调');
          done({ input: '默认值' });
        },
        rowDel: (row, done) => {
          ElMessage.success('删除回调' + JSON.stringify(row));
          done();
        },
        column: [
          {
            width: 200,
            label: '输入框',
            prop: 'input'
          },
          {
            label: '选择框',
            prop: 'select',
            type: 'select',
            dicData: [
              { label: '测试1', value: 1 },
              { label: '测试2', value: 2 }
            ]
          }
        ]
      }
    }
  ]
};

function addAll () {
  for (let i = 0; i < 10; i++) {
    form.value.dynamic.push({ input: 1, select: 1 });
  }
}
</script>

表单用法

内部组件为form组件，大部分属性参考Form文档

vue2

vue3

配置`type`为`form`类型即可转化为表单格式，配置`index`为`false`即可隐藏序号

<template>
  <tvue-form :option="option"
             v-model="form">
    <template #input="{ row }">
      <el-tag>序号:{{ row.$index }}-数据:{{ row.input }}</el-tag>
    </template>
  </tvue-form>
</template>

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

const form = ref({
  dynamic: [
    { input: 1, select: 1 },
    { input: 2, select: 2 }
  ]
});

const option = ref({
  column: [
    {
      label: '子表单',
      prop: 'dynamic',
      type: 'dynamic',
      span: 24,
      children: {
        index: false,
        align: 'center',
        type: 'form',
        headerAlign: 'center',
        rowAdd: (done) => {
          ElMessage.success('新增回调'); // 使用 ElMessage
          done({ input: '默认值' });
        },
        rowDel: (row, done) => {
          ElMessage.success('删除回调' + JSON.stringify(row)); // 使用 ElMessage
          done();
        },
        column: [
          {
            width: 200,
            label: '输入框',
            prop: 'input'
          },
          {
            label: '选择框',
            prop: 'select',
            type: 'select',
            dicData: [
              { label: '测试1', value: 1 },
              { label: '测试2', value: 2 }
            ]
          }
        ]
      }
    }
  ]
});
</script>

父子联动

vue2

vue3

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

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

const baseUrl = 'https://cli.avuejs.com/api/area';

const form = ref({});
const reload = ref(Math.random());

watch(() => form.value.province, () => {
  reload.value = Math.random();
});

const option = computed(() => ({
  column: [
    {
      label: '省份',
      prop: 'province',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getProvince`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '子表单',
      prop: 'dynamic',
      type: 'dynamic',
      span: 24,
      children: {
        column: [
          {
            label: '城市',
            prop: 'city',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getCity/` + form.value.province,
            rules: [
              {
                required: true,
                message: '请选择城市',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  ]
}));
</script>