怎么使用Cascader 级联选择器

1.效果图

 2.第一步，从后端获得/父级分类数据列表parentCateList

 //获取分类数据列表
        async getParentCateList() {
            const { data: res } = await this.$http.get('categories', {
                params: { type: 2 },
            });

            if (res.meta.status !== 200) {
                return this.$message.error('获取分类数据列表失败');
            }

            this.parentCateList = res.data;
        },

第二步，要在打开弹框的时候调用this.getParentCateList();先获取父级分类数据列表

        showAddCateDialog() {
            //先获取父级分类数据列表
            this.getParentCateList();

            this.addCateDialogVisible = true;
        },

第三步，在data中定义

            //父级分类数据列表
            parentCateList: [],

            //为父级分类指定配置对象
            cascaderProps: {
                expandTrigger: 'hover',
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                checkStrictly:true
            },

            //级联选择器选中的商品分类Id数组
            selectKeys:[]

checkStrictly:true用来表示也可以单选第一级，

expandTrigger: 'hover',鼠标经过展示 

value: 'cat_id',指定选项的值为选项对象的某个属性值

label: 'cat_name',指定选项标签为选项对象的某个属性值

children: 'children',指定选项的子选项为选项对象的某个属性值

第四步，template

                <el-form-item label="父级分类：">

                    <!-- :options用来指定数据源 -->
                    <!-- :props用来指定配置对象 -->
                    <el-cascader
                        v-model="selectKeys"
                        :options="parentCateList"
                        :props="cascaderProps"
                        @change="handleChange"
                        clearable
                    ></el-cascader>
                </el-form-item>