elementUI vue级联菜单实现全选取消全选 和按照勾线顺序回显排序

针对你的问题，elementUI 的级联选择器（Cascader）组件提供了一些属性和方法，可以实现全选/取消全选和按勾选顺序回显排序的功能。

1. 全选/取消全选

elementUI 的级联选择器（Cascader）组件提供了一个 checkStrictly 属性，可以控制级联选择器是否可以全选和取消全选。当 checkStrictly 为 true 时，级联选择器可以全选和取消全选；当 checkStrictly 为 false 时，级联选择器只能单选或多选。

2. 按勾选顺序回显排序

elementUI 的级联选择器（Cascader）组件提供了一个 value 属性，可以设置级联选择器的选中项。当级联选择器的选项是固定的时候，可以通过设置 value 属性来回显选中项；当级联选择器的选项是动态生成的时候，可以通过监听级联选择器的 change 事件，获取选中项的顺序和值，并进行排序和回显。

下面是一个简单的示例代码，实现了全选/取消全选和按勾选顺序回显排序的功能：

<template>
  <el-cascader
    :options="options"
    :check-strictly="true"
    :value="selectedItems"
    @change="handleChange"
    @expand-change="handleExpandChange"
    @clear="handleClear"
  ></el-cascader>
</template>

<script>
export default {
  data() {
    return {
      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: '顶部导航' },
              ],
            },
          ],
        },
      ],
      selectedItems: [],
    };
  },
  methods: {
    handleChange(value, selectedItems) {
      this.selectedItems = selectedItems;
    },
    handleExpandChange() {
      // do something
    },
    handleClear() {
      this.selectedItems = [];
    },
  },
};
</script>

在上面的示例代码中，我们通过设置 checkStrictly 属性为 true，开启了全选/取消全选的功能。同时，我们监听了级联选择器的 change 事件，在选中项发生变化时，更新 selectedItems 数组的值，并实现了按勾选顺序回显排序的功能。

希望这个回答对你有所帮助！