element树形筛选

element树形筛选_第1张图片element树形筛选_第2张图片




  
{{ node.label }}
projectName: '',
treeList: [],
defaultProps: {
  children: 'children',
  label: 'name'
},


 watch: {
    projectName: {
      handler(v) {
        // 监听输入框变化、进行实时过滤
        this.$refs.tree.filter(v)
      }
    }
  },

 methods: {
    // 过滤掉无用的数据
    filterNode(value, data, node) {
      if (!value.trim()) return true
      if (data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) { return true }
      return this.checkNodes(value, data, node)
    },
    // 筛选父级所需要的子级
    checkNodes(value, data, node) {
      const level = node.level
      if (level === 1) return false
      let parentData = node.parent
      let index = 0
      while (index < level - 1) {
        if (parentData.data.name.toLowerCase().indexOf(value.toLowerCase().trim()) !== -1) return true
        parentData = parentData.parent
        index++
      }
      return false
    },
    // 清空项目树搜索框
    clearTree() {
      this.getOrganizarionTree()
    },
}

你可能感兴趣的:(vue.js,elementui,前端)