vue3中element el-tree组件@change事件怎么判断是选中还是取消选中

在Vue3中，Element UI的el-tree组件的@change事件会传递两个参数：

1. 选中的节点数组
2. 取消选中的节点数组

因此，我们可以通过判断这两个数组是否为空，来确定是选中还是取消选中。具体代码如下：

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    show-checkbox
    @change="handleTreeChange"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
            },
            {
              label: "二级 1-2",
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
            },
            {
              label: "二级 2-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    handleTreeChange(selectedNodes, deselectedNodes) {
      if (selectedNodes.length > 0) {
        console.log("选中节点：", selectedNodes);
      }
      if (deselectedNodes.length > 0) {
        console.log("取消选中节点：", deselectedNodes);
      }
    },
  },
};
</script>

在该示例中，我们在el-tree组件的@change事件中，通过传入的两个参数selectedNodes和deselectedNodes分别判断选中和取消选中的节点，并在控制台中输出相应的信息。