SOURCE

console 命令行工具 X clear

                    
>
console
<div id="app">
	<el-button @click="addAll" size="small" type="primary">添加10条子表单数据</el-button>
	</br></br>
	<avue-form :option="option" v-model="obj">
		<template slot-scope="{row}" slot="input">
			<el-tag>{{row}}</el-tag>
		</template>
	</avue-form>
</div>
<script>
	new Vue({
         el:'#app',
    data() {
    return {
        obj: {
          dynamic: [{
            ''
          }]
        },
        option: {
          labelWidth: 110,
          column: [{
            label: '输入框',
            prop: "input1",
            span:12,
            row: true
          },
          {
            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",
                formslot: true,
              }, {
                width: 200,
                label: '选择框',
                prop: "select",
                type: 'select',
                rules:[{
                  type:'number',
                  required:true,
                  message:'请选择选择框',
                }],
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '多选',
                prop: "checkbox",
                type: 'checkbox',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '开关',
                prop: "switch",
                type: 'switch',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '数字框',
                prop: "number",
                type: 'number'
              }]
            }
          },

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

</script>

本项目引用的自定义外部资源