el-Cascader二次封装，不影响原来组件的属性

<template>
  <div id="expense-type-id" :style="`width:${width}`">
    <el-cascader
      v-model="selectData"
      ref="expenseCascader"
      v-bind="_newAttrs"
      size="mini"
      v-on="_newListeners"
      :props="_newAttrs.props"
      :options="reimbursementCategoryAll"
      >
    </el-cascader>
  </div>
</template>

<script>
let ROW_ID_MAP = {} // rowId对应名称的集合
export default {
  name: 'expense-type',
  model: {
    prop: 'values',
    event: 'change'
  },
  props: {
    values: {
      type: Array,
      default: () => {
        return []
      }
    },
    width: {
      type: String,
      default: '300px'
    },
    urlParams: {
      type: Object,
      default: () => {
        return {
          disconnected: false // true停用，false未停用
        }
      }
    }
  },
  data() {
    return {
      reimbursementCategoryAll: [],
      selectData: []
    }
  },
  computed: {
    _newAttrs() {
      const newAttrs = { ...this.$attrs }
      return newAttrs
    },
    _newListeners() {
      if (Object.keys(this.$listeners).length > 0) {
        return Object.assign(this.$listeners, {
         //在这里覆盖原有的change事件
          change: this.handleChange
        })
      }
      return {}
    }
  },
  mounted() {
    this.selectData = this.values
    this.getReimbursementType()
  },
  destroyed() {
    ROW_ID_MAP = {}
  },
  methods: {
    getCascader(){
      return this.$refs.expenseCascader
    },
    /**
     * @description: 数据选中/取消监听的事件
     * @param {Array} val 选中的二维数组，[['父级ID', '子级ID']]
     */
    handleChange(val) {
      const objName = this.getDataName(val)
      this.$emit('change', val, objName)
    },
    // 请求费用类型数据
    getReimbursementType() {
      let url = ''
      this.$http.post(url, this.urlParams).then(res => {
        if (res.data.success) {
          const newResData = []
          this.handleReorganizingData(res?.data?.data || [], newResData)
          this.reimbursementCategoryAll = newResData
        } else {
          this.$message({ type:'error', message:res.data.msg })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * @description: 重新组合数据格式
     * @param {Array} data 需要处理的数据
     * @param {Array} newData 最终处理的数据格式
     */
    handleReorganizingData(data, newData) {
      if (data && data.length > 0) {
        data.forEach((item) => {
          const { rowId, title, childern } = item,
                newItem = {
                  value: rowId,
                  label: title,
                  children: null
                }
          ROW_ID_MAP[rowId] = title
          
          newData.push(newItem)
          if (childern && childern.length > 0) {
            newItem.children = []
            this.handleReorganizingData(childern, newItem.children)
          }
        })
      }
    },
    /**
     * @description: 根据rowId查找对应的名称，显示用
     * @param {Array} data
     * @return {Object} 参数1:返回二维数组，名称跟ID数组格式匹配，参数2:所有名称的拼接
     */
    getDataName(data) {
      const { props } = this._newAttrs;
      const typeNames = [],
            twoDimensionalName = []
      if (data && data.length > 0) {
        if (props.multiple) {
          data.forEach(items => {
            const parentName = ROW_ID_MAP[items[0]],
                  childName = ROW_ID_MAP[items[1]]
            typeNames.push(`${parentName}/${childName}`)
            twoDimensionalName.push([parentName, childName])
          })
        } else {
          const parentName = ROW_ID_MAP[data[0]],
                childName = ROW_ID_MAP[data[1]]
          typeNames.push(`${parentName}/${childName}`)
          twoDimensionalName.push([parentName, childName])
        }
      }
      return {
        typeNameStr: typeNames.join(','),
        twoDimensionalName
      }
    }
  }
}
</script>

<style lang="stylus">
#expense-type-id{
  .el-cascader{
    width: 100%;
  }
}
</style>