elementUI-级联选择

 

<!-- -->
<template>
  <div class="category-cascader-container">
    <!-- <el-cascader
      ref="describe"
      v-model="_value"
      :options="options"
      :props="vProps"
      :size="size"
      :clearable="clearable"
      :on-change-select="selectObj"
      placeholder="请选择分类"
      @change="handleChange"
    /> -->
    <el-cascader
      ref="describe"
      v-model="_value"
      :options="options"
      :props="vProps"
      :show-all-levels="false"
      :on-change-select="selectObj"
      placeholder="请选择违约类别"
      clearable
      @change="handleChange"
    />
  </div>
</template>

<script>
// import { findCategoryList } from '@/api/variety-bank/classification'
import { breTypelistAll } from '@/api/breach-contract/index.js'

export default {
  name: 'VarietyCategoryCascader',
  // import引入的组件需要注入到对象中才能使用,
  components: { },
  model: {
    prop: 'value',
    event: 'modelChange'
  },
  // 父组件传入参数
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    clearable: {
      type: Boolean,
      default: false
    },
    disabledId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    // 这里存放数据,
    return {
      options: [],
      vProps: {
        value: 'id',
        label: 'typeName',
        expandTrigger: 'hover',
        children: 'childList',
        checkStrictly: false,
        emitPath: false
      },
      selectObj: {
        default: false
      }
    }
  },
  // 监听属性 类似于data概念,
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('modelChange', val)
      }
    }
  },
  // 监控data中的数据变化,
  watch: { },
  // 生命周期 - 创建完成（可以访问当前this实例）,数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）,html模板已渲染
  mounted() {
    this.breTypelistAll()
  },
  // 方法集合,
  methods: {
    breTypelistAll() {
      breTypelistAll({}).then(res => {
        this.options = res.data
        this.options = this.disabledFn(this.options)
        // console.log(this.options)
      }).catch(err => {
        console.log(err)
      })
    },

    disabledFn(options) {
      let tempOptions = []
      options.forEach(item => {
      // debugger
      // item.disabled = item.id === this._disabledId
        if (item.childList && item.childList.length > 0) {
          this.disabledFn(item.childList)
        } else {
          item.childList = null
        }
        tempOptions.push(item)
      })

      // console.log('tempOptions: ', tempOptions)
      return tempOptions
    },

    handleChange(val) {
      // debugger
      console.log(val)
      this._value = val
      this.$emit('change', val)
      let tempLeaf = this.$refs.describe.getCheckedNodes(true)[0]
      this.$emit('update:name', tempLeaf.data.typeName)
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.category-cascader-container {
  width: 100%;

  .el-cascader {
    width: 100%;
  }
}
</style>