elementui Cascader 踩过的坑

需求:使用el-cascader选择最后一级,同时选择之前的父级标签.

分析问题:需求明明很简单,组件可以满足需求,直接拿过来用,却一直无法触发绑定的change事件,只有添加props.checkStrictly = true时才可以触发,但是不能实现需求。排除了组件的问题那就是数据的问题。

后端返回的数据大概是这样:

{
  "success": true,
  "targetId": null,
  "code": 0,
  "message": null,
  "total": 6,
  "contents": [
    {
      "uuid": "d258e00a-1ac3-4d2d-b066-8107sad45ads4a3a",
      "name": "体能训练",
      "code": "01",
      "children": [
        {
          "uuid": "d7076249-85d8-42f3-a184-8755ad53ad08",
          "name": "基础体能",
          "code": "0101",
          "children": [
            {
              "uuid": "92b6920d-2fce-4e35-bee1-1579da54df4837",
              "name": "1分钟跳绳",
              "code": "0101",
              "children": []
            }
          ]
        }

      ]
    }

  ]
}

观察数据发现最后一级也有children只不过children=[],这就导致组件无法确定最后一级,所以无法触发change事件,所以把最后一级children=[]的属性删除掉应该就可以,后端统一方法无法处理该数据,所以就智能前端自己出来请求到的数据。

使用递归遍历请求到的数组,检查每个元素是否有子元素。如果有子元素,则递归地进入子元素并删除其子元素属性,最终实现将所有元素的子元素属性移除的操作。

    recursionChangeKey(arr) {
      for (let i = 0; i < arr.length; i++) {
        const current = arr[i]
        if (current.children.length) {
          this.recursionChangeKey(current.children)
        } else {
          delete current.children
        }
      }
    },

你可能感兴趣的:(前端,element-ui,elementui,前端,javascript)