element级联选择器Cascader怎么设置默认选中选项

Question

需求为打开弹窗之后，通过级联选择器多选，之后返回页面，再次打开弹窗时，需要级联选择器显示上次选中内容

template ：

<el-cascader
  :options="options"
  v-model="dimensionArr"
  :props="props"
  collapse-tags
  ref="cascader"
  @change="handleChange"
  >
</el-cascader>

数据部分 ：

data() {
  return {
    props: { 
      multiple: true,
      lazy: true,
      expandTrigger: 'hover'
    },
    dimensionArr: [], // 用来放默认选中的部分
    // 级联选择器的数据
    options: [
      {
        value: "zhinan",
        label: "指南",
        children: [
          {
            value: "shejiyuanze",
            label: "设计原则",
            children: [
              {
                value: "yizhi",
                label: "一致"
              },
              {
                value: "fankui",
                label: "反馈"
              },
              {
                value: "xiaolv",
                label: "效率"
              },
              {
                value: "kekong",
                label: "可控"
              }
            ]
          },
          {
            value: "daohang",
            label: "导航",
            children: [
              {
                value: "cexiangdaohang",
                label: "侧向导航"
              },
              {
                value: "dingbudaohang",
                label: "顶部导航"
              }
            ]
          }
        ]
      },
      {
        value: "zujian",
        label: "组件",
        children: [
          {
            value: "basic",
            label: "Basic",
            children: [
              {
                value: "layout",
                label: "Layout 布局"
              },
              {
                value: "color",
                label: "Color 色彩"
              },
              {
                value: "typography",
                label: "Typography 字体"
              },
              {
                value: "icon",
                label: "Icon 图标"
              },
              {
                value: "button",
                label: "Button 按钮"
              }
            ]
          },
          {
            value: "form",
            label: "Form",
            children: [
              {
                value: "radio",
                label: "Radio 单选框"
              },
              {
                value: "checkbox",
                label: "Checkbox 多选框"
              },
              {
                value: "input",
                label: "Input 输入框"
              },
              {
                value: "input-number",
                label: "InputNumber 计数器"
              },
              {
                value: "select",
                label: "Select 选择器"
              },
              {
                value: "cascader",
                label: "Cascader 级联选择器"
              },
              {
                value: "switch",
                label: "Switch 开关"
              },
              {
                value: "slider",
                label: "Slider 滑块"
              },
              {
                value: "time-picker",
                label: "TimePicker 时间选择器"
              },
              {
                value: "date-picker",
                label: "DatePicker 日期选择器"
              },
              {
                value: "datetime-picker",
                label: "DateTimePicker 日期时间选择器"
              },
              {
                value: "upload",
                label: "Upload 上传"
              },
              {
                value: "rate",
                label: "Rate 评分"
              },
              {
                value: "form",
                label: "Form 表单"
              }
            ]
          },
          {
            value: "data",
            label: "Data",
            children: [
              {
                value: "table",
                label: "Table 表格"
              },
              {
                value: "tag",
                label: "Tag 标签"
              },
              {
                value: "progress",
                label: "Progress 进度条"
              },
              {
                value: "tree",
                label: "Tree 树形控件"
              },
              {
                value: "pagination",
                label: "Pagination 分页"
              },
              {
                value: "badge",
                label: "Badge 标记"
              }
            ]
          },
          {
            value: "notice",
            label: "Notice",
            children: [
              {
                value: "alert",
                label: "Alert 警告"
              },
              {
                value: "loading",
                label: "Loading 加载"
              },
              {
                value: "message",
                label: "Message 消息提示"
              },
              {
                value: "message-box",
                label: "MessageBox 弹框"
              },
              {
                value: "notification",
                label: "Notification 通知"
              }
            ]
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "menu",
                label: "NavMenu 导航菜单"
              },
              {
                value: "tabs",
                label: "Tabs 标签页"
              },
              {
                value: "breadcrumb",
                label: "Breadcrumb 面包屑"
              },
              {
                value: "dropdown",
                label: "Dropdown 下拉菜单"
              },
              {
                value: "steps",
                label: "Steps 步骤条"
              }
            ]
          },
          {
            value: "others",
            label: "Others",
            children: [
              {
                value: "dialog",
                label: "Dialog 对话框"
              },
              {
                value: "tooltip",
                label: "Tooltip 文字提示"
              },
              {
                value: "popover",
                label: "Popover 弹出框"
              },
              {
                value: "card",
                label: "Card 卡片"
              },
              {
                value: "carousel",
                label: "Carousel 走马灯"
              },
              {
                value: "collapse",
                label: "Collapse 折叠面板"
              }
            ]
          }
        ]
      },
      {
        value: "ziyuan",
        label: "资源",
        children: [
          {
            value: "axure",
            label: "Axure Components"
          },
          {
            value: "sketch",
            label: "Sketch Templates"
          },
          {
            value: "jiaohu",
            label: "组件交互文档"
          }
        ]
      }
    ]

  }
},

使用了找到的一个方法，给级联选择器绑定v-model，我在打开弹窗的方法中，直接给级联选择器v-model绑定的dimensionArr赋值，赋值结果为

[
    'jiaohu', 'carousel'
]

但是页面上的级联选择器还是个空白的，无法显示默认选中的两项，请问各位大佬，怎么才能实现默认选中功能

Answer 1

编辑一下，先看一个props的值
props的emitPath

在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值

这里emitPath默认为true，此时选中的值是数组，
dimensionArr: [['ziyuan','jiaohu'],['zujian','others','carousel']],
题主的情况应设为false。

props的lazy

题主的解决办法：
1.无懒加载

props: { 
      emitPath: false,
      multiple: true,
      expandTrigger: 'hover',    
    },

2.懒加载
这里实现的不好，主要是默认选中的问题，用placeholder凑合了，
为了简化，只选中了一个。

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="dimensionArr"
      :props="props"
      collapse-tags
      ref="cascader"
      @change="handleChange"
      :placeholder="select"
    >
    </el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select:'组件交互文档',
      props: {
        emitPath: false,
        multiple: true,
        lazy: true,
        expandTrigger: "hover",
        lazyLoad: (node, resolve) => {
          console.log("node", node);
          if (node.value === "ziyuan") {
              resolve([
              {
                value: "axure",
                label: "Axure Components",
              },
              {
                value: "sketch",
                label: "Sketch Templates",
              },
              {
                value: "jiaohu",
                label: "组件交互文档",
              },
            ]);
            this.dimensionArr=['jiaohu']
          } else resolve([]);
        },
      },
      dimensionArr: ["ziyuan"], 
      options: [
        {
          value: "zhinan",
          label: "指南",
        },
        {
          value: "zujian",
          label: "组件",
        },
        {
          value: "ziyuan",
          label: "资源",
        },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    handleChange() {},
    
  },
};
</script>
<style lang="less" scoped></style>

Answer 2

利用vuex做数据管理

store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        arr:[]
    },
    mutations: {
        changeArr(state,value){
            state.arr = value
        },
    },
    actions: {}
})
export default store

页面handleChange方法

handleChange(value) {
            this.$store.commit('changeArr',value)
        }

computed引用

computed:{
        Arr(){
            return this.$store.state.arr
        }
    },

直接v-model Arr