基于Element Cascader 级联选择器实现动态获取数据

Posted 2023-03-22

参考技术A 1，先请求一个接口，获取级联选择器的第一层数据
2，根据点击的第一层数据中的某一条获取的id获取后台数据，渲染级联选择器的第二层数据

element cascader的例子中数据都是在data中一次性写好的，即都有children属性，渲染第二层第三层等

element-ui之级联选择器(Cascader) 全选 功能

最近产品要求做一个省市区选择，效果就建议使用element-UI的cascader级联，这也是我第一次使用此插件，但要在原cascader级联基础上加一个“全选”按钮，查看官方文档没有关于全选功能属性设置。搜索也没找到好的方法解决。最后请教一个大牛，下面是实现全选的方法.
(官方文档地址：https://element.eleme.cn/#/zh-CN/component/cascader)
方法就是：从树结构中抽出数据。变与model结构就可以了。

需要引用（官方可下载）：
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
 <link rel="stylesheet" href="css/index.css">

JS代码：

var data = [{
    id: 1,
    name: \'东南\',
    children: [{
        id: 2,
        name: \'上海\',
        children: [
            { id: 3, name: \'普陀\' },
            { id: 4, name: \'黄埔\' },
            { id: 5, name: \'徐汇\' }
        ]
    }, {
        id: 7,
        name: \'江苏\',
        children: [
            { id: 8, name: \'南京\' },
            { id: 9, name: \'苏州\' },
            { id: 10, name: \'无锡\' }
        ]
    }, {
        id: 12,
        name: \'浙江\',
        children: [
            { id: 13, name: \'杭州\' },
            { id: 14, name: \'宁波\' },
            { id: 15, name: \'嘉兴\' }
        ]
    }]
}, {
    id: 17,
    name: \'西北\',
    children: [{
        id: 18,
        name: \'陕西\',
        children: [
            { id: 19, name: \'西安\' },
            { id: 20, name: \'延安\' }
        ]
    }, {
        id: 21,
        name: \'新疆维吾尔族自治区\',
        children: [
            { id: 22, name: \'乌鲁木齐\' },
            { id: 23, name: \'克拉玛依\' }
        ]
    }]
}];

var Main = {
    data() {
        return {
            check: false,
            casVal: [],
            quchong: [],
            props: {
                multiple: true,
                value: \'id\',
                label: \'name\'
            },
            options: data
        };
    },
    computed: {
        allCheckValues() {
            var model = []
            function tree2arr(arr, str, level) {
                arr.forEach(it => {
                    let newStr = str.length ? [...str, it.id] : [it.id];
                    if (it.children) {
                        tree2arr(it.children, newStr, level + 1)
                    } else {
                        model.push(newStr)
                    }
                })
            }
            tree2arr(this.options, [], 0)
            return model
        },
    },
    methods: {
        onCheck(v) {
            this.casVal = v ? this.allCheckValues : []
            console.log(this.casVal)
        },
        handleChange(value) {
            let selectVal = value;
            this.allCheckValues.length==selectVal.length?this.check = true : this.check = false;
            console.log(selectVal, \'选中的vlaue值\')
        },
    }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount(\'#app\')