qq_41499760 2022-10-01 20:14 采纳率: 83.3%
浏览 23
已结题

树形数据搜索功能,不知道那块出问题了

想要实现下面这个搜索功能

img

这个是我写的代码报的这个错误,找不到原因

img

<template>
  
  <div class="LeftAdminUser">
    <el-input
      style="width: 230px"
      size="small"
      v-model="UserInput"
      placeholder="请输入部门名称"
      clearable
      @change="LUchange"
    >
    </el-input>
    <el-tree
      :data="UserData"
      :props="defaultProps"
      @node-click="handleNodeClick"
      default-expand-all
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // input绑定的v-model
      UserInput: '',
      // 搜索筛选之后的产品列表
      TreeData: [],
      // 产品列表
      UserData: [],
      defaultProps: {
        children: "children",
        label: "label",
      }
    }
  },
  // 树接受父级的数据
  props: {
    UserTreeData: Array
  },
  watch: {
    UserTreeData: {
      handler(newValue, oldValue) {
        this.UserData = this.UserTreeData
      }
    }
  },
  methods: {
    LUchange(val1) {
      this.Lchange(this.UserData)
      this.TreeData.forEach(res => {
        if (res == val1) {
          this.UserData = []
          this.UserData.push(val1)
        } else {
          this.UserInput = ''
        }
      })
    },
    Lchange(val) {
      val.forEach(element => {
        this.TreeData.push(element.label)
        if (element.children && element.children.length > 0) {
          this.Lchange(element.children)
        }
      })
      // this.TreeData.push(treeList)
    },
    andleNodeClick(data) {
    },
    handleNodeClick() { }
  }
}
</script>

为什么会报这个错误

接口请求的数据是我自己mockjs写的,请求回来是这样的

img

  • 写回答

1条回答 默认 最新

报告相同问题?

问题事件

  • 系统已结题 10月9日
  • 已采纳回答 10月1日
  • 创建了问题 10月1日

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度