[youzan/vant]Picker能实现深度不一直的tree结构绑定吗？

Picker如何实现深度不一直的tree结构绑定？目前我有个这样的tree，

[
  {
    "id": "5efc872c-cfdf-afe4-0009-644a65755b37",
    "text": "中心",
    "children": [
      {
        "id": "8efc872c-cfdf-afe4-0009-644b68be3d90",
        "text": "1区",
        "children": [
          {
            "id": "3efc872c-cfdf-afe4-0009-645c5fba9935",
            "text": "1-1区",
            "children": [
              {
                "id": "2efc872f-cfdf-afe4-0009-7cfe2781afdc",
                "text": "1-1-1区"
              },
              {
                "id": "9efc872f-cfdf-afe4-0009-7cfe2781afdc",
                "text": "1-1-2区",
                "children": [
                  {
                    "id": "5f75a58a-4e88-a940-007c-60ff581b7164",
                    "text": "1-1-2-1组"
                  },
                  {
                    "id": "5f75a58a-4e88-a940-007c-61013f954245",
                    "text": "1-1-2-2组"
                  },
                  {
                    "id": "5f75a58a-4e88-a940-007c-610523c4f322",
                    "text": "1-1-2-3组"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "id": "5efc8730-cfdf-afe4-0009-82d65b21386f",
        "text": "2区",
        "children": [
          {
            "id": "5efc8730-cfdf-afe4-0009-82df2e3a279c",
            "text": "2-1区"
          },
          {
            "id": "5efc8730-cfdf-afe4-0009-82df2e3a279c",
            "text": "2-2区"
          }
        ]
      },
      {
        "id": "5efc8730-cfdf-afe4-0009-82d815ec979d",
        "text": "3区"
      }
    ]
  }
]

如上json，选择1-1-2的时候，后面的childre就不加载了

将1-1-2放在前面就可以

            "id": "3efc872c-cfdf-afe4-0009-645c5fba9935",
            "text": "1-1区",
            "children": [              
              {
                "id": "9efc872f-cfdf-afe4-0009-7cfe2781afdc",
                "text": "1-1-2区",
                "children": [
                  {
                    "id": "5f75a58a-4e88-a940-007c-60ff581b7164",
                    "text": "1-1-2-1组"
                  },
                  {
                    "id": "5f75a58a-4e88-a940-007c-61013f954245",
                    "text": "1-1-2-2组"
                  },
                  {
                    "id": "5f75a58a-4e88-a940-007c-610523c4f322",
                    "text": "1-1-2-3组"
                  }
                ]
           },
           {
                "id": "2efc872f-cfdf-afe4-0009-7cfe2781afdc",
                "text": "1-1-1区"
           }

然后选择其他深度没有1-1-2长的数据时，会有bug，如下图

landonzeng

深度不一致的话，可以在深度不够的地方放空的对象，像这样：

{
  "id": "",
  "text": ""
}

chenjiahan

如何获取这个tree结构的id值呢？我在@confirm里获取的只有text的值 Confirm(value, index) {console.log(value)}

landonzeng

目前版本只能获取 text 值喔，这个问题在 3.0 版本调整了，在 3.0 可以获取到完整的选项对象

chenjiahan

3.0版只能是vue 3用吗？vue 2可以用吗？

landonzeng

建议3.0的时候能够想antd-mobile里的picker那样，能自适应深度不一的tree，非常感谢！辛苦了

landonzeng

3.0 只能 Vue 3 用喔，深度的问题后续会再评估下

chenjiahan

好的，非常感谢，深度问题可以参考一下antd-mobile Picker里的Customized children demo

landonzeng

我可以通过如下代码获取id

<van-picker
              show-toolbar
              :columns="departmentTree"
              @cancel="dep_showPicker = false"
              @confirm="dep_onConfirm"
              ref="dep_picker"
            />

 var _index =
        value.length > 0
          ? value[value.length - 1] == "无"
            ? value[value.length - 2] == "无"
              ? value.length - 3
              : value.length - 2
            : value.length - 1
          : 0;

      this.dep_value = _index > 0 ? value[_index] : "";

      this.rankingData.DepId = _index > 0 ?this.$refs.dep_picker.getColumnValue(_index).id:'';
      console.log(this.rankingData.DepId)

landonzeng

[youzan/vant]Picker能实现深度不一直的tree结构绑定吗？

回答

相关问题