接单做网站怎么开价格,市场营销案例150例,中企动力企业邮箱网址,中国建设银行美金账户登录网站在使用el-cascader这个级联组件时#xff0c;组件的值是数组形式#xff0c;且选中节点时#xff0c;所返回的值中是包含选中节点的所有父节点的。
比如#xff0c;我们选中的是“值班点1号-东门”#xff0c;但组件实际的值是[‘值班点1号’,‘值班点1号-东门’]#x…在使用el-cascader这个级联组件时组件的值是数组形式且选中节点时所返回的值中是包含选中节点的所有父节点的。
比如我们选中的是“值班点1号-东门”但组件实际的值是[‘值班点1号’,‘值班点1号-东门’]包含了上级父节点。这与后端接口就不匹配一般后端存储的时候只存储选中节点返回数据也是只有选中的节点这就导致数据回显问题。 此时我们就要传给后端所选节点的数组回显时就需要前端手动处理根据给定的节点id来查找其所有父节点id以此实现页面数据回显。
1.获取所有所选节点传给后端存储
let checkedNodes this.$refs.checkCascader.getCheckedNodes() || [];
let checkedIds checkedNodes.map((el) {return el.value;
});
console.log(所有选中节点的id, checkedIds);2.后端返回数据前端进行处理回显
for (let item of self.editForm.checkpoints) {checkpoints.push(this.getParentIdsList(item, this.checkpointTree));
}
//回显打卡点数据
this.checkpoints checkpoints;//根据id递归查找所有父级ids
getParentIdsList(id, tree) {let arr [];for (let i 0; i tree.length; i) {let item tree[i];arr [];arr.push(item.checkpoint.id);if (id item.checkpoint.id) {return arr;} else {if (item.children item.children.length 0) {arr arr.concat(this.getParentIdsList(id, item.children));if (arr.includes(id)) {return arr;}}}}}
