Cascader级联选择器Element的使用和总结

1.选择cascader的任意级别

<el-cascader :props="defaultProps"></el-cascader> 

data(){
  return {
	defaultProps: {
	  ....
      checkStrictly:true // 设置属性为true
      ....
 	}
  }
}

2.隐藏小圆圈问题

实现效果的基本思路

1.设置小圆为相对位移
2.设置小圆的大小和父div相同
3.通过right左移抵消padding
4.设置visibility为hidden，隐藏小圆

// 自定义浮层类名
popper-class="app-option"

// 设置全局样式控制
<style lang="scss">

// 设置样式
.app-option{
  .el-cascader-panel .el-radio {
    position: absolute;
    width:100%;
    height:100%;
    right:-10px;
  }
  .el-cascader-panel .el-radio .el-radio__input {
    visibility: hidden;
  }
  
  /*长度限制*/
  .el-cascader-panel{
    .el-cascader-menu{
	  max-width: 200px;
    }
  }
}

实例：

// Cascader 级联选择器
<template>
  <div class="app">
    <el-cascader ref="mycascader"
                 :options="options"
                 popper-class="app-option"
                 v-model="value"
                 :props="{ checkStrictly: true }"
                 @active-item-change ="handleItemChange"></el-cascader>
    <el-button @click="pullAction()">下拉</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: [],
      options: []
    }
  },
  created () {
    this.getOption()
  },
  methods: {
    pullAction () {
      this.$nextTick(() => { this.$refs['mycascader'].toggleMenu() })
    },
    async getOption () {
      let data = await this.getData()
      this.options = data.options
    },
    async getData () {
      let temp
      let updataObj = {
        method: 'get',
        url: '/mockUrl',
        params: ''
      }
      await this.$api.getDataApi(updataObj.method, updataObj.url, updataObj.params).then(res => {
        console.log(res)
        temp = res
      })
      return temp
    },
    handleItemChange () {

    }
  }
}
</script>

<style lang="scss">
// 核心思路：
// 设置小圆为相对位移
// 设置小圆的大小和父div相同
// 通过right左移抵消padding
// 设置visibility为hidden，隐藏小圆
.app-option{
  .el-cascader-panel .el-radio {
    position: absolute;
    width:100%;
    height:100%;
    right:-10px;
  }
  .el-cascader-panel .el-radio .el-radio__input {
    visibility: hidden;
  }
  /*长度限制*/
  .el-cascader-panel{
    .el-cascader-menu{
	  max-width: 200px;
    }
  }
}

</style>