<el-form-item label="课程分类" prop="categoryId">
<el-select
v-model="data
.form
.categoryId"
@clear="handleClearCategory"
placeholder="请选择分类"
style="width: 240px"
@visible-change="handleSelectVisible"
clearable
><template #prefix>
<span v-if="data
.form
.categoryName">
{{ data
.form
.categoryName }}
</span>
</template>
<el-option style="height: auto; padding: 0">
<el-tree
ref="categoryTree"
:data="data
.categoryTree"
:
props="tree
Props"
node-key="id"
:highlight-current="true"
:expand-on-click-node="false"
@node-click="handleNodeClick"
style="width: 100%; max-height: 300px; overflow: auto"
>
<template #default="{ node, data }">
<span :class="{ 'disabled-node': node
.childNodes
.length > 0 }">
{{ data
.title }}
<span
v-if="node
.childNodes?
.length"
style="color: #999; font-size: 12px; margin-left: 5px"
>
({{ node
.childNodes
.length }}
)
</span>
</span>
</template>
</el-tree>
</el-option>
<template #empty>
<div style="padding: 10px">
{{ data
.categoryTree
.length ? '加载中
...' : '暂无分类数据' }}
</div>
</template>
</el-select>
</el-form-item>// 新增选择框可见性处理
const handleSelectVisible =
(visible
) => {
if
(visible && data
.categoryTree
.length === 0
) {
loadCategoryTree
()
}
}
// 修改分类加载方法
const loadCategoryTree =
() => {
request
.get
('/category/tree'
).then
(res => {
if
(res
.code === '200'
) {
data
.categoryTree = processTreeData
(res
.data || []
)
} else {
ElMessage
.error
(res
.msg
)
}
}
).catch
(err => {
ElMessage
.error
('分类加载失败'
)
}
)
}
// 处理树形数据
const processTreeData =
(tree
) => {
return tree
.map
(node =>
({
...node,
// 如果后端返回的字段是 'name'，需映射为 'title'
title: node
.name || node
.title,
children: node
.children ? processTreeData
(node
.children) : []
}
));
}
// 树节点点击处理
const handleNodeClick =
(nodeData, node
) => {
// 只有当节点是叶子节点时才更新值
if
(!node
.childNodes?
.length
) {
data
.form
.categoryId = nodeData
.id
data
.form
.categoryName = nodeData
.title // 新增名称赋值
nextTick
(() => {
const select = document
.querySelector
('
.el-select'
)
if
(select
) select
.blur
() // 使选择器失去焦点关闭下拉
}
)
// 生成父级路径
const parentIds = []
let current = node
.parent
while
(current && current
.data
.id !== undefined
) {
parentIds
.unshift
(current
.data
.id
)
current = current
.parent
}
data
.form
.categoryParentId = parentIds
.join
(','
)
// 关闭下拉框
document
.querySelector
('
.el-select-dropdown'
).style
.display = 'none'
}
}为什么选中树形下拉框后里面还有categoryId的内容即课程分类表的主键,但是我只想要选中后只有课程分类标题
本文深入探讨React组件的props，包括children属性的使用，解释它如何表示组件的子节点，并接受各种类型值。接着讨论props的校验，阐述其重要性在于捕获并提供错误提示，提高组件健壮性。介绍了使用prop-types库进行props校验的步骤和常见校验规则。最后，讲解如何为props设置默认值，以在未传入props时确保组件的正常运行，以分页组件为例说明应用场景。
最低0.47元/天 解锁文章
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
