美文网首页
Vue+element - ui 自定义动态表单带校验

Vue+element - ui 自定义动态表单带校验

作者: 俗人彭jin | 来源:发表于2019-09-25 17:42 被阅读0次

    Vue+element - ui 自定义动态表单带校验

    // 父组件
     <FromTrends @getFromData="getFromData" titleText="添加/编辑" :formData="formData"/>
    

    父组件对应的数据

    formData: {
                        dataName: "",
                        formItemList: [
                            {
                                label: '名称', // lable名称
                                disabled: false, // 禁止编辑
                                defaultValue: '', //默认值
                                itemId: 'dataName', // 绑定的name属性
                                required: true, // 是否必填
                                placeholder: '请填写正确的信息', // 默认灰色提示文本
                                width: 300, // 文本框宽度
                                type: 'INPUT', // 表单类型
                                message: '请填写正确的信息', // 如果未填写,提示用户的信息
                                value: '11', // 绑定的值
                                defDataList: [] // 如果是select活着tree需要绑定的数组值
                            },
                            {
                                label: 'select', // lable名称
                                disabled: false, // 禁止编辑
                                defaultValue: '', //默认值
                                itemId: 'select222', // 绑定的name属性
                                required: true, // 是否必填
                                placeholder: '请选择', // 默认灰色提示文本
                                width: 300, // 文本框宽度
                                type: 'SELECT', // 表单类型
                                filterable: false, // 是否可搜索
                                multiple: false, // 是否可多选
                                message: '', // 如果未填写,提示用户的信息
                                keyLabel: 'label',
                                keyValue: 'value',
                                value: '', // 绑定的值 // multiple 为多选的时候这里是数组,
                                defDataList: [
                                    {
                                        label: '选型1',
                                        value: 1
                                    },
                                    {
                                        label: '选型2',
                                        value: 2
                                    }
                                ]
                            },
                            {
                                format: "YYYY-MM-DD",
                                label: 'DATE', // lable名称
                                disabled: false, // 禁止编辑
                                defaultValue: '', //默认值
                                itemId: 'DATEDATE', // 绑定的name属性
                                required: true, // 是否必填
                                placeholder: '', // 默认灰色提示文本
                                width: 300, // 文本框宽度
                                type: 'DATE', // 表单类型
                                message: '请填写正确的信息', // 如果未填写,提示用户的信息
                                value: '', // 绑定的值
                                defDataList: [] // 如果是select活着tree需要绑定的数组值
                            },
                            {
                                label: 'TEXTAREA', // lable名称
                                disabled: false, // 禁止编辑
                                defaultValue: '', //默认值
                                itemId: 'textarea', // 绑定的name属性
                                required: false, // 是否必填
                                placeholder: '', // 默认灰色提示文本
                                width: 300, // 文本框宽度
                                type: 'TEXTAREA', // 表单类型
                                message: '请填写正确的信息', // 如果未填写,提示用户的信息
                                value: '', // 绑定的值
                                defDataList: [] // 如果是select活着tree需要绑定的数组值
                            },
                            {
                                label: 'AllDATE', // lable名称
                                type: 'ALLDATE', // 表单类型
                                message: '请选择日期', // 如果未填写,提示用户的信息
                                disabled: false, // 禁止编辑
                                defaultValue: '', //默认值
                                itemId: 'allDATE', // 绑定的name属性
                                required: true, // 是否必填
                                placeholder: '', // 默认灰色提示文本
                                width: 300, // 文本框宽度
                                value: ['2012-09-11', '2012-09-18'], // 默认的绑定的区间是个数组
                                defDataList: [] // 如果是select活着tree需要绑定的数组值
                            }
                        ]
                    }
    

    子组件

    <template>
        <div id="trendsForm">
            <el-dialog
                    :title="titleText?titleText:'标题'"
                    :visible.sync="dialogVisible"
                    :before-close="handleClose">
                <div>
                    <!--:rules="rules" -->
                    <el-form ref="ruleForm" :label-position="labelPosition" label-width="120px"
                             :model="formData">
                        <!---->
                        <div v-for="(item,index) in formData.formItemList" :key="index">
                            <el-form-item v-if="item.type==='INPUT'" :prop="'formItemList.' + index + '.value'"
                                          :label="item.label"
                                          :rules="[{ required: item.required, message:item.message?item.message:'信息必须填写'}]">
                                <el-input :placeholder="item.placeholder"
                                          v-model="item.value">
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="item.type==='TEXTAREA'" :prop="'formItemList.' + index + '.value'"
                                          :label="item.label"
                                          :rules="[{ required: item.required, message:item.message?item.message:'信息必须填写'}]">
                                <el-input type="textarea" :placeholder="item.placeholder"
                                          v-model="item.value">
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="item.type==='SELECT'" :label="item.label"
                                          :prop="'formItemList.' + index + '.value'"
                                          :rules="[{ required: item.required, message:item.message?item.message:'请选择'}]">
                                <el-select :multiple="item.multiple?item.multiple:false" filterable v-model="item.value"
                                           :placeholder="item.placeholder">
                                    <el-option v-for="(v,index) in item.defDataList" :key="index"
                                               :label="item.keyLabel?v[item.keyLabel]:v.label"
                                               :value="item.keyValue?v[item.keyValue]:v.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item v-if="item.type==='DATE'" :label="item.label"
                                          :prop="'formItemList.' + index + '.value'"
                                          :rules="[{ required: item.required, message:item.message?item.message:'请选择'}]">
                                <el-date-picker type="date" :placeholder="item.placeholder?item.placeholder:'请选择日期'"
                                                v-model="item.value"
                                                style="width: 100%;"></el-date-picker>
                            </el-form-item>
                            <!--多日期选择-->
                            <el-form-item v-if="item.type==='ALLDATE'" :label="item.label"
                                          :prop="'formItemList.' + index + '.value'"
                                          :rules="[{ required: item.required, message:item.message?item.message:'请选择'}]">
                                <el-date-picker
                                        v-model="item.value"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                </el-date-picker>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                  </span>
            </el-dialog>
    
        </div>
    </template>
    
    <script>
    
        import moment from 'moment';
        // 组件传递进来的值
        // {
        //     label: '名称', // lable名称
        //         disabled: false, // 禁止编辑
        //     defaultValue: '', //默认值
        //     itemId: 'dataName', // 绑定的name属性
        //     require: true, // 是否必填
        //     placeholder: '', // 默认灰色提示文本
        //     width: 300, // 文本框宽度
        //     type: 'INPUT', // 表单类型
        //     message: '请填写正确的信息', // 如果未填写,提示用户的信息
        //     value: '', // 绑定的值
        // filterable: false, // 是否可搜索(select)
        // multiple: false, // 是否可多选(select)
        //     defDataList: [] // 如果是select活着tree需要绑定的数组值
        // }
        export default {
            name: "FromTrends",
            data() {
                return {
                    dialogVisible: true,
                    labelPosition: 'right'
                }
            },
            props: ['formData', 'titleText'],
            components: {},
            methods: {
                handleClose() {
                    this.dialogVisible = false
                },
                confirm() { // confirm 表单
                    this.submitForm('ruleForm')
                },
                /**
                 * 提交表单验证
                 * @param formName
                 */
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            // 验证通过
                            this.$emit('getFromData', this.getFROMData())
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                /**
                 * 数据合法之后获取当前需要的数据
                 * @param data // this.formData
                 */
                getFROMData() {
                    let jsonArr = {}
                    this.formData.formItemList.map((v) => {
                        if (v.type === 'DATE') {
                            v.value ? v.value = moment(v.value).format(v.format ? v.format : 'YYYY-MM-DD') : null
                        }
                        if (v.type === 'ALLDATE') {
                            if (v.value.length > 0) {
                                let dateString = []
                                v.value.map((v1) => {
                                    dateString.push(moment(v1).format(v.format ? v.format : 'YYYY-MM-DD'))
                                })
                                v.value = dateString
                            }
                        }
                        jsonArr[v.itemId] = v.value ? v.value : ''
                    })
                    return jsonArr
                },
                /**
                 * 初始化表单
                 * @param formName
                 */
                resetForm() {
                    this.$refs.ruleForm.resetFields();
                }
            },
            mounted() {
            }
        }
    </script>
    
    <style lang="less">
        #trendsForm {
            .line {
                text-align: center;
            }
        }
    </style>
    

    相关文章

      网友评论

          本文标题:Vue+element - ui 自定义动态表单带校验

          本文链接:https://www.haomeiwen.com/subject/tbrwuctx.html