针对最新版本的element-plus(2.2.9),在el-tree组件的自定义节点中使用 el-select会报错
<template>
<div class="out-wrapper">
<el-tree :data="state.treeData">
<template #default="{ node, data }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
<span>
<el-select v-model="data.myVal" multiple placeholder="请选择" :popper-append-to-body="false">
<el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</span>
</span>
</template>
</el-tree>
</div>
</template>
<style lang="scss" scoped>
.out-wrapper {
width: 400px;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
const state: any = reactive({
treeData: [],
myVal: [],
options: []
})
onMounted(() => {
// 树节点数据
state.treeData = [{
value: 1,
label: '节点1',
myVal: [1],
children: [
{ value: 11, label: '节点11', myVal: [] },
{ value: 12, label: '节点12', myVal: [] }
]
}]
// 自定义的下拉选项数据
state.options = [{
value: 1,
label: 'root1',
children: [
{ value: 11, label: 'node2' },
{ value: 12, label: 'node3' }
]
},
{
value: 2,
label: 'root2',
children: [
{ value: 21, label: 'node22' },
{ value: 22, label: 'node23' }
]
}]
})
</script>
在点击选项时报错:useSelect.ts:141 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'validate')
at watch.flush (useSelect.ts:141:24)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
at Array.job (runtime-core.esm-bundler.js:1782:17)
at flushPostFlushCbs (runtime-core.esm-bundler.js:358:32)
at flushJobs (runtime-core.esm-bundler.js:403:9)
没有解决办法
有什么办法能不报错吗?