实现树形组件点击获取数据,<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