vueカスタムフォームコンポーネント

vueフォームコンポーネントのカスタマイズ

	

		

		
		

		
			{
    {btnText}}
			  
		
	



	export default {
		name: 'selectForm',
		props: {
			//        
			button: {
				type: Boolean,
				default: () => true
			},
			//label      
			right: {
				type: String,
				default: () => 'right'
			},
			//     type-  （input,select,checkbox;radio;button，date，datetimerange，daterange）；inputType-input    type；tips-    ；label-    ；placeholder-       ；clumn-   ；option:        ；btns-   
			formItem: {
				type: Array,
				default: () => []
			},
			//      
			formInline: {
				type: Object,
				default: () => {}
			},
			//       
			inline: {
				type: Boolean,
				default: () => true
			},
			//     
			ruleInline: {
				type: Object,
				default: () => {}
			},
			//    
     		btnText: {
        		type: String,
        		default: '  '
      		}	
		},
		data(){
			return {
			}
		},
		watch: {
			formInline:{
			    handler(newValue,oldValue){
			       this.formInline = newValue
			    },
			    deep:true
			},
		},
		methods: {
			changeSelect(item) {
				this.$emit('changeSelect', item)
			},
			//        
			onSubmit: function() {
		        this.$refs['formInline'].validate((valid) => {
		          if (valid) {
		            this.$emit('onSubmit');
		          } else {
		            this.$Message.error('Fail!');
		          }
		        })
			},
			//    
			resetForm: function(formName) {
				this.$refs[formName].resetFields();
			},
			//btn  
			handleBtnClick(clickType) {
				this.$emit(clickType, this.formInline)
			},
			//input  btn
			clickBtn() {
				//        
				this.$emit('checkRole')
			}
		}
	}

別のvueファイルで参照

<template>
	<div>

		<SelectForm :button="false" @getPlayerGameInfo="getPlayerGameInfo" :formInline="formInline" :formItem="formItem"></SelectForm>		
		<SelectForm :button="false" :formInline="formInlineImport" :formItem="formItemImport"></SelectForm>
		
	</div>
</template>

<script>
	import SelectForm from "../../components/selectForm/selectForm.vue";
	
	export default {
     
		components: {
     
			SelectForm
		},
		data() {
     
			return {
     
				//    
				formItem: [
					{
     
						type: 'select',
						label: this.$t('server'),
						placeholder: this.$t('selectServer'),
						clumn: 'server_id'
					},
					{
     
						type: 'input',
						label: this.$t('RoleID'),
						placeholder: this.$t('RoleID'),
						clumn: 'RoleID'
					},
					{
     
						type: 'input',
						label: this.$t('RoleName'),
						placeholder: this.$t('RoleName'),
						clumn: 'RoleName'
					},
					{
     
						type: 'input',
						label: this.$t('AccID'),
						placeholder: this.$t('AccID'),
						clumn: 'AccID'
					},
					{
     
						type: 'button',
						btns: [{
     
								name: this.$t("searchExport"),
								type: 'primary',
								clickType: 'getPlayerGameInfo',
							},
						]
					}
				],
				formInline: {
     
					server_id: "",
					RoleName: "",
					RoleID: "",
					AccID: ""
				},
				formInlineImport: {
     
					zone_id: '',
					server_id: '',
					AccID: ''
				},
				formItemImport: [
					{
     
						type: 'select',
						label: this.$t('region'),
						placeholder: this.$t('region'),
						clumn: 'zone_id',
						options: []
					},
					{
     
						type: 'select',
						label: this.$t('server'),
						placeholder: this.$t('selectServer'),
						clumn: 'server_id',
						options: []
					},
					{
     
						type: 'select',
						label: this.$t('AccID'),
						placeholder: this.$t('AccID'),
						clumn: 'AccID',
						options: []
					},
				]
			};
		},
		methods: {
     
			//      
			getPlayerGameInfo() {
     
				
			},
		}
	};
</script>

<style>
</style>