Cascader 级联选择器

<template>
    <div>
        <ks-dialog
            ref="categoryDialog"
            :title="dialogTitle"
            class="dialog-style"
            :visible.sync="jdCategoryVisible"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            @close="dialogClose">
            <ks-cascader
                ref="myCascader"
                v-model="darwinCidGroup"
                class="category-casc"
                :options="categoryOptions"
                :props="marketCascaderProps"
                clearable
                @change="categoryChange">
            </ks-cascader>
            <span slot="footer" class="dialog-footer">
                <ks-button @click="jdCategoryVisible = false">取 消</ks-button>
                <ks-button type="primary" @click="categoryConfirm()">确 定</ks-button>
            </span>
        </ks-dialog>
    </div>
</template>

<script>
import { categoryCascade } from '@/api/productCenter/myProduct'
export default {
    data() {
        return {
            dialogTitle: '普通发品',
            selectCategory: true,
            categoryData: '',
            jdCategoryVisible: false,
            darwinCidGroup: [],
            darwinCid: null,
            categoryOptions: [],
            marketCascaderProps: {
                emitPath: true,
                lazy: true,
                lazyLoad: this.getSubMarket
            }
        }
    },
    methods: {
        dialogClose() {
            this.categoryData = ''
            this.darwinCidGroup = []
            this.selectCategory = true
        },
        categoryChange() {
            if (this.$refs.myCascader.getCheckedNodes()[0]) {
                this.categoryData = this.$refs.myCascader.getCheckedNodes()[0].pathLabels.join('>>')
                this.selectCategory = false
            } else {
                this.categoryData = null
                this.selectCategory = true
            }
        },
        categoryConfirm() {
            if (this.$refs.myCascader.getCheckedNodes()[0]) {
                this.jdCategoryVisible = false
            } else {
                this.$message.error('请选择类目！')
            }
        },
        getSubMarket(node, resolve) {
            categoryCascade(node.level + 1, node.value || null).then(res => {
                if (res.code === '20000') {
                    const nodes = res.result.map(item => ({
                        value: item.cid,
                        label: item.catName,
                        leaf: item.catIsParent === false
                    }))
                    const filterNodes = []
                    for (const i in nodes) {
                        filterNodes.push(nodes[i])
                    }
                    resolve(filterNodes)
                }
            }).catch((error) => {
                console.log(error)
                resolve([])
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-style{
    ::v-deep.ks-dialog{
        width: 800px;
        .ks-dialog__header{
            font-size: 16px;
            height: 70px;
            border-bottom: 1px solid #D9DFEA;
        }
    }
    .category-casc{
        width: 100%;
    }
    .desc{
        margin-bottom: 20px;
    }
    .desc-text{
        color: cornflowerblue;
    }
}
</style>

效果图：