element UI级联菜单如何按照勾选顺序回显

Element UI 的级联菜单（Cascader）组件提供了 `change-on-select` 属性，可以在选中节点时触发 `change` 事件，这样可以实时获取最新的选中节点信息。因此，我们可以通过监听级联菜单的 `change` 事件，来实现按照勾选顺序回显的功能。

具体实现步骤如下：

1. 在级联菜单上添加 `change-on-select` 属性，开启选择节点时触发 `change` 事件的功能。

2. 监听级联菜单的 `change` 事件，在事件处理函数中获取当前选中节点的信息。

3. 根据选中节点的信息，生成一个新的数组来存储勾选的节点，并在每次选中节点时更新该数组。

4. 在模板中使用 `v-for` 指令渲染新数组，来实现勾选顺序的回显。

下面是一个示例代码：

<template>
  <el-cascader
    v-model="selected"
    :options="options"
    :change-on-select="true"
    @change="handleChange"
  ></el-cascader>
  <div v-if="selectedNodes.length > 0">
    <div v-for="(node, index) in selectedNodes" :key="index">
      {{ node.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [], // 存储选中节点的值
      selectedNodes: [] // 存储选中节点的信息
    }
  },
  methods: {
    handleChange(value, selectedNodes) {
      // 更新选中节点的信息
      this.selectedNodes = selectedNodes
    }
  }
}
</script>

在上面的示例代码中，我们使用了 `selected` 数据来存储选中节点的值，使用 `selectedNodes` 数据来存储选中节点的信息。在 `handleChange` 方法中，我们将选中节点的信息赋值给 `selectedNodes`，然后在模板中使用 `v-for` 指令来渲染 `selectedNodes` 数组。

这样就可以实现按照勾选顺序回显的功能了。