vue el-cascader 添加确认和取消按钮，请给我完整代码

下面是一个基于 Element UI Cascader 组件实现带有确认和取消按钮的示例代码：

<template>
  <div>
    <el-cascader
      :options="options"
      v-model="selectedOptions"
      :show-all-levels="false"
      :props="props"
      :clearable="false"
      @change="handleChange"
      @expand-change="handleExpandChange"
      :lazy="true"
    ></el-cascader>
    <el-button-group>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleOK">确定</el-button>
    </el-button-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      selectedOptions: [],
      props: {
        value: 'id',
        label: 'name',
        children: 'children'
      }
    }
  },
  mounted() {
    this.loadData(null, (data) => {
      this.options = data
    })
  },
  methods: {
    loadData(id, callback) {
      // 异步加载子节点数据
      // ...
      callback(data)
    },
    handleChange(value) {
      // 处理选项变化事件
      // ...
    },
    handleExpandChange(value, selectedOptions) {
      // 处理展开节点事件
      // ...
    },
    handleOK() {
      // 处理确认按钮点击事件
      // ...
    },
    handleCancel() {
      // 处理取消按钮点击事件
      // ...
    }
  }
}
</script>

在上面的代码中，我们通过设置 Cascader 组件的 lazy 属性为 true，实现了动态加载子节点数据的功能。同时，我们还添加了确认和取消按钮，通过 handleOK 和 handleCancel 方法处理按钮点击事件。在 handleOK 方法中，我们可以通过 this.selectedOptions 获取当前选中的节点数组。在 handleCancel 方法中，我们可以执行一些取消操作，例如清空已选择的节点等。需要注意的是，为了保证 Cascader 组件的正常使用，还需要在 handleChange 和 handleExpandChange 方法中对 Cascader 组件的选项列表和已选择节点进行合理的管理和更新。