el-tree-select 添加全部按钮

<template>
  <el-dialog v-model="dialogVisible" title="已处置风险网页信息" width="85%" @close="onClose">
    <div>
      <el-tree-select v-model="selectedOptions" :data="treeData" node-key="id" show-checkbox @check-change="handleCheckChange">
        <template #prefix>
          <el-checkbox v-model="selectAll" @change="handleSelectAllChange">全选</el-checkbox>
        </template>
      </el-tree-select>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, computed, PropType, reactive, onMounted, onUnmounted, watch,defineComponent} from "vue";
const props = defineProps({
  dialogVisible: Boolean,
});
const emit = defineEmits(["on-confirm"]);

const treeData = ref([
  {
    id: 1,
    label: 'Option 1',
    children: [
      { id: 11, label: 'Option 1-1' },
      { id: 12, label: 'Option 1-2' },
    ],
  },
  {
    id: 2,
    label: 'Option 2',
    children: [
      { id: 21, label: 'Option 2-1' },
      { id: 22, label: 'Option 2-2' },
    ],
  },
]);
const selectedOptions = ref([]);
const selectAll = ref(false);
function handleCheckChange(checkedNodes: []) {
  if (checkedNodes.length === treeData.value.length) {
    selectAll.value = true;
  } else {
    selectAll.value = false;
  }
}
function handleSelectAllChange(value: boolean) {
  if (value) {
    selectedOptions.value = treeData.value.map((node: any) => node.id);
  } else {
    selectedOptions.value = [];
  }
}
const onClose = async () => {
  emit("on-confirm", true);
};
onMounted(() => {

})

</script>