element UI级联菜单可多选 如何实现按照勾选顺序显示在文本框 请给出代码

Element UI 的级联菜单（Cascader）组件提供了 `multiple` 属性，可以开启多选模式。在多选模式下，`v-model` 绑定的是一个数组，存储所有选中节点的值。

要实现按照勾选顺序显示在文本框的功能，可以通过以下步骤来实现：

1. 在级联菜单上添加 `multiple` 属性，开启多选模式，并使用 `v-model` 指令绑定一个数组，用来存储选中节点的值。

2. 在模板中使用 `v-for` 指令渲染绑定的数组，来实现按照勾选顺序显示选中节点的功能。

下面是一个示例代码：

<template>
  <el-cascader
    v-model="selected"
    :options="options"
    :multiple="true"
    @change="handleChange"
  ></el-cascader>
  <el-input
    v-model="selectedText"
    :readonly="true"
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      selected: [], // 存储选中节点的值
      options: [
        {
          label: '选项一',
          value: 'option1',
          children: [
            {
              label: '选项1-1',
              value: 'option1-1'
            },
            {
              label: '选项1-2',
              value: 'option1-2'
            }
          ]
        },
        {
          label: '选项二',
          value: 'option2',
          children: [
            {
              label: '选项2-1',
              value: 'option2-1'
            },
            {
              label: '选项2-2',
              value: 'option2-2'
            }
          ]
        }
      ]
    }
  },
  computed: {
    selectedText() {
      // 将选中节点的值转换为文本字符串
      return this.selected.map(item => item.label).join(', ')
    }
  },
  methods: {
    handleChange() {
      // 选中节点发生变化时触发
    }
  }
}
</script>

在上面的示例代码中，我们使用了 `selected` 数据来存储选中节点的值，使用 `selectedText` 计算属性来将选中节点的值转换为文本字符串。在模板中，我们使用 `v-for` 指令来渲染 `selected` 数组，并使用 `join` 方法将数组转换为字符串。同时，我们还使用了一个禁用的 `el-input` 组件来显示选中节点的文本字符串。

注意，由于多选模式下，`v-model` 绑定的是一个数组，因此需要在 `handleChange` 方法中对数组进行操作，来更新选中节点的值。