优化列表筛选器组件显示兼容性

Tevin

2021-10-13 67d4bf09d8d40aa5121e61dde63030fc958e2a14

 forms/form/CFormItem.vue

@@ -1,5 +1,5 @@
/**
 * CFormItem
 * CFormItem - 表单套装组件，单项包囊器
 * @author Tevin
 * @tutorial rules see https://github.com/yiminghe/async-validator#type
 */
@@ -17,11 +17,28 @@
export default {
    name: 'CFormItem',
    props: {
        name: String,
        label: String,
        required: Boolean,
        rules: Array,
        // 表单数据资源（表单组件内部机制专用）
        formRes: Object,
        // 表单项字段键名
        name: String,
        // 表单项中文名
        label: String,
        // 表单项验证规则之是否必填
        required: Boolean,
        // 表单项验证规则之复合规则
        //   例如：[{type:'string', min: 2, max: 100}]
        //   常用项：
        //     type        string           类型，常见有 string、number、boolean、array、object、url、email
        //     len         number           string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度
        //     max         number           必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度
        //     min         number           必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度
        //     pattern     RegExp           正则表达式匹配
        //     required    boolean          是否为必选字段
        //     transform   (value) => any   将字段值转换成目标值后进行校验
        //     message     string           错误信息，不设置时会通过模板自动生成
        rules: Array,
        // 表单是否禁用
        disabled: Boolean,
    },
    data() {
        return {
@@ -35,8 +52,9 @@
                name: this.name,
                label: this.label,
                required: this.isRequired,
                disabled: this.disabled,
                error: this.error,
                onChange: (evt) => this.onChange(evt),
                onChange: evt => this.onChange(evt),
            };
        },
        isRequired() {
@@ -66,8 +84,9 @@
                    !hasOwn.call(evt, 'constructor') &&
                    !hasOwn.call(evt.constructor.prototype, 'isPrototypeOf')
                ) {
                    throw new Error('错误的表单项 onChange 参数类型！（At: ' + this.name + '）');
                    return;
                    throw new Error(
                        '错误的表单项 onChange 参数类型！（At: ' + this.name + '）'
                    );
                }
            }
            // 未改变值不触发
@@ -83,7 +102,7 @@
        this.$nextTick(() => {
            // 未设置验证
            if (!this.required && !this.rules) {
                this.formRes.$regItemValidator(this.name, (validateType) => {
                this.formRes.$regItemValidator(this.name, validateType => {
                    this.error = false;
                    return Promise.resolve({
                        name: this.name,
@@ -105,13 +124,13 @@
                validator.messages(validateMsgs);
                // 注册验证
                let errTimer = null;
                this.formRes.$regItemValidator(this.name, (validateType) => {
                this.formRes.$regItemValidator(this.name, validateType => {
                    return validator
                        .validate({
                            [this.name]: this.formRes.formData[this.name],
                        })
                        .then(
                            (res) => {
                            res => {
                                this.error = false;
                                return {
                                    name: this.name,