el-tree-select 多选树形下拉框，实现当选中时，根据当前选择的对象，动态生成表单数据。

      <el-tree-selectv-model="taskParamsSelect":data="taskParams_options"multipleplaceholder="请选择任务参数":render-after-expand="false"@node-click="handleNodeClick"@change="selectChange"@remove-tag="removeTagChange"></el-tree-select>

实现步骤：

1、节点点击事件： @node-click=“handleNodeClick” 拿到当前点击的节点数据。

// 节点被点击
function handleNodeClick(node) {console.log(node, "current node click ");if(node.paraNo) currentNodeValue.value = node.paraNo;if(node.paraName) currentLabel.value = node.paraName;console.log(taskParamsSelect.value, "选定的值的数组");
}

2、下拉框的值改变事件：@change=“selectChange” 拿到下拉框的值，添加表单数据。

// 选中值发生变化时触发 valueArray 当前选中的值的数组
function selectChange(valueArray) {console.log(valueArray, "select value change!!");if (valueArray.includes(currentNodeValue.value)) {configFormData.value.enParamsList.push({paraNo: currentNodeValue.value, //--参数标识位置paraName:currentLabel.value,operatorFlag: "", //参数运算符标识 1大于2 小于 3等于value: "", //--参数对应value});}
}

3、移除已选中的数据事件：@remove-tag=“removeTagChange” 移除表单数组中对应的数据。

// 多选模式下移除tag时触发
function removeTagChange(tagValue) {console.log(tagValue, "remove current tag");let filterAfterArray = configFormData.value.enParamsList.filter((item) => item.paraNo !== tagValue);configFormData.value.enParamsList = filterAfterArray;
}