vant 自定义多级联动组件

<template>

  <div class="addressWrapper">

    <van-field v-if="required && Tilname.value"

               readonly

               is-link

               clickable

               name="area"

               :value="Tilname.value"

               :label="Tilname.name"

               @click="getArea()" />

    <van-field v-if="!required && Tilname.value"

               readonly

               is-link

               clickable

               required

               name="area"

               :value="Tilname.value"

               :label="Tilname.name"

               @click="getArea()" />

    <van-field v-if="!Tilname.value && !required"

               readonly

               is-link

               clickable

               required

               name="area"

               :value="Tilname.value"

               :label="Tilname.name"

               @click="getArea()" />

    <van-field v-if="!Tilname.value && required"

               readonly

               is-link

               clickable

               name="area"

               :value="Tilname.value"

               :label="Tilname.name"

               @click="getArea()" />

    <van-field v-if="!Tilname.value && required"

               readonly

               is-link

               clickable

               name="area"

               :value="Tilname.value"

               :label="Tilname.name"

               @click="getArea()" />

    <van-popup v-model="cityVisable"

               position="bottom">

      <!--Picker一般结合遮罩层使用 -->

      <!--显示上方取消和完成按钮-->

      <!--//自定义标题栏内容-->

      <!--//自定义Picker滚动条中显示的文字（因为Picker中的每一项都是一个json）-->

      <!--//Picker的数据-->

      <!--//当Picker选中项改变时触发-->

      <!--//当点击取消按钮时触发-->

      <!--//当点击完成按钮时触发-->

      <van-steps direction="vertical"

                 v-for="(item,index) in livingList"

                 :key="index"

                 @click-step="opalits(index)">

        <van-step>

          <h3>{{item.name}}</h3>

        </van-step>

      </van-steps>

      <van-picker show-toolbar

                  title="请选择所在地区"

                  value-key="name"

                  :columns="areaList"

                  @cancel="onCancel"

                  @confirm="onAreaConfirm" />

    </van-popup>

  </div>

</template>

<script>

export default {

  components: {},

  props: {

    Tilname: {

      type: Object,

      default () {

        return

      }

    },

    required: {

      type: String,

      default: ''

    }

  },

  data () {

    return {

      livingList: [],

      cityVisable: false,  //遮罩层显示或隐藏

      areaList: [],        //自定义数据三级结构

      showliving: false,

      livingAddressCode: '',//编码

      livingAddressName: '',//名称 //Picker拿到的值

    }

  },

  created () {

  },

  watch () {

  },

  mounted () {

    this.livingAddressName = this.Tilname.value

    this.open()

    // if (this.livingList.length > 0) {

    //   console.log(this.livingList, 11111);

    // }

  },

  methods: {

    // 根

    async getArea () {

      if (this.livingList.length > 0) {

        console.log(this.livingList);

        this.cityVisable = true

        if (this.livingList.length === 5) {

          await this.getParentId(this.livingList[this.livingList.length - 2].code)

        } else {

          await this.getParentId(this.livingList[this.livingList.length - 1].code)

        }

        return;

      }

      this.cityVisable = true

      const params = {

        topType: true,

        addrCode: '000000000000'

      }

      initAddrTm(params).then(res => {

        if (res.code == 200) {

          let data = res.result

          console.log(data, 'data')

          this.areaList = []

          data.forEach((i, index) => {

            this.areaList.push({

              name: i.label,

              code: i.value

            })

          })

          // this.areaList = this.areaList

          // this.getParentId(this.areaList[0].values[0].code, 1)

        }

      })

    },

    opalits (value) {

      console.log(this.livingList[value].code, 'j2k2jkj')

      if (value == 0) {

        this.livingList = []

        this.getArea()

      } else {

        this.getParentId(this.livingList[value - 1].code)

        this.livingList.splice(value, 5 - value)

      }

    },

    // 子

    async getParentId (is) {

      const params = { upCode: is }

      loadAddrTm(params).then(res => {

        if (res.code == 200) {

          let data = res.result;

          let values = [];

          data.forEach((i, item) => {

            values.push({

              name: i.label,

              code: i.value

            })

          })

          console.log(values, '12121212')

          this.areaList = values

          console.log(this.areaList, '3232332')

        }

      })

    },

    //当地区选择变化时

    onAreaChange (picker, values, index) {

      if (index < 5) {

        this.getParentId(values[index].code, index + 1);                        //传参 参数为上层选择的地区的code

      }

    },

    //点击取消

    onCancel () {

      this.cityVisable = false;

    },

    // 回显

    open () {

      this.livingList.push({

        name: '湖南省',

        code: 430000000000

      })

    },

    //点击确定

    onAreaConfirm (value) {

      console.log(value, '11212')

      if (this.livingList.length < 5) {

        this.livingList.push({

          name: value.name,

          code: value.code

        })

        console.log(this.livingList, 'value.code')

        this.livingAddressCode = value.code

        this.Tilname.value = `${value.name}`

        this.getParentId(value.code)

        if (this.livingList.length === 5) {

          this.cityVisable = false;

        }

      } else {

        this.cityVisable = false;

      }

      // this.cityVisable = false;

    }

  }

};

</script>

<style lang="less" scoped>

.addressWrapper {

  background: #fff;

}

.close {

  display: flex;

  justify-content: space-between;

  line-height: 0.7rem;

  font-size: 0.4rem;

}

.addressWrapper h4 {

  text-align: center;

}

.addressWrapper .tabs {

  margin-top: 20px;

  padding: 15px;

  border: 1px solid;

}

.addressWrapper .content {

  margin-top: 20px;

  height: 200px;

  overflow: scroll;

}

.item {

  line-height: 40px;

  font-size: 14px;

}

.select {

  color: red;

}

/deep/ .van-field__control {

  text-align: right;

}

</style>