Design and Implementation of a Conditional Filter Tree Component in Vue

The author introduces a "condition filter tree" component created to support multi‑field relational operations for internal security data analysis, initially built with Vue2 and later refactored to Vue3 using the script‑setup syntax.

Key data structures are presented, such as:

const form = {
  relation: 1,
  cond_child: [
    { field: 'fileType', oper: 1, value: 1 },
    { field: 'operType', oper: 2, value: 2 }
  ]
}

Problems encountered include handling multiple values for a field, determining leaf nodes, and Vue2 reactivity limitations that required vue.$set and vue.$delete . The Vue3 version resolves these by cloning data with cloneDeep , updating the reactive formData , and simplifying the relationship logic.

The component hierarchy consists of RuleTree (the recursive tree) and RuleItem (leaf node). Communication between levels uses provide / inject for adding, deleting, and changing relations, as well as for collecting form references for validation.

Form validation is integrated with Element‑Plus el-form and el-form-item . Validation rules are passed from the parent, and a validate method exposed via defineExpose aggregates validation results from all leaf nodes.

Usage examples demonstrate basic integration, custom slot content, and validation triggering from a parent component. The article also outlines current limitations (two‑level nesting only, lack of drag‑and‑drop) and invites suggestions for future enhancements.