1、 Cascader 级联选择器的表现形式

2、Cascader 级联选择器的数据格式

const options=[
    {
        value: 'guide',
        label: 'Guide',
        children: [
            {
                value: 'disciplines',
                label: 'Disciplines',
                children: [
                    {
                        value: 'consistency',
                        label: 'Consistency',
                        
                    }
                ]
            }
        ]
    }
]

3、前端对树表的显示

1）、定义属性

const selectProps = {
  value: 'id',
  label: 'categoryName',
}

2）、级联选择器组件

<el-cascader
            v-model="form.categoryId"
            :options="typeTreeList"
            :props="selectProps"
            @change="handleSelectTreeChange"
/>

3）、若依框架前端把数组转为树形结构

// 获取商品分类列表
  listCategory().then(response => {
    typeList.value = response.data
    typeTreeList.value = proxy.handleTree(response.data, "id", "parentId")
    console.log('typeTreeList', typeTreeList.value)
  })