(vant---picker 多列聯動)

(vant—picker 多列聯動)

以下進入正題-------------------------------------------------------

界面控件規劃

    <van-picker :columns="columns" @change="onChange" />

data()裏面數據定義

      citys: {},
      columns: [],

從後端獲取到的動態數據

  dataSource: {
        code: 0,
        msg: "成功",
        data: [
          {
            id: 4,
            parentId: null,
            itemCategory: "電腦產品分類",
            number: "123456",
            createDate: "2019-09-27 15:30:52",
            remarks: "",
            subsetItem: [
              {
                id: 5,
                parentId: 4,
                itemCategory: "聯想",
                number: "147",
                createDate: "2019-09-27 15:30:52"
              },
              {
                id: 6,
                parentId: 4,
                itemCategory: "華碩",
                number: "250",
                createDate: "2019-09-27 15:30:52"
              }
            ]
          },
          {
            id: 7,
            parentId: null,
            itemCategory: "辦公用品分類",
            number: "123456",
            createDate: "2019-09-29 11:42:07",
            remarks: "辦公用品",
            subsetItem: [
              {
                id: 8,
                parentId: 7,
                itemCategory: "文件夾",
                number: "123",
                createDate: "2019-09-29 11:42:07"
              },
              {
                id: 9,
                parentId: 7,
                itemCategory: "記事本",
                number: "1232",
                createDate: "2019-09-29 11:42:07"
              }
            ]
          },
          {
            id: 10,
            parentId: null,
            itemCategory: "材料、設備供應類",
            number: "147258",
            createDate: "2019-09-29 14:03:41",
            remarks: "測試",
            subsetItem: [
              {
                id: 11,
                parentId: 10,
                itemCategory: "防水材料",
                number: "1234",
                createDate: "2019-09-29 14:03:41"
              },
              {
                id: 12,
                parentId: 10,
                itemCategory: "石棉瓦",
                number: "147",
                createDate: "2019-09-29 14:03:41"
              },
              {
                id: 13,
                parentId: 10,
                itemCategory: "鋼筋",
                number: "12344",
                createDate: "2019-09-29 14:03:41"
              },
              {
                id: 14,
                parentId: 10,
                itemCategory: "混凝土",
                number: "25863",
                createDate: "2019-09-29 14:03:41"
              },
              {
                id: 15,
                parentId: 10,
                itemCategory: "門、窗",
                number: "234",
                createDate: "2019-09-29 14:03:41"
              }
            ]
          }
        ]
      }
    };

初始化test（）方法

  mounted() {
    this.test();
  },

methods裏面的test()函數實現將從後端接收的數據封裝爲這種格式

//僅僅只是示例 作爲參考 與其他代碼無關
/**const citys = {
  '浙江': ['杭州', '寧波', '溫州', '嘉興', '湖州'],
  '福建': ['福州', '廈門', '莆田', '三明', '泉州']
};*/

 methods: {
    //onchange方法的觸發，樂意實現動態數據聯動
    onChange(picker, values) {
      picker.setColumnValues(1, this.citys[values[0]]);
    },
    test() {
      let data_com = this.dataSource.data;
      let res = {};
      data_com.forEach(function(v, i, origin) {
        if (!res[v.itemCategory]) {
          res[v.itemCategory] = [];
          v.subsetItem.forEach(function(vv, ii, origin_son) {
            res[v.itemCategory].push(vv.itemCategory);
          });
        }
      });
      this.citys = res;
      this.columns = [
        {
          values: Object.keys(this.citys),
          className: "column1"
        },
        {
          values: this.citys[0],
          className: "column2",
          defaultIndex: 2
        }
      ];
      console.log(this.citys);
    }
  }