vant中和element中级联选择器的封装

vant：

<van-field
                v-model="fieldValue1"
                is-link
                readonly
                label="机构："
                placeholder="请选择机构"
                @click="show = true"
              />

              <van-popup v-model="show" round position="bottom">
                <van-cascader
                  v-model="cascaderValue1"
                  title="请选择机构"
                  :options="options1"
                  :field-names="defaultParams"
                  @close="show = false"
                  @finish="onFinish"
                />
              </van-popup>

 

data() {

    return {

        options: [],

        cascaderValue:[],

        defaultParams: {

                text: "name",

                value: "id",

                children: "children",

                          },

             }

         },

<template>

 <van-field

                v-model="fieldValue"

                is-link

                readonly

                label="机构："

                placeholder="请选择机构"

                @click="show = true"

              />

              <van-popup v-model="show" round position="bottom">

                <van-cascader

                  v-model="cascaderValue"

                  title="请选择机构"

                  :options="options"

                  :field-names="defaultParams"

                  @close="show = false"

                  @finish="onFinish"

                />

              </van-popup>

</template>

 <script>

export default {

  data() {

    return {

        options: [],

        cascaderValue:[],

      defaultParams: {

        text: "name",

        value: "id",

        children: "children",

      },

        }

     },

created(){

this.init();

},

methods:{

init(){

getList().then((res) =>{

this.options = res.data

})
}

}

        }

 </script>

element同理，将 :field-names  更换为 :props 即可。

 注：仅记录个人书写代码日常