基于v-model对element UI cascader级联选择器进行二次封装

1,379 阅读1分钟

父组件

<regions-client v-model="region_id"  @change="get_change_allower"></regions-client>

子组件

<!--
<template>
  <el-cascader
    :disabled="disabled"
    :value="value"
    :options="regions_client"
    :show-all-levels="false"
    :props="{
      expandTrigger: 'hover',
      value: 'region_id',
      label: 'region',
      children: 'son_list'
    }"
    @change="regionChange"
  ></el-cascader>
</template>
<style scoped>
</style>
<script>
import axios from 'axios'
export default {
  model: [
    {
      prop: 'value',
      event: 'input'
    }
  ],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: 'a_regions_client',
      regions_client: []
    }
  },
  mounted() {
    this.getRegions()
  },
  methods: {
    regionsfn(list) {
      list.forEach(item => {
        if (item.son_list && item.son_list.length) {
          this.regionsfn(item.son_list)
        } else {
          delete item.son_list
        }
      })
    },
    getRegions() {
      let userId = this.$store.state.userId
      let token = this.$store.state.token
      axios
        .get('/project/project_region', {
          headers: {
            id: userId,
            token: token
          }
        })
        .then(response => {
          this.regions_client = response.data.other_result_list || []
          this.regionsfn(this.regions_client)
        })
    },
    regionChange(val) {
      this.$emit('input', val)
      this.$emit('change')
    }
  }
}
</script>