使用el-cascader封装一个下拉级联按钮BaseCascadeDropDown

已于 2024-09-04 10:23:29 修改
阅读量361 收藏
点赞数 2
文章标签： vue.js elementui javascript
于 2024-08-30 10:54:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45549481/article/details/141712220
版权

下拉级联按钮，未展开时
在这里插入图片描述

使用el-pop + el-cascader-panel封装

每次级联树展开时，需要动态计算弹窗的宽度，还不如直接使用el-cascader + el-button进行封装

<template>
  <el-popover
      ref="popover"
      placement="bottom"
      width="200"
      :trigger="trigger"
      v-model="visible"
    >
      <el-cascader-panel
        :options="children"
        @change="handleCascaderClick"
        :props="cascaderProps"
      ></el-cascader-panel>
      <slot name="button" slot="reference">
        <el-button
          v-if="children.length"
          :type="buttonConfig.type || 'text'"
          :size="buttonConfig.size"
          v-permissions="getPermissionCode(buttonConfig)"
          @click="handleClick(buttonConfig)"
          v-bind="{ ...buttonConfig }"
          >
          {{ buttonConfig.btn}}
          <i
            class="el-icon-arrow-down el-icon--right"
            v-if="!buttonConfig.hideArrow"
          ></i>
        </el-button>
      </slot>
    </el-popover>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

