huangguohai 2022-07-13 22:15
浏览 429
已结题

针对最新版本的element-plus(2.2.9),在el-tree组件的自定义节点中使用 el-select会报错

针对最新版本的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)
没有解决办法
有什么办法能不报错吗?
  • 写回答

0条回答 默认 最新

    报告相同问题?

    问题事件

    • 系统已结题 7月21日
    • 创建了问题 7月13日

    悬赏问题

    • ¥50 paddleocr带斜线的0很容易识别成9
    • ¥15 电子档案元素采集(tiff及PDF扫描图片)
    • ¥15 flink-sql-connector-rabbitmq使用
    • ¥15 zynq7015,PCIE读写延时偏大
    • ¥15 使用spss做psm(倾向性评分匹配)遇到问题
    • ¥20 vue+UEditor附件上传问题
    • ¥15 想做个WPS的自动化代码,不知道能做的起不。
    • ¥15 uniApp,生成安卓安卓包后,黑暗主题中间内容不生效,底部导航正常
    • ¥15 斯坦福自动漂移非线性模型反解
    • ¥15 学习Python如何找兼职