vant cascader级联选择器动态无限加载

vant 官网给出了cascader 级联选择器异步动态加载示例，示例比较简单，加载了2级，固定写法。

如下所示：

export default {
  data() {
    return {
      show: false,
      fieldValue: '',
      cascaderValue: '',
      options: [
        {
          text: '浙江省',
          value: '330000',
          children: [],
        },
      ],
    };
  },

 methods: {
    onChange({ value }) {
      if (value === this.options[0].value) {
        setTimeout(() => {
          this.options[0].children = [
            { text: '杭州市', value: '330100' },
            { text: '宁波市', value: '330200' },
          ];
        }, 500);
      }
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
  },

直接取this.options[0]给children赋值。如果要求动态无限级加载怎么办？问题的关键是从options中定位到要加载的级别给children赋值。例如要加载3级，this.options[x].children[x].children = data。

完整代码如下：

    getSpaceList() {
      this.$http
        .get({
          urlKey: "space-getSpaceList",
          params: {
            level: 1,
          },
        })
        .then((res) => {
          console.log("deviceList getSpaceList res: ", res.data);
          if (
            res.success &&
            res.data &&
            res.data.records &&
            res.data.records.length
          ) {
            //第一次加载给options赋值
            res.data.records.forEach((item) => {
              this.options.push({
                text: item.name,
                value: item.id,
                children: item.hasChildren ? [] : null, //后端返回的数据要指明是否还有下一级
              });
            });
          }
        })
        .catch((err) => {
          console.error("deviceList getSpaceId err: ", err);
        });
    },

    setOptions(selectedOptions, data) {
      let _options = this.options;
      selectedOptions.forEach((item, index) => {
        if (index) {
          //不是第一个则取下一级children
          _options = _options.children;
        }
        _options =
          _options[_options.findIndex((_item) => _item.value === item.value)];
      });
      //找到最后一级
      _options.children = data.map((item) => {
        return {
          text: item.name,
          value: item.id,
          children: item.hasChildren ? [] : null,
        };
      });
    },
    getSpaceListAgain(selectedOptions, value) {
      //获取下一级数据
      this.$http
        .get({
          urlKey: "space-getSpaceList",
          params: {
            parentId: value,
          },
        })
        .then((res) => {
          if (res.data && res.data.records && res.data.records.length) {
            this.setOptions(selectedOptions, res.data.records);
          }
        })
        .catch((err) => {
          console.error("deviceList getSpaceId err: ", err);
        });
    },
    onCascaderChange(res) {
      //点击加载下一级回调
      this.getSpaceListAgain(res.selectedOptions, res.value);
    },

如有不明白的地方，或有更好的写法，可留言讨论。

令我惊讶的是，这个vant级联选择器组件动态加载，网络上几乎没有相关文章。 

如这篇文章对您有帮助，麻烦加个粉丝。