NutUi picker拾取器联动选择记录

根据NutUi 官网 文档提取出多级联动示例，直接可在vue 页面直接使用

<template>

<div>

  <nut-cell

  :show-icon="true"

  title="请选择城市"

  :desc="cityCustmer"

  @click.native="openPicker">

</nut-cell>

  <nut-picker :is-visible="isVisibleShow" :default-value-data="defaultValueData" title="请选择"

  :list-data="custmerCityData" @close="closeSwitch"

  @confirm="setChooseValueCustmer" @choose="updateChooseValueCustmer"

  @close-update="closeUpdateChooseValueCustmer" />

</div>

</template>

<script>

const APIData = [

  {

    label: 1,

    array: [

      {

        label: 1,

        value: '朝阳区'

      },

      {

        label: 2,

        value: '海淀区'

      },

      {

        label: 3,

        value: '大兴区'

      },

      {

        label: 4,

        value: '东城区'

      },

      {

        label: 5,

        value: '西城区'

      },

      {

        label: 6,

        value: '丰台区'

      }

    ]

  },

  {

    label: 2,

    array: [

      {

        label: 1,

        value: '黄浦区'

      },

      {

        label: 2,

        value: '长宁区'

      },

      {

        label: 3,

        value: '普陀区'

      },

      {

        label: 4,

        value: '杨浦区'

      },

      {

        label: 5,

        value: '浦东新区'

      }

    ]

  }

];

export default {

  name: 'CellPicker',

  desc: '下拉选择组件',

  props: {

    curPicker: Array

  },

  data() {

    return {

      cityCustmer:'请选择',

      isVisibleShow: false,

      defaultValueData: null,

      listData: [

        [

          {

            label: 1,

            value: '南京市'

          },

          {

            label: 2,

            value: '无锡市'

          },

          {

            label: 3,

            value: '海北藏族自治区'

          },

          {

            label: 4,

            value: '北京市'

          },

          {

            label: 5,

            value: '连云港市'

          },

          {

            label: 6,

            value: '浙江市'

          },

          {

            label: 7,

            value: '江苏市'

          },

          {

            label: 8,

            value: '大庆市'

          },

          {

            label: 9,

            value: '绥化市'

          },

          {

            label: 10,

            value: '潍坊市'

          },

          {

            label: 11,

            value: '请按市'

          },

          {

            label: 12,

            value: '乌鲁木齐市'

          }

        ]

      ],

      custmerCityData: [

        [

          {

            label: 1,

            value: '北京'

          },

          {

            label: 2,

            value: '上海'

          }

        ]

      ]

    }

  },

  mounted() {

  },

  methods: {

    openPicker() {

      this.defaultValueData = [this.listData[0][3]]

      this.isVisibleShow = true

    },

    closeSwitch() {

      this.isVisibleShow = false

    },

    setChooseValueCustmer(chooseData) {

      console.log("setChooseValueCustmer",chooseData)

      var str = chooseData.map(item => item.value).join('-');

      this.cityCustmer = str;

      // this.$emit('confirem', e)

    },

    closeUpdateChooseValueCustmer(self, chooseData) {

      console.log("closeUpdateChooseValueCustmer", chooseData)

      //此处模拟查询API，如果数据缓存了不需要再重新请求

      setTimeout(() => {

        let { label, value } = chooseData[0]

        var resItems = APIData.find(item => item.label == label)

        if (resItems && resItems.array.length) {

          this.$set(this.custmerCityData, 1, resItems.array)

          // 复原位置

          self.updateChooseValue(self, 0, chooseData[0])

          self.updateChooseValue(self, 1, chooseData[1])

        }

      }, 100)

    },

    updateChooseValueCustmer(self, index, resValue, cacheValueData) {

      console.log("updateChooseValueCustmer", index, resValue, cacheValueData)

      // 本demo为二级联动，所以限制只有首列变动的时候触发事件

      if (index === 0) {

        //此处模拟查询API，如果数据缓存了不需要再重新请求

        let { label, value } = resValue

        setTimeout(() => {

          var resItems = APIData.find(item => item.label == label)

          if (resItems && resItems.array.length) {

            this.$set(this.custmerCityData, 1, resItems.array)

            // 更新第二列位置

            self.updateChooseValue(self, index + 1, this.custmerCityData[1][0])

          }

        }, 100)

      }

    }

  }

}

</script>

<style lang="scss" scoped>

/deep/.nut-picker-control .nut-picker-cancel-btn {

  color: #bebebe;

}

/deep/.nut-picker-control .nut-picker-confirm-btn {

  color: #4e8dee;

}

</style>