const defaultCascaderProps = {
  expandTrigger: 'hover',
  value: 'key',
  label: 'btn',
}
@Component({
  name: 'BaseCascadeDropDown' //? 级联下拉按钮
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) buttonConfig!: any //? 下拉按钮的配置
  @Prop({ default: () => ({}) }) data?: any //? 下拉按钮的数据，用于动态属性的配置，后面也会将数据传出入
  @Prop({ default: () => [] }) children: any[] //? 下拉按钮的选项
  @Prop({ default: 'hover' }) trigger: string //? 气泡的触发方式，，默认悬浮展示
  @Prop({ default: 'hover' }) expandTrigger: string //? 级联次级菜单的展开方式，默认悬浮展示
  @Prop({ default: () => defaultCascaderProps }) cascaderProps: any //? 级联的配置选项，次级菜单展开方式，默认悬浮展示
  //* 事件监听
  //* eventHandler //? 按钮列的总事件监听

  hide = false
  visible = false

  mounted() {
    const popoverRef: any = this.$refs.popover
    // if (!popoverRef.popperElm.children.length) {
    //   this.hide = true
    // }
  }
  togglePopover() {
    this.visible = !this.visible;
  }

  getPermissionCode(button) { //todo 获取权限码
    if (typeof button.permissionCode === 'function') {
      return button.permissionCode(this.data, button.key)
    }
    return button.permissionCode
  }

  handleClick(button) {
    this.togglePopover()
    let loadingInstance
    if (button.needLoading) {
      loadingInstance = this.$loading({
        lock: button.loadLock || true,
        text: button.loadText || 'Loading',
        spinner: button.loadSpinner || 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
    const params = {
      event: button.key,
      data: this.data,
      extraParams: {
        button,
        closeLoading: () => {
          button.needLoading && loadingInstance.close()
        }
      }
    }
    if (typeof button.submit === 'function') {
      button.submit(params)
    }
    this.handleEventHandler(params)
  }
  handleCascaderClick(value) {
    this.visible = false;
    const subButtonConfig = this.children.find(
      (subButton) => subButton.key === value
    ) //? 子按钮的配置
    let loadingInstance
    if (subButtonConfig.needLoading) {
      loadingInstance = this.$loading({
        lock: subButtonConfig.loadLock || true,
        text: subButtonConfig.loadText || 'Loading',
        spinner: subButtonConfig.loadSpinner || 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
    const params = {
      event: subButtonConfig.key,
      data: this.data,
      extraParams: {
        button: subButtonConfig,
        subButtonConfig,
        closeLoading: () => {
          subButtonConfig.needLoading && loadingInstance.close()
        }
      }
    }
    if (typeof subButtonConfig.submit === 'function') {
      subButtonConfig.submit(params)
    }
    this.handleEventHandler(params)
  }
  needHidden(button) {
    //todo 是否需要按钮隐藏
    if (typeof button.hidden === 'function') {
      return !!button.hidden(this.data, button.key || button.permissionCode)
    }
    return button.hidden
  }
  needDisabled(button) {
    //todo 判断是否需要禁用按钮
    if (typeof button.disabled === 'function') {
      return button.disabled(this.data, button.key || button.permissionCode)
    }
    return button.disabled
  }
  handleEventHandler({ event, data, extraParams = {} }) {
    //todo 调用外部方法
    this.$emit('eventHandler', {
      event,
      data,
      extraParams
    })
  }
}
</script>

<style lang="scss" scoped>

</style>

使用el-cascader + el-button进行封装

1、隐藏el-cascader里面的input框；
2、点击按钮时，弹出el-cascader会自动计算宽度的弹窗
3、每次点击（后）需要将勾选状态重置 —— 发现el-cascader组件内部问题，修改其勾选状态不生效，直接修改el-cascader组件内的数据也不生效，只能将其销毁重建

<template>
  <div>
    <el-cascader
      ref="cascader"
      v-model="value"
      v-if="cascaderShow"
      class="cascader_dropdown"
      :options="children"
      @change="handleCascaderClick"
      :props="cascaderProps"
    ></el-cascader>
    <slot name="button">
      <el-button
        v-if="children.length"
        :type="buttonConfig.type || 'text'"
        :size="buttonConfig.size"
        v-permissions="getPermissionCode(buttonConfig)"
        @click="handleClick(buttonConfig)"
        v-bind="{ ...buttonConfig }"
        >
        {{ buttonConfig.btn }}
        <i
          class="el-icon-arrow-down el-icon--right"
          v-if="!buttonConfig.hideArrow"
        ></i>
      </el-button>
    </slot>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { isBoolean } from 'xe-utils'

const defaultCascaderProps = {
  expandTrigger: 'hover',
  multiple: false,
  value: 'key',
  label: 'btn',
  children: 'children'
}
@Component({
  name: 'BaseCascadeDropDown' //? 级联下拉按钮
})
export default class extends Vue {
  @Prop({ default: () => ({}) }) buttonConfig!: any //? 下拉按钮的配置
  @Prop({ default: () => ({}) }) data?: any //? 下拉按钮的数据，用于动态属性的配置，后面也会将数据传出入
  @Prop({ default: () => [] }) children: any[] //? 下拉按钮的选项
  @Prop({ default: 'hover' }) trigger: string //? 气泡的触发方式，，默认悬浮展示
  @Prop({ default: 'hover' }) expandTrigger: string //? 级联次级菜单的展开方式，默认悬浮展示
  @Prop({ default: () => defaultCascaderProps }) cascaderProps: any //? 级联的配置选项，次级菜单展开方式，默认悬浮展示
  //* 事件监听
  //* eventHandler //? 按钮列的总事件监听

  value = []
  hide = false
  visible = false
  cascaderShow = true

  mounted() {
    const cascaderRef: any = this.$refs.cascader;
    // if (!popoverRef.popperElm.children.length) {
    //   this.hide = true
    // }
  }
  toggleDropDownVisible(visible?) {
    const cascaderRef: any = this.$refs.cascader;
    this.visible = isBoolean(visible) ? visible : !this.visible;
    cascaderRef.toggleDropDownVisible(this.visible)
  }

  getPermissionCode(button) { //todo 获取权限码
    if (typeof button.permissionCode === 'function') {
      return button.permissionCode(this.data, button.key)
    }
    return button.permissionCode
  }

  findCurrentItem(valuePath, data) { //todo 根据路径找到对应树形结构中的某个节点
  const { value, children } = this.cascaderProps;
    if (Array.isArray(valuePath) && valuePath.length) {
      const currentItem = data.find(item => item[value] === valuePath[0])
      valuePath.shift()
      if (!valuePath.length) { //* 没有下一级
        //* 找到当前级别的数据
        return currentItem
      }
      return this.findCurrentItem(valuePath, currentItem[children])
    }
  }

  handleClick(button) {
    this.toggleDropDownVisible()
    let loadingInstance
    if (button.needLoading) {
      loadingInstance = this.$loading({
        lock: button.loadLock || true,
        text: button.loadText || 'Loading',
        spinner: button.loadSpinner || 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    }
    const params = {
      event: button.key,
      data: this.data,
      extraParams: {
        button,
        closeLoading: () => {
          button.needLoading && loadingInstance.close()
        }
      }
    }
    if (typeof button.submit === 'function') {
      button.submit(params)
    }
    this.handleEventHandler(params)
  }
  handleCascaderClick(valuePath) {
    if (Array.isArray(valuePath) && valuePath.length) {
      const subButtonConfig = this.findCurrentItem(valuePath, this.children)
      let loadingInstance
      if (subButtonConfig.needLoading) {
        loadingInstance = this.$loading({
          lock: subButtonConfig.loadLock || true,
          text: subButtonConfig.loadText || 'Loading',
          spinner: subButtonConfig.loadSpinner || 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }
      const params = {
        event: subButtonConfig.key,
        data: this.data,
        extraParams: {
          button: subButtonConfig,
          subButtonConfig,
          closeLoading: () => {
            subButtonConfig.needLoading && loadingInstance.close()
          }
        }
      }
      if (typeof subButtonConfig.submit === 'function') {
        subButtonConfig.submit(params)
      }
      this.handleEventHandler(params)
    }
    this.toggleDropDownVisible(false) //* 关闭弹窗
    this.visible = false
    this.cascaderShow = false; //* 临时将其销毁重建
    this.$nextTick(() => {
      this.cascaderShow = true;
    })
  }
  needHidden(button) {
    //todo 是否需要按钮隐藏
    if (typeof button.hidden === 'function') {
      return !!button.hidden(this.data, button.key || button.permissionCode)
    }
    return button.hidden
  }
  needDisabled(button) {
    //todo 判断是否需要禁用按钮
    if (typeof button.disabled === 'function') {
      return button.disabled(this.data, button.key || button.permissionCode)
    }
    return button.disabled
  }
  handleEventHandler({ event, data, extraParams = {} }) {
    //todo 调用外部方法
    this.$emit('eventHandler', {
      event,
      data,
      extraParams
    })
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .cascader_dropdown {
    input {
      display: none;
    }
  }
  // .el-cascader__dropdown {
  //   .el-cascader-menu {
  //     min-width: 130px !important;
  //   }
  // }
}
</style>
英俊潇洒美少年
关注
使用el-cascader组件写下拉级联多选并且具有全选功能
wlijun_0808的博客
03-20 2799
使用el-cascader组件写下拉级联多选并且具有全选功能
element ui使用级联选择器el-cascader封装下拉框
weixin_43238931的博客
12-15 2388
之前项目中使用drownmenu封装下拉框，后面出现了一系列问题，用户体验感很不好。现在重新使用cascader重新封装下拉框组件。
详解为element-ui的Select和Cascader添加弹层底部操作按钮
12-28
如下图这样把操作按钮放在select弹层底部是一种挺常见的设计方式 但是很遗憾element-ui没有给我们提供这个插槽，我们想实现这个功能只能重写组件或者等官方更新吗，答案当然是否定的！ 花了一点时间通过一个函数实现这个功能，支持el-select和el-cascader,效果点击预览 其实逻辑很简单，把下面这段html插入到指定位置就行了 <ul class=el-cascader-menu__list xss=removed> <li class=el-cascader-node styl
el-popper el-cascader__dropdown级联选择器的selenium定位问题
seattle2009的博客
03-01 1114
级联选择器隐藏元素的定位，通过try/except两次来实现。
vue+elementui 在el-cascader级联选择器每一级的下面动态添加按钮
qq_63035207的博客
02-03 2459
思路是在expand-change事件(点击第一级菜单展开后触发)的时候 在第二级的最下面添加一个按钮。思路是在visibleChange事件触发时(点击控件展开下拉框时)在第一个节点页添加前两个按钮。因为是我公司的业务所以数据源什么的大家自己改一下 这些事件具体是什么element官方文档都有。动态在下拉框下面添加几个按钮,每次切换下拉框的节点都销毁后再创建,大概效果就是长这样。到这个时候 展开第一级下拉框时前两个按钮已经出来了 怎么在第二级添加按钮呢。
vue3 element el-cascader-panel 两个级联面板功能关联
最新发布
weixin_42498594的博客
05-18 487
【代码】vue3 element el-cascader-panel 两个级联面板功能关联。
element UI el-cascader 手动收起下拉方法
似水流年，举重若轻
03-01 1809
1.在元素上加ref，点击方法里 用this.$refs.xxx.dropDownVisible = false，这样就收起了。 <el-cascader ref="xxx" :options="options" :props="{ checkStrictly: true }" clearable @change="c"> </el-cascader> methods:{ c(v){ console.log(v)
vue cascader级联下拉和数据回显
是雅哥吖
04-26 2931
最近在做项目的时候，有个部门级联下拉功能的实现，首次接触，然后根据el-cascader这个组件查看他的属性和方法，在进行数据回显得时候，我用了最笨的方法，就是获取所有的部门数据，然后根据这条数据的部门ID进行遍历比对，由于cascader这个组件它存的是数组，所以将比成功的放在数组中，然后令ruleForm.departmentId等于这个数组。下面附代码： 1、在form表单 <e...
VueJS Element UI自定义控件：Cascader级联下拉框，解决查看时树形数据回显
QC班长的博客
11-16 5527
下拉框在业务开发中还是很常用的，比如下拉菜单，上级组织机构选择，各种分类等等。在用到Element UI的Cascader 级联选择器下拉框组件时，不能满足我的需求，就在此基础上自定义了控件。 存在的问题： 1、Element UI官方的级联下拉控件el-cascader选择数据后，被选中的数据是数组形式的，例如：[7,6,1]，但在数据库中保存时，一般只保存ID，不保存数组。所以就需要我们...
记录一次解决element中Cascader 级联选择器懒加载实现城市联动不能返显的问题
qq_39183005的博客
12-15 1131
这里先描述一下出现问题过程： 1、要做数据的增删改查，在数据编辑的时候是从右侧打开抽屉中显示form表单，我将抽屉封装成了一个组件单独抽离。就需要在父组件中将 :visible.sync="dialogVisible"绑定的dialogVisible置为true，然后在抽屉事件的open中调编辑详情接口，级联组件懒加载自动执行城市联动接口。 2、再说一下懒加载中城市返显要必备的条件：组件绑定的cityList是个数组，并且里面有城市id，例如：北京市 北京城区 东城区 要想返显这个数据则绑定的数组中是[1
el-dropdown 结合 el-cascader-panel 实现一级多选二级单选；清除二级选项，清除全部选项效果
Phoebe_helloworld的博客
08-17 5881
el-dropdown 结合 el-cascader-panel 实现一级多选二级单选；清除二级选项，清除全部选项效果。
2在页面里面写一个 添加的按钮 点击按钮1弹出提示框
weixin_69484761的博客
12-28 543
通过添加不同的class名称，可以对卡片进行样式调整。这通常用于控制一个对话框的显示或隐藏状态。，表示对话框一开始是隐藏的。这是一个使用Element UI组件库的弹出框（对话框）组件。定义了一个具有名为"box-card"的自定义类名的卡片容器。是一个布尔类型的数据属性，用于控制对话框是否显示。是一个布尔类型的数据属性，用于控制对话框是否显示。属性，并在点击按钮时执行相应的逻辑来显示添加对话框。的值发生改变时，对话框的显示状态也会自动更新。属性，可以实现对话框的显示和隐藏。，表示对话框一开始是隐藏的。
Vue项目 给elementui 的Cascader级联选择器添加按钮
m0_60648668的博客
08-02 2747
根据需求需要给Cascader底部添加按钮,如图: elementui中没有给出符合的组件,这里奉上方法参考 如果需要添加事件:
vue3+elementPlus：el-select选择器里添加按钮button
意初的博客
10-08 2395
vue3+elementPlus：el-select选择器里添加按钮button，在el-select的option后面添加button
el-select的el-option添加操作按钮插槽后实现勾选与按钮操作分离
weixin_60886885的博客
10-11 2008
当我们点击el-option时无法区分是勾选el-option还是点击了el-option选项文字后面的按钮，其实只要在后面的编辑和删除的操作按钮的。
＜el-select＞ 在下拉选项框中添加一个按钮，实现子选项的添加
tyjlearning的博客
07-24 2113
【代码】＜el-select＞ 在下拉选项框中添加一个按钮，实现子选项的添加。
Cascader 级联选择器定位问题解决
junhian的博客
04-26 1210
Cascader 级联选择器定位问题解决
果需要修改 el-cascader 组件中的级联选择器面板的高度
06-07
如果需要修改 `el-cascader` 组件中的级联选择器面板的高度，可以通过以下方式进行： 1. 在 `el-cascader` 组件中添加 `popper-class` 属性，并指定一个自定义的样式类名，如：`<el-cascader popper-class="custom-class"></el-cascader>`。 2. 在样式文件中定义自定义的样式类名，并设置高度属性，如： ``` .custom-class .el-cascader-menu { max-height: 300px; /* 设置最大高度为 300px */ } ``` 这样就可以修改级联选择器面板的高度了。需要注意的是，如果设置了 `max-height` 属性，当级联选择器面板内容超过指定高度时，会出现滚动条。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值