element的Cascader 级联选择器插件

最新推荐文章于 2024-08-01 15:15:14 发布

小有名气bug发明家

最新推荐文章于 2024-08-01 15:15:14 发布

阅读量443

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/W936438835/article/details/124480609

版权

将联级选择器做成插件传值，注意用v-model来放一级二级的id数组更方便

子组件：

<template>
  <div class="cascader-component-container">
    <el-cascader ref="cascaderMallCatergory" :options="options" :show-all-levels="false" :props="props"  @change="menu" v-model="mallCatergoryCode"></el-cascader>
  </div>
</template>

<script>
import trade from '@/utils/trade'
  export default {
    data() {
      return {
        options:[],
        // 父组件传过来的一级二级菜单id
        mallCatergoryCode: [],
        props: {
          label: 'text',
          value:'code'
        }
      };
    },
    props:{
      data: {
        type: Array,
        default: []
      },
      value:{
        type: String,
        default: ''
      }
    },
    created() {
      this.options = this.data
      // 父组件传过来的一级二级菜单id是用，分割的字符串，现在转为数组
      this.mallCatergoryCode = this.value.split(',')
    },
    methods:{
      menu(e){
        console.log(e)
        if (this.mallCatergoryCode.length != 0) {       
        let arr = this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].pathLabels
        // arr为选中的一级菜单与二级菜单
        // console.log( arr)   
        this.$emit('changeIndustry', {
          id: e,
          title: arr
        })
      }
      }
    }
  };
</script>

父组件：

// 将一级二级两个id用value传过去
<Cascader :data="options" :value="String(form.industryId + ',' +form.industryInfoId)" @changeIndustry="changeIndustry"></Cascader>

。。。。。。

methods: {
      changeIndustry(data){
        // 选中的一二级菜单id
        this.form.industryId = data.id[0]
        this.form.industryInfoId = data.id[1]
        console.log(data)
        this.selectValue1 = data.title[0]
        this.selectValue2 = data.title[1]
      },
}