Cascader-多选模式，在 Cascader 内嵌删除按钮时如何获取已被勾选的节点？

前端

2023-09-24 00:55:50

一、问题

在 Cascader 组件的多选模式中，用户可以通过点击选项旁边的复选框或使用键盘上的空格键来选择选项。同时，Cascader 组件也支持在选项旁边嵌入一个删除按钮，以便用户可以更便捷地删除选定的选项。如图所示：

[图片]

图中展示了两种删除按钮：

使用箭头1所示的【删除】按钮，用户可以直接点击该按钮来删除选定的选项。
使用箭头2所示的键盘【Backspace】按钮，当选项被聚焦时，用户可以使用该按钮来删除选定的选项。

问题： 当用户使用上述两种方式删除选项时，如何获取已勾选的节点信息？

二、解决方案

要获取已勾选的节点信息，我们需要使用 Cascader 组件的 getCheckedNodes() 方法。此方法将返回一个数组，其中包含所有已勾选的节点信息。

const checkedNodes = cascader.getCheckedNodes();

为了在删除按钮被触发时调用此方法，我们需要在 Cascader 组件上添加一个 on-change 事件监听器。此监听器将在 Cascader 组件的值发生变化时触发，包括当选项被删除时。

cascader.on('change', (value, checkedNodes) => {
  // 在这里处理已勾选的节点信息
});

在 on-change 事件监听器中，我们可以使用 getCheckedNodes() 方法来获取已勾选的节点信息。然后，我们可以根据需要对这些信息进行处理，例如，我们可以将这些信息发送到服务器进行保存。

三、示例代码

以下是一个完整的示例代码，演示了如何在 Cascader 组件的多选模式中实现删除按钮并获取已勾选的节点信息：

<template>
  <el-cascader
    v-model="value"
    :options="options"
    :props="cascaderProps"
    @change="handleCascaderChange"
  >
    <template #default="{ node, data }">
      <span>{{ node.label }}</span>
      <el-button
        type="text"
        icon="el-icon-close"
        @click="handleClose(node)"
      ></el-button>
    </template>
  </el-cascader>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: '1',
          label: '选项 1',
        },
        {
          value: '2',
          label: '选项 2',
        },
        {
          value: '3',
          label: '选项 3',
        },
      ],
      cascaderProps: {
        multiple: true,
      },
    };
  },
  methods: {
    handleClose(node) {
      // 获取已勾选的节点信息
      const checkedNodes = this.$refs.cascader.getCheckedNodes();

      // 在这里处理已勾选的节点信息
      console.log(checkedNodes);

      // 从 Cascader 中删除选定的选项
      this.value = this.value.filter(item => item !== node.value);
    },
    handleCascaderChange(value, checkedNodes) {
      // 获取已勾选的节点信息
      // 在这里处理已勾选的节点信息
      console.log(checkedNodes);
    },
  },
};
</script>