vue3-tree-org 自定义节点 坑点

1.如果使用的是ts ，请将<script setup lang="ts">中的 lang=“ts”去掉，必须换成lang=“jsx”

不然会报错，就只能使用模板字符串，，模板字符串renderContent不解析，主要原因就是jsx格式问题

(会有警告，但是没啥大碍)

注：(在jsx里面使用v-if没效果，可以使用v-show)

		<vue3-tree-org :data="DepartmentUser" :node-draggable="true" :default-expand-level="1" :draggable="false" :props="defaultProps"
			:render-content="renderContent" collapsable center disabled :scalable="false" :label-style="style" only-one-node>
		</vue3-tree-org>

<script setup lang="jsx">

2.使用renderContent方法，如果没效果，也可能是vue3的h方法没有引入，这里面需要注意的是必须传入vue3的(h)方法, 如果自定义数据不显示，可以打印看看data数据，例如(data.$$data.user_name)

import { onMounted, ref, h } from "vue";

const renderContent = (h, data) => {
	return (
		<div style="text-align: center;font-size: 12px;color:#000000;" >
			<div style="width: 100%;height: 30px;line-height: 30px;border-radius: 4px 4px 0px 0px;background-color: #c3292a; " v-if={data.children == undefined}>{data.label}</div>
			<span style="width: 170px;height: 70px;display: flex;justify-content: center;color: #101010;" >
				<span style="display: flex;justify-content: center;align-items: center;" >
					<span><img style="width: 48px;height: 48px;border-radius: 50%;margin-right: 10px;" src='../../../assets/static/Ellipse.png' /></span>
					<span class="staffInfo">
						<dd style="font-size: 14px;color: #000000;margin-bottom: 8px;">{data.$$data.user_name}</dd>
						<dd style="font-size: 12px;color: #000000;">{data.$$data.position}</dd>
					</span>
				</span>
			</span>
		</div>
	)
}

3. 或者报错，看看配置vite.config.ts文件有没有相关转换成jsx的插件

@vitejs/plugin-vue-jsx

@vitejs/plugin-vue

//这个是在配置文件中引入
import vueJsx from '@vitejs/plugin-vue-jsx';

 plugins: [
    vueJsx(),
  ],
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  },

 4.这个插件需要显示别的key的话，就需要使用 :prop="xxx"

const defaultProps = {
	label: 'name',
}

设置data数据源格式

const datas = ref({
	children: [
		{
			children: [
				{
					children: [
						{
							active: 1,
							admin: 0,
							avatar: "",
							boss: 0,
							created_time: "2023-04-28 17:36:02",
							deleted_time: null,
							department_id: 846562497,
							em: "",
							hired_date: null,
							id: 5,
							job_number: "",
							manager_user_id: "",
							mobile: "19946287240",
							name: "玲",
							user_name: "杜",
							position: "高级PHP师",
							org_email: "",
							remark: "",
							senior: 0,
							title: "",
							union_id: "zDbuvqPObyLiiex8IhalG0giEiE",
							updated_time: "2023-04-28 17:36:02",
							user_id: "02183432500226374565",
						},
						{
							active: 1,
							admin: 0,
							avatar: "",
							boss: 0,
							created_time: "2023-04-28 17:36:02",
							deleted_time: null,
							department_id: 846562497,
							em: "",
							hired_date: null,
							id: 5,
							job_number: "",
							manager_user_id: "",
							mobile: "19946287240",
							name: "王咯",
							user_name: "王咯",
							position: "高级PHP工程师",
							org_email: "",
							remark: "",
							senior: 0,
							title: "",
							union_id: "zDbuvqPObyLiiex8IhalG0giEiE",
							updated_time: "2023-04-28 17:36:02",
							user_id: "02183432500226374565",
						},
					],
					created_time: "2023-04-28 17:36:02",
					deleted_time: null,
					ding_dept_id: 846339935,
					hide: 0,
					id: 6,
					managers: "",
					name: "运营",
					user_name: "阿诗丹",
					position: "市场总监",
					order: 0,
					parent_id: 846752020,
					updated_time: "2023-04-28 17:36:02"
				}
			],
			created_time: "2023-04-28 17:35:58",
			deleted_time: null,
			ding_dept_id: 846562497,
			hide: 0,
			id: 2,
			managers: "",
			name: "市场部",
			user_name: "王",
			position: "高级PHP",
			order: 0,
			parent_id: 1,
			updated_time: "2023-04-28 17:35:59",
		},
		{
			children: [],
			created_time: "2023-04-28 17:35:58",
			deleted_time: null,
			ding_dept_id: 846562497,
			hide: 0,
			id: 2,
			managers: "",
			name: "运营部",
			user_name: "风格化",
			position: "首席大法官",
			order: 0,
			parent_id: 1,
			updated_time: "2023-04-28 17:35:59",
		},
	],
	ding_dept_id: 1,
	hide: 0,
	id: 1,
	managers: "",
	name: "总裁办",
	user_name: "xxx",
	position: "CEO",
	order: 0,
	parent_id: 0
})