Dynamic子表单

TIP

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

表格用法

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

配置dynamic的children字段即可

<template>
  <el-button @click="addAll"
             type="primary">添加10条子表单数据</el-button>
  <br /><br />
  <avue-form :option="option"
             v-model="form">
    <template #input="{row}">
      <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        dynamic: [{
          input: 1,
          select: 1
        }, {
          input: 2,
          select: 2
        }]
      },
      option: {
        column: [
          {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            children: {
              align: 'center',
              headerAlign: 'center',
              rowAdd: (done) => {
                this.$message.success('新增回调');
                done({
                  input: '默认值'
                });
              },
              rowDel: (row, done) => {
                this.$message.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
                }]
              }]
            }
          },

        ]
      }
    }
  },
  methods: {
    addAll () {
      for (let i = 0; i < 10; i++) {
        this.obj.dynamic.push({
          input: 1,
          select: 1
        })
      }
    }
  }
}
</script>

显示代码复制代码复制代码

表单用法

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

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

<template>
  <avue-form :option="option"
             v-model="form">
    <template #input="{row}">
      <el-tag>序号:{{row.$index}}-数据:{{row.input}}</el-tag>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        dynamic: [{
          input: 1,
          select: 1
        }, {
          input: 2,
          select: 2
        }]
      },
      option: {
        column: [
          {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            children: {
              index: false,
              align: 'center',
              type: 'form',
              headerAlign: 'center',
              rowAdd: (done) => {
                this.$message.success('新增回调');
                done({
                  input: '默认值'
                });
              },
              rowDel: (row, done) => {
                this.$message.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
                }]
              }]
            }
          },

        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

父子联动

<template>
  <avue-form :key="reload"
             :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {},
      reload: Math.random(),
    }
  },
  watch: {
    'form.province' () {
      this.reload = Math.random()
    }
  },
  computed: {
    option () {
      return {
        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/` + this.form.province,
                rules: [
                  {
                    required: true,
                    message: '请选择城市',
                    trigger: 'blur'
                  }
                ]
              }]
          }
        }]
      }
    }
  }
}
</script>

显示代码复制代码复制代码