el-cascader选中后关闭

el-cascader级联选择后时不会关闭的

方案

ref="cascaderHandle"
// element
this.$refs.cascaderHandle.dropDownVisible = false
// element plus
refEl.togglePopperVisible()

级联懒加载设置数据

级联懒加载后，如果id不在第一列，编辑数据时是空的，需要强行将name赋给el-cascader来显示名称

<el-cascader ref="deptList""></el-cascader>

this.$nextTick(() => {
    this.$refs.deptList.inputValue = item.dept
});

如果没有能显示的名称，最好采用非懒加载方案

级联获取选中的Lable

this.$refs.cascaderHandle.getCheckedNodes()[0].pathLabels

可以拿到当前选中的数组，注意清空后是获取不到的，记得使用try异常处理

获取选中的数据

this.$refs.deptListRef.getCheckedNodes()[0].data

空白页问题

这是由于该控件只有发现有下级的字段就会出现页面

解决办法：将数据中下级的空的字段去掉（前后端均可）

数据懒加载示例

 <el-cascader
          v-model="editData.departmentId"
          :props="departmentProps"
          :options="departmentList"></el-cascader>

// 级联配置
departmentProps: {
  value: 'id',
  label: 'fullName',
  checkStrictly: true,
  lazy: true,
  lazyLoad: this.lazyLoad,
},

// 请求数据
lazyLoad(node, resolve) {
  let _this = this
  this.axios.post('/department/list', {
    parentId: node.value
  }).then(res => {
    if (res.data.code === 0) {
      // 设置数据
      resolve(res.data.data)
    } else {
      _this.message(res.data)
    }
    this.close()
  }).catch(function () {
    _this.message({})
  })
},

Vue3 setUp使用示例

HTML

<el-cascader
  v-model="areaCascadeValue"
  ref="areaCascadeRef"
  placeholder="请选择地区"
  :options="areaData" :props="{label:'name',value:'code',children:'child',checkStrictly: true}"
  @change="areaCascadeChange(areaCascadeRef)"
  clearable/>

JS

// 地区级联选择后事件
let areaCascadeRef = ref()
let areaCascadeValue = ref()

function areaCascadeChange(refEl) {
  if (refEl.getCheckedNodes().length > 0) {
    // 选中的label数组
    console.log(refEl.getCheckedNodes()[0].pathLabels)
    // 选择后的值数组
    console.log(areaCascadeValue.value)
    console.log(refEl.getCheckedNodes()[0].pathValues)
  } else {
    console.log('清空')
  }
}

任意选择点击文字方式

实现方案是把小圆点的样式更改为可点击，实现点击文字选择任意级别

<el-cascader
    v-model="mv"
    ref="areaCascadeRef"
    placeholder="请选择地区"
    :options="areaData" :props="{label:'name',value:'name',children:'child',checkStrictly: true}"
    @change="areaCascadeChange(areaCascadeRef)"
    popper-class="cascade-click"  // 自定义class
    clearable/>

样式更改

// 级联点击
.cascade-click
  .el-cascader-panel
    .el-cascader-menu
      // 更改选择按钮为最大，在文字上方
      .el-radio
        height: 100%
        width: 150px
        opacity: 0
        position: absolute
        // z-index: 10;
        .el-radio__input
          .el-radio__inner
            border: 0
        // 去除背景
        .el-radio__input.is-checked
          .el-radio__inner
            background: none
  // 调整文字靠左
  .el-cascader-node__label
    padding: 0