Element-UI中回显失败问题的完美解决

当我们在使用 Element-UI 中的级联选择器（Cascader）组件时，有时会遇到回显失败的问题，导致选择的值无法正确显示在界面上。这个问题的解决方式有多种，下面我们来详细介绍一种完美解决方案。

问题现象

在使用 Element-UI 的级联选择器组件时，有时候我们需要在修改页面中回显已经选择过的值。这时候，我们可以使用v-model绑定父子组件的选中值，但是当选中的值比较复杂时，我们可能会遇到回显失败的问题。

比如我们有如下的一个选项列表：

options: [
  {
    value: 'beijing',
    label: '北京',
    children: [
      {
        value: 'chaoyang',
        label: '朝阳区',
        children: [
          {
            value: 'taiyanggong',
            label: '太阳宫'
          }
        ]
      },
      {
        value: 'haidian',
        label: '海淀区',
        children: [
          {
            value: 'wudaokou',
            label: '五道口'
          },
          {
            value: 'zhongguancun',
            label: '中关村'
          }
        ]
      }
    ]
  }
]

我们通过父子组件间的绑定，在父组件中将选中的值存储在value中，然后再通过v-model与子组件进行双向绑定。

<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="props"/>
</template>

这样，当我们选择了 北京-海淀区-中关村 时，value的值为['beijing', 'haidian', 'zhongguancun']，同时级联选择组件也正确地显示了选择的值。

但是当我们将已经选择好的值传入组件中时，发现级联选择器的选项不会跟随传入的value更新。这个问题具体表现为，如果我们传入的value值为['beijing', 'haidian']，虽然在组件的value中正确地得到了存储，但是在界面上，北京已经被选中，但是海淀区未被选中。

完美解决方案

为了解决这个问题，我们需要引入 Element-UI 中的opts参数。opts是一个包含多个属性的对象，其中emitPath和lazy属性是我们需要关注的重点。

在我们正常使用级联选择器时，emitPath和lazy属性默认是忽略的。这就导致当我们传入一段选中值数组[value1, value2, ..., valueN]时，组件无法判断这些选中值与级联选择器的选项之间的正确映射关系，导致回显失败。

为了解决这个问题，我们需要手动设置opts参数:

<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="props"
    :opts="opts"/>
</template>

同时我们还需要为这个 opts 对象提供正确的值：

opts: {
  emitPath: false,
  lazy: true
},

• emitPath是控制级联选择器与外部应用之间数据交互的一个属性。当该值被赋值为true时，父组件向子组件传值时会传递一个经过处理的路径数组，而不是单纯的选中值数组。这种传值的方式可以让级联选择器更好地与我们的应用进行交互。
• lazy是控制级联选择器懒加载选项的一个属性。开启该属性后，级联选择器在加载选项时，只会加载当前展示选项及其子选项，而不是一次性加载全部选项，减轻了前端的数据压力。

最终，我们只需要在传入选中值时提供正确的映射路径即可。比如我们要回显['beijing', 'haidian', 'zhongguancun']，我们需要这样传值：

<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="props"
    :opts="opts"
    :value="['beijing', 'haidian', 'zhongguancun']"
    />
</template>

这样设置后，就可以正确地将已经选好的值在界面上显示出来了。同时，我们还可以通过传入动态的路径数组，来动态地更新级联选择器的选中值。比如当我们重新选中了['beijing', 'haidian']时，界面上就会正确地显示出北京-海淀区这个选项。

示例说明

下面分别是传入数组格式错误和传入数组格式正确的例子，来进一步说明这个问题。

示例 1：传入数组格式错误

在这个示例中，我们通过修改父组件中的value属性，将选中值变成了一个普通数组，而不是一个经过处理的路径数组。这样就导致了选中值无法正确回显。

<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="props"
    :opts="opts"
    />
  <button @click="changeValue()">改变选中值</button>
</template>

export default {
  data() {
    return {
      value: ['beijing', 'haidian', 'zhongguancun'],
      options: [
        {...}
      ],
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      opts: {
        emitPath: false,
        lazy: true
      }
    };
  },
  methods: {
    changeValue() {
      this.value = ['beijing', 'haidian', 'wudaokou'];
    }
  }
}

此时，在点击“改变选中值”按钮后，界面上只有北京会被选中，海淀区和五道口没有被选中。

示例 2：传入数组格式正确

在这个示例中，我们正确地使用了经过处理的路径数组。这样，即使曾经选中的值非常复杂，也能正确地回显在界面上。

<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="props"
    :opts="opts"
    :value="['beijing', 'haidian', 'zhongguancun']"
    />
  <button @click="changeValue()">改变选中值</button>
</template>

export default {
  data() {
    return {
      value: [],
      options: [
        {...}
      ],
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      },
      opts: {
        emitPath: false,
        lazy: true
      }
    };
  },
  methods: {
    changeValue() {
      this.value = ['beijing', 'haidian', 'wudaokou'];
    }
  }
}

此时，在点击“改变选中值”按钮后，界面上会正确选中北京-海淀区-五道口这个选项。