Vue+Naive+Ts实现详解树形组件icon替换与获取点击数据

实现树形组件点击获取数据,<template>标签代码

<n-tree block-line :data="dataTree" :render-prefix="renderPrefix" key-field="id" label-field="name" :default-selected-keys="defaultselectedkeys" :node-props="nodeProps" />

来看里面的各个属性方法

//data=>组件数据
//render-prefix => 节点前缀的渲染函数（主要用于替换树形控件前面的icon图标，可自定义）
//label-field => 替代 TreeOption 中的 label 字段名，展示的字段
//key-field => 替代 TreeOption 中的 key 字段名
//default-selected-keys => 默认选中的节点
//node-props => 获取点中节点的数据

//引入组件必要函数
import { TreeOption, NIcon } from "naive-ui";
//小编安装了组件推荐的icon图标库，这个icon库有很多的版本，对应版本的icon不同哦，记得看仔细啦！
import { FolderOutline } from '@vicons/ionicons5';

//树形列表icon样式
const renderPrefix = ({ option }: { option: TreeOption }) => {
  return h(NIcon, null, {
    default: () => h(FolderOutline)
  })
}

//点击节点的方法
const nodeProps = ({ option }) => {
  return {
    onClick() {
      console.log(option)//拿到点击节点的数据，可以进行自己的处理啦。
      }
    },
  };
}

以上代码就是我们使用这个树形组件的一些基本操作啦，刚开始不熟的小伙伴可以看一下文章哦。还有自己需求的可以看官方文档哦！Naive UI