(vant---picker 多列联动)

最新推荐文章于 2024-07-30 16:21:45 发布

Janain

最新推荐文章于 2024-07-30 16:21:45 发布

阅读量4.4k

点赞数 4

分类专栏：前端vue 文章标签： app/公众号 js vant vant多列联动 vue

本文链接：https://blog.csdn.net/t_y_y_t/article/details/102476632

版权

这篇博客详细介绍了如何使用Vant库在Vue应用中实现多列联动的Picker组件。首先，规划了界面控件的数据结构，接着在data()中定义了初始数据。然后，讨论了如何获取后端动态数据并进行初始化处理。最后，重点讲解了在methods中的test()函数，该函数用于将接收到的后端数据转换为适合Picker组件的格式。

摘要由CSDN通过智能技术生成

(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"