学习记录5.24

关于奶茶中联级查询的方法：

首先后端传过来的数据是list

element要求的联级查询的表示的单一的：

<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
</div>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {

显示label选中value，之后还有children

init(){
        joinApi.getParent()
          .then(response=>{
            console.log(response)
            for(var i=0;i<response.data.length;i++){
            this.commodityList.push(response.data[i])
            this.options = response.data.map(({name,id,param})=>({
              value:id,
              label:name,
              children:param.children.map(({name,id})=>({
                  value:id,
                  label:name,
              }))
            }))
          }

          })
      }

这样使用可以解决对应问题
可以正常使用：