(vant---picker 多列联动)

(vant—picker 多列联动)

以下进入正题-------------------------------------------------------

界面控件规划

    

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);
    }
  }

Alt

你可能感兴趣的:(前端vue)