<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="treeProps"
node-key="id"
:highlight-current="true"
:expand-on-click-
node="false"
@
node-click="handle
NodeClick"
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 handle
NodeClick = (
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的内容即课程分类表的主键,但是我只想要选中后只有课程分类标题
扫一扫
1118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
