前言

最近实现一个需求 接收传递过来的值 并在 el-cascader级联选择器 上 勾选回显出来 记录下代码实现

代码实现

<template>
  <div id="app">
    <el-card class="box-card">
      <el-form
          ref="form2"
          label-width="80px"
          style="margin-top:20px"
      >
        <el-form-item label="多选回显">
          <el-cascader
              v-model="obj.selectedValues"
              :options="options"
              :props="props"
              clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>

export default {
  name:'testDemo',
  data() {
    return {
      obj:{
        selectedValues:[]
      },
      props: { multiple: true },
      options: [
        {
          value: '一级1',
          label: '一级1',
          children: [
            {
              value: '二级1',
              label: '二级1',
              children: [
                { value: '三级1', label: '三级1' },
                { value: '三级2', label: '三级2' },
                { value: '三级3', label: '三级3' },
              ],
            },
            {
              value: '二级2',
              label: '二级2',
              children: [
                { value: '三级1', label: '三级1' },
                { value: '三级2', label: '三级2' },
                { value: '三级3', label: '三级3' },
              ],
            },
          ],
        },
        {
          value: '一级2',
          label: '一级2',
          children: [
            {
              value: '二级1',
              label: '二级1',
              children: [
                { value: '三级1', label: '三级1' },
                { value: '三级2', label: '三级2' },
                { value: '三级3', label: '三级3' },
              ],
            },
            {
              value: '二级2',
              label: '二级2',
              children: [
                { value: '三级1', label: '三级1' },
                { value: '三级2', label: '三级2' },
                { value: '三级3', label: '三级3' },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.obj.selectedValues = [['一级1', '二级1', '三级1'],['一级1', '二级1', '三级2']];
  },
  methods: {}
};
</script>

实现效果

总结

这里 v-model 勾选项 对应 options 数组里 对应子项的value值 要 对应到最底层子项
然后 value值 需用 双层 [ ] 括起来 多个子项 分割开 例如 [[‘一级1’, ‘二级1’, ‘三级1’],[‘一级1’, ‘二级1’, ‘三级2’]]