526互联

Element 级联选择器（Cascader）点击文字（或者一行）选中样式回显

发布时间 2023-04-24 16:22:45作者: DL·Coder

预览图

实现的效果

1、选中最后一级，下拉框收缩
2、下拉框的每一行点击都可以选中
3、点击radio，也能实现选中最后一级，下拉框收缩

组件代码

<el-cascader
  ref="cascaderHandleRef"
  v-model="languageIds"
  class="width-260"
  :options="languageList"
  :props="{
    checkStrictly: true,
    expandTrigger: 'hover',
    value: 'id',
    label: 'path' }"
  @change="changeLanguage"
  clearable>
  <span slot-scope="{node, data}" style="margin-left: -10px;padding-left:10px;display:block;" @click="clickNode($event, node)">{{ data.path }}</span>
</el-cascader>

data

languageList: [],
languageIds: [],

方法

clickNode ($event, node) {
  $event.target.parentElement.parentElement.firstElementChild.click();
},
changeLanguage(node) {
// 选中最后一级，下拉框收缩
  if (!this.$refs.cascaderHandleRef.getCheckedNodes()[0]?.hasChildren) {
    this.$refs.cascaderHandleRef.dropDownVisible = false;
  }
},

传送门：https://blog.csdn.net/Sunshine__Girl/article/details/108137036