FCAT

Appearance

1. 初始表单 ​

2. 时间校验 ​

  • 时间起止校验，起不得晚于止

  • 查询时触发校验

3. 查询Button Loading ​

  • 防止用户单位时间内请求次数过多，给Button添加Loading动画

4. 重置 ​

  • 重置表单内容至初始状态或空状态

5. 展开-收起 ​

6. 自适应row ​

  • 将input或select放入row，配合flex完美响应式盒子可得到自适应表单

7. select定制 ​

  • select会实时调用后端接口
  • select之间会联动
  • select内容之间会联动

8. 字典 ​

  • 提交表单时会将select的label替换为value，可能会调用字典遍历

9. 表单元素数字校验 ​

html
<template>
    <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="数字输入框" prop="input">
        <el-input v-model="form.input"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {
                input: '' // 绑定输入框的值
                },
                rules: {
                    input: [
                        { required: true, message: '请输入数字', trigger: 'blur' },
                        // 自定义校验规则，正则表达式判断输入框内容是否为数字或小数点
                        {
                            validator: (rule, value, callback) => {
                                const reg = /^[0-9]+(\.[0-9]{1,2})?$/;
                                if (!reg.test(value)) {
                                    callback(new Error('请输入正确的数字'));
                                    } else {
                                        callback();
                                    }
                            },
                            trigger: 'blur'
                        }]
                }
        };
    },
    methods: {
        // 提交表单
        submitForm() {
            // 对表单进行校验
            this.$refs.form.validate(valid => {
                if (valid) {
                    // 表单校验成功，执行提交操作
                    console.log('submitForm:', this.form.input);
                } else {
                    // 表单校验失败，给出错误提示
                    console.log('表单校验失败');
                }
            });
        }
    }
}
</script>
<template>
    <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="数字输入框" prop="input">
        <el-input v-model="form.input"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            form: {
                input: '' // 绑定输入框的值
                },
                rules: {
                    input: [
                        { required: true, message: '请输入数字', trigger: 'blur' },
                        // 自定义校验规则，正则表达式判断输入框内容是否为数字或小数点
                        {
                            validator: (rule, value, callback) => {
                                const reg = /^[0-9]+(\.[0-9]{1,2})?$/;
                                if (!reg.test(value)) {
                                    callback(new Error('请输入正确的数字'));
                                    } else {
                                        callback();
                                    }
                            },
                            trigger: 'blur'
                        }]
                }
        };
    },
    methods: {
        // 提交表单
        submitForm() {
            // 对表单进行校验
            this.$refs.form.validate(valid => {
                if (valid) {
                    // 表单校验成功，执行提交操作
                    console.log('submitForm:', this.form.input);
                } else {
                    // 表单校验失败，给出错误提示
                    console.log('表单校验失败');
                }
            });
        }
    }
}
</script>