vue3+ts实现element Plus Tree组件单选和取消单选的功能（取消已经选中的树节点），及vue3的proxy对象转换-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3+ts实现element Plus Tree组件单选和取消单选的功能（取消已经选中的树节点），及vue3的proxy对象转换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

具体效果和代码如下：

el-tree 取消选中节点,前端,vue,typescript

点击了"节点1"并高亮显示

 :highlight-current="true"

打印结果如下

el-tree 取消选中节点,前端,vue,typescript

vue3的打印对象是proxy，如需变成单纯的数组对象可以使用 JSON.parse(JSON.stringify(list))进行转换。

el-tree 取消选中节点,前端,vue,typescript

再次点击"节点1"则取消当前选中

el-tree 取消选中节点,前端,vue,typescript

完整代码贴一下：

<template>
  <el-tree
      :data="treeData"
      :props="defaultProps"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
      :highlight-current="true"
      :current-node-key="selectedNodeId"

  />
</template>
<script lang="ts">
import { defineComponent,ref,reactive,toRefs ,onMounted} from 'vue'
import { ElTree } from 'element-plus';

export default defineComponent({
  name: 'SelectTree',
  components: {
    ElTree,
  },
  setup() {
    // 树形结构数据
    const treeData = ref([
      {
        id: 1,
        label: '节点1',
        children: [
          { id: 2, label: '节点1-1' },
          { id: 3, label: '节点1-2' },
        ],
      },
      { id: 4, label: '节点2' },
      { id: 5, label: '节点3' },
    ]);

    // 默认 props 配置项
    const defaultProps = {
      children: 'children',
      label: 'label',
    };

    // 当前选中的节点 id
    const selectedNodeId = ref(null as any);//做类型断言处理

    // 处理节点点击事件
    function handleNodeClick(data: any) {
      console.log(data)
      if (data.id === selectedNodeId.value) {
        // 如果当前节点已经选中，则取消选中
        selectedNodeId.value = null;
        console.log( selectedNodeId.value,"取消选中")
      } else {
        // 否则选中当前节点
        selectedNodeId.value = data.id;
        console.log( selectedNodeId.value,"当前选中的节点")
      }
    }
    onMounted(()=>{
      // 在这可以设置默认选中的节点
      // selectedNodeId.value = 1

    })

    return {
      treeData,
      defaultProps,
      selectedNodeId,
      handleNodeClick,
    };
  },
});
</script>
<style scoped lang="scss">

</style>

如果对您有帮助点个赞，关注收藏一下吧。文章来源地址https://www.toymoban.com/news/detail-660800.html

到了这里，关于vue3+ts实现element Plus Tree组件单选和取消单选的功能（取消已经选中的树节点），及vue3的proxy对象转换的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！