huimv.cloud.client/src/components/Cascader/Cascader.vue

<template>
    <div class="Cascader">
        <el-cascader
            :options="options"
            :props="props"
            @expand-change="$expandChange"
            @change="$change"
            style="width:335px;"
            :placeholder="cascaderPlaceholder"
        >
            <template slot-scope="{ node, data }">
                <span>{{ data[props.label] }}</span>
                <span v-if="!node.isLeaf">({{ data[props.children].length }})</span>
            </template>
        </el-cascader>
    </div>
</template>

<script>
import { mapActions } from "vuex";
/*  描述说明：
options: 级联选择 树形数据
props：配置项  （可看 https://element.eleme.cn/#/zh-CN/component/cascader ）
*/

export default {
    name: "Cascader",
    props: {
        options: { type: Array },
        props: { type: Object }
    },
    data() {
        return {
            cascaderPlaceholder: "请选择/不选择默认根级"
        };
    },
    created() {},
    methods: {
        ...mapActions(["fetch"]),
        $expandChange(value) {
            this.$emit("expand-change", value);
            this.cascaderPlaceholder = this.findAreaName(value);
            this.$children[0].presentText = this.cascaderPlaceholder;
        },
        $change(value) {
            this.$emit("change", value);
        },

        // 级联选择时 因组件限制 需拼接 名字字符串在级联选择器上显示
        findAreaName(valueArr) {
            let _this = this;
            let i = 0;
            let tmpStr = "";
            find(this.options);
            function find(subTree) {
                subTree.forEach(item => {
                    // debugger
                    if (item.id == valueArr[i]) {
                        tmpStr += item[_this.props.label] + "/";
                        if (
                            i < valueArr.length &&
                            item[_this.props.children] &&
                            item[_this.props.children].length > 0
                        ) {
                            i++;
                            find(item[_this.props.children]);
                        }
                    }
                });
            }
            return tmpStr;
        }
    }
};
</script>