vue自定义表单组件

vue自定义一个表单组件

<template>
  <Form class="right-inline" ref="formInline" :model="formInline" :inline="inline" :rules="ruleInline"
    :label-position="right" :label-width="126">
    <template v-for="(item, index) in formItem">
      <Form-item :label="item.label" :prop="item.clumn" v-if="item.show===false ? false : true"
        :required="item.required ? item.required :false">
        <Select v-if="item.type == 'select'" v-model="formInline[item.clumn]"
          :multiple="item.multiple ? item.multiple : false" style="width:260px" :placeholder="item.placeholder"
          filterable>
          <Option v-for="i in item.options" :value="i.value">{{ i.name }}</Option>
        </Select>

        <template>
          <template v-if="item.inputType == 'password'">
            <input type="password" v-show="false" />
          </template>

          <Input v-if="item.type == 'input'" :type="item.inputType ? item.inputType : 'text'"
            :autosize="{minRows: 4,maxRows: 8}" v-bind:disabled="item.disabled === true ? true : false "
            v-model="formInline[item.clumn]" :placeholder="item.placeholder" autocomplete="off"></Input>

          <template v-if="item.clumn == 'username'">
            <input type="text" v-show="false" />
          </template>
          <template v-if="item.clumn == 'nickname'">
            <input type="text" v-show="false" />
          </template>
          <Button v-if="item.customBtn" type="primary" @click="clickBtn">校验</Button>
        </template>

        <span v-if="item.tips" style="color:red">{{item.tips}}</span>

        <CheckboxGroup v-if="item.type === 'checkbox'" v-model="formInline[item.clumn]">
          <Checkbox v-for="(i, index) in item.options" v-bind:key="i.index" :label="i.value"> {{ i.label }} </Checkbox>
        </CheckboxGroup>

        <RadioGroup v-if="item.type === 'radio'" v-model="formInline[item.clumn]">
          <Radio v-for="(i, index) in item.options" v-bind:key="i.index" :label="i.value" v-bind:disabled="item.disabled === true ? true : false">{{ i.label }}</Radio>
        </RadioGroup>

        <!-- 普通日期 -->
        <DatePicker v-if="item.type === 'date'" v-model="formInline[item.clumn]"
          :type="item.dateType ? item.dateType : 'date'" placeholder="选择日期">
        </DatePicker>

        <DatePicker v-if="item.type === 'datetimerange'" v-model="formInline[item.clumn]" format="yyyy-MM-dd HH:mm"
          type="datetimerange" placeholder="Select date" style="width: 280px"></DatePicker>

        <DatePicker v-if="item.type === 'daterange'" v-model="formInline[item.clumn]" format="yyyy-MM-dd"
          type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>

        <template v-if="item.type === 'button'" v-for="(i, index) in item.btns">
          <Button :type="i.type" class="button" @click="handleBtnClick(i.clickType)"
            v-bind:disabled="i.disabled ? i.disabled : false">{{ i.name }}</Button>
        </template>

      </Form-item>
    </template>

    <!-- 自定义内容--插槽 -->
    <slot></slot>

    <Form-item v-if="button">
      <Button @click="onSubmit" type="primary">查询</Button>
      <Button @click="resetForm('formInline')" type="primary">重置</Button>
    </Form-item>
  </Form>
</template>

<script>
  export default {
    name: 'selectForm',
    props: {
      button: {
        type: Boolean,
        default: () => true
      },
      right: {
        type: String,
        default: () => 'right'
      },
      formItem: {
        type: Array,
        default: () => []
      },
      formInline: {
        type: Object,
        default: () => {}
      },
      inline: {
        type: Boolean,
        default: () => true
      },
      ruleInline: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        serverList: [],
        zoneList: [],
        channelList: [],
      }
    },
    watch: {
      formInline: {
        handler(newValue, oldValue) {
          this.formInline = newValue
        },
        deep: true
      },
    },
    methods: {
      onSubmit: function () {
        this.$emit('onSubmit')
      },
      //表单验证
      submitForm() {
        return this.$refs.formInline.validate()
      },
      resetForm: function (formName) {
        this.$refs[formName].resetFields();
      },
      //btn方法
      handleBtnClick(clickType) {
        this.$emit(clickType, this.formInline)
      },
      //input后的btn
      clickBtn() {
        //触发父组件的方法
        this.$emit('checkRole')
      }
    }
  }

</script>

<style>
  .button {
    margin-right: 10px;
  }

  .inline-select {
    display: inline-block;
  }

</style>

在另一个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>