前端

el-cascader 联级选择器

2019-12-19  本文已影响0人  是嘻嘻呀

需求:根据公司id获取部门
数据:后台的接口获取公司列表根据公司id获取部门列表
options是一个数组用来渲染选择器的数组,[ {value:'', label: '',children: []} ]


image.png

<el-cascader
   separator=">"
   @change=“change
    v-model="cascaderValue"
   :options="options"></el-cascader>
<script>
export default {
  data() {
     return {
      cascaderValue: []
    }
  },
  async mounted() { //获取后台数据,写成需要的的数据结构
    await getListCompanys().then(res => {
      let data = res.data.lists.map(item => ({
        ...item,
        value:item.id,
        label:item.name,
        children:[]
      }))
      data.map((item, index)=> {
        getListDepartments({params:{companyId:item.id}}).then(res => {
          data[index].children = res.data.lists.map(item => ({
            ...item,
            value:item.id,
            label:item.name,
          }))
        })
      })
      this.options = data
    })
  },
  methods:{
    change(v) {
        console.log(v)// ["2","3"] 一次为一级二级的值
    }
  }
}
</script>


回显和设置默认值的时候按照获取到的值的格式

 this.cascaderValue = ["2","3"]
上一篇下一篇

猜你喜欢

热点阅读