JS对象数组，vant-picker级联数据，改变对象中键的命名

vant中picker组件只认text，级联数据只认children，而且级联选择的数据嵌套深度需要保持一致，如果部分选项没有子选项，可以使用空字符串进行占位。
所以我们拿到后端给的数据，需要自己重新命名键的名字，这时候就可以用到map方法，非常的方便。

原数据格式

image.png

改造后数据格式

image.png

js代码

let _this = this;
      _this.api("commodity/windowList", {}, (resp) => {
        this.tableData = resp.data.map((item, index) => {
          item.text = item.name;
          delete item.name;
          if (item.children.length > 0) {
            item.children = item.children.map((value, i) => {
              value.text = value.name;
              delete value.name;
              return value;
            });
          } else {
            item.children = [{ text: "", id: "" }];
          }
          return item;
        });
     });

组件使用

   <van-picker show-toolbar :columns="tableData" />

页面展现

image.png