element cascader

5U_DVMAH3%`)6~MH$O]$3XN.png

使用饿了么级联选择器时遇到了,这种情况:无论单选还是多选选框始终没有打勾,但是有值的,不知道怎么解决

<template>
    <el-cascader
        ref="cascader"
        class="el-cascader-region"
        size="mini"
        v-model="v"
        :props="{
            lazy: true,
            multiple,
            checkStrictly,
            lazyLoad: this.lazyLoadHandler,
        }"
        :clearable="true"
        :filterable="true"
        :multiple="multiple"
        :placeholder="valuePlaceholder"
        :show-all-levels="false"
        @change="changeHandler"
    ></el-cascader>
</template>

<script>
/* eslint-disable vue/require-prop-type-constructor */
import { getConfig, getUser } from '../../helper/tools';
import regions from "../../mixins/options/regions";
const User = getUser();
const Config = getConfig();
export default {
    name: "el-cascader-region",
    props: {
        value: String | Array,
        showRoot: Boolean,
        disabled: Boolean,
        multiple: Boolean,
        clearable: Boolean,
        placeholder: {
            type: String,
            default: "选择与筛选"
        },
        checkStrictly: {
            type: Boolean,
            default: true
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.valuePlaceholder = this.getRegionsName(val).join(",") || this.placeholder;
                this.v = val
            }
        },
    },
    mixins: [regions],
    methods: {
        changeHandler(regionList) {
            if (this.multiple) {
                regionList = this.cascaderPicky(regionList || []);
            } else {
                regionList = regionList[regionList.length - 1];
            }
            this.$emit("input", regionList || null);
        },
        lazyLoadHandler({ data }, resolve) {
            if(!data) {
                resolve([{
                    level: this.root.level,
                    label: this.root.name,
                    value: this.root.id,
                    leaf: false
                }]);
                return;
            }
            
            this.$axios({
                url: "/sys/adregion.do?method=query",
                params: {
                    node: data.value
                }
            })
            .then((res) => {
                resolve(res.data.map(({ id, name, leaf, level }) => ({
                    label: name,
                    value: id,
                    level,
                    leaf,
                })));
            });
        },
        cascaderPicky(regionList) {
            const levels = [];

            let i, p, t;
            regionList.forEach((region) => {
                i = region.length - 1;

                if (levels[i]) levels[i].push(region[i]);
                else levels[i] = [region[i]];
            });
            i = levels.length - 1;
            for (; i > 0; i--) {
                p = levels[i - 1];

                if (!p && i === 1) continue;
                p = levels.slice(0, i).flat();

                t = levels[i];
                if (!t) continue;

                for (let pr of p)
                t = t.filter((tr) => !(tr.substring(0, (pr || "").length) === pr));

                levels[i] = t;
            }
            return levels.flat();
        },
        clear() {
            this.v = null;
            this.$refs.cascader.$refs.panel.clearCheckedNodes()
        }
    },
    computed: {
        root() {
            return (User && User.region) || Config.REGION || {};
        },
    },
    created() {
    },
    data() {
        return {
            v: null,//this.value,
            key: 0,
            valuePlaceholder: null
        }
    }
}
</script>
阅读 859
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题