vue+ts+element-ui 동적 생성 동적 폼

카탈로그

1, 일부 설명

2, 주요render 함수의 쓰기

3, 데이터 구조

4. 폼 컨트롤의 쓰기

5. 상위 레벨에서 작성된 데이터 획득

6、demo

1. 설명
본문은 vue-cli에 기초를 두고 있다.xtsvue 항목에 쓰인 2.x의 친구는 좀 더 고쳐야 할 수도 있습니다. 현재는 간단한 표일 뿐이고 후기에는 후속 업데이트가 있을 수도 있습니다.
2. 주요render 함수의 쓰기
이것은 주요render 함수입니다

import input from './Input';
import select from './Select';
import radio from './Radio';
import checkbox from './CheckBox'
import textarea from './Textarea'
import textdesc from './TextDesc'
import { Vue, Component, Prop } from 'vue-property-decorator';


const form_item :any = {
  input,
  select,
  radio,
  checkbox,
  textarea,
  textdesc
};

@Component
export default class extends Vue {
  @Prop() obj !:any
  @Prop() value !: any
  @Prop() sure !:boolean
  @Prop() ele !: string
  @Prop() rinx !:number

  
  render(h :any) :any {
    let form_prop = {
      props: {
        prop: this.obj.name,
        label: this.ele == 'textdesc' ? "" : `${this.rinx + 1}、${this.obj.label}：`,
        rules: this.obj.required ? [{ required: true, message: '      ', trigger: 'blur' }] : []
      }
    }
    return h('el-form-item', 
    form_prop, 
    [h('pre', {}, this.obj.desc),form_item[this.ele](this, h)]);
    //                  []
    //       form_item[this.ele](this, h)
  }
} 

render 함수의 해석

h('el-form-item', 
     {
      props: {
        prop: this.obj.name,
        label: this.ele == 'textdesc' ? "" : `${this.rinx + 1}、${this.obj.label}：`,
        rules: this.obj.required ? [{ required: true, message: '      ', trigger: 'blur' }] : []
      }
    },
    [h('pre', {}, this.obj.desc),form_item[this.ele](this, h)]);

el-form-item은 el-form-item을 쓰는 html 노드를 가리킨다.

<el-form-item>el-form-item>

props는 귀속이 필요한 props를 가리킨다

<el-form-item  :prop='obj.name' :label='obj.label'>el-form-item>

마지막 항목은 바로 그 내용입니다.

<el-form-item  :prop='obj.name' :label='obj.label'>
	<pre>{{ obj.desc }}pre>
el-form-item>

3. 데이터 구조
여기는 나 자신의 정의이지 규정된 문법이 아니다.

 let qestion :any = {
 			// type  item      input select 
	       ele: type,
	       obj: {
	         label: '  ',
	         //       item      
	         name: type + this.list.length, 
	         desc:'',
	         //      
	         required: type == 'textdesc' ? false : true
	       }
	     }

4. 폼 컨트롤의 쓰기
El-input을 예로 들면

export default (_self :any, h :any) => {
  return [
    h("el-input", {
      props: {
        value: _self.value, //      value
      },
      'class': {
        inp: true //       class
      },
      on: {
        "input": function (val :any) {
          if (!_self.obj.name) {
            return false;
          }
          
		//          ，      event      null
          let current: any = event && event.currentTarget ? event.currentTarget : ''
          _self.$emit('handleChangeVal', current.value, _self.obj.name)
        }
      }
    })
  ];
};

el-select를 예로 들다

export default (_self: any, h: any) => {
  return [
    h("el-select", {
      props: {
        placeholder: _self.obj.placeholder || "       ",
        value: _self.value
      },
      on: {
        "change": function (val: any) {
          if (!_self.obj.name) {
            return false;
          }
          _self.$emit('handleChangeVal', val, _self.obj.name)
        }
      }
    },
      _self.obj.items.map((v:any) => {
        return h("el-option", {
          props: {
            label: v.label,
            value: v.label,
            disabled: v.diss,
          },
        })
      }))
  ];
};

강조:el-radio와el-checkbox, 값 변경은change가 아닌 input
5. 부급에서 작성한 데이터를 얻는다

//                emit     
handleChangeVal(val :any,ele_name :any){
      this.$set(['object   '], ele_name, val);
    }

6、demo
시간 나면 다시 업데이트할게요.