vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能

这篇具有很好参考价值的文章主要介绍了vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、TableTreeLevel组件 

<template>
      <div class='main'>
            <div class="btns">
                  <el-button type="primary" @click="expandLevel(1)">展开一级</el-button>
                  <el-button type="primary" @click="expandLevel(2)">展开二级</el-button>
                  <el-button type="primary" @click="expandLevel(3)">展开三级</el-button>
                  <el-button type="primary" @click="expandLevel(4)">展开四级</el-button>
                  <el-button type="warning" @click="putAwayLevel(0)">全部收起</el-button>
            </div>
            <div>
                  <el-table ref="multipleTableRef" :height="height" :default-expand-all=

文章来源地址https://www.toymoban.com/news/detail-612048.html

到了这里,关于vue3+ts+elementui-plus二次封装树形表格实现不同层级展开收起的功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+elementui-plus实现无限递归菜单

    效果图 实现方式是:通过给定的数据结构层数来动态生成多级菜单 下面的方法可以实现重置菜单选项为默认项(需求场景:左侧菜单切换时,上方菜单就要重置为默认选项) 通过给el-menu添加:key=\\\"menuKey\\\"实现。 实现原理::key=“menuKey” 是 Vue 中的一个特殊语法,用于控制组件

    2024年04月24日
    浏览(39)
  • vue3+elementui-plus实现一个接口上传多个文件

    首先,先使用element-plus写好上传组件,变量的定义我在这里就省略了都 然后,绑定的函数都补充一下 然后,假设有个提交按钮,点击上传文件请求接口 既然有编辑,那就应该做回显的逻辑,文件如何回显到上传组件上 over 以上主要通过代码说明,可根据自己实际情况改造

    2024年02月13日
    浏览(51)
  • vue3+elementUI-plus实现select下拉框的虚拟滚动

    网上查了几个方案,要不就是不兼容,要不就是不支持vue3, 最终找到一个合适的,并且已上线使用,需要修改一下样式: 代码如下: main.js里引用 vue文件: js代码: css代码:

    2024年02月13日
    浏览(42)
  • vue3 ts element plus form表单二次封装详细步骤 (附参数、类型详细介绍及简单使用示例)

    上篇table 表格封装 讲到项目中经常会用到 table 表格,所以做了封装。当然,form 表单使用的频率依然很高,所以和封装 table 表格的思路相似,对 form 表单也做了一个二次封装的组件。 查看国内预览站 查看国外预览站 1. EasyForm 表单组件封装 src/components/EasyForm/index.vue Form 表单

    2024年02月07日
    浏览(60)
  • 【前端vue升级】vue2+js+elementUI升级为vue3+ts+elementUI plus

    gogo code 是一个基于 AST (源代码的抽象语法结构树状表现形式)的 JavaScript/Typescript/HTML 代码转换工具,可以用它来构建一个代码转换程序来帮助自动化完成如框架升级、代码重构、多平台转换等工作。 当前 GoGoCode 支持解析和操作如下类型的代码: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    浏览(53)
  • 基于Vant组件库二次封装组件(TS+Vue3.x环境)

    1. 今天的需求是封装一个 Navigation Bar 导航栏组件,目的是给到App几乎所有的页面复用:      2. 因为之前的项目里使用过Vant组件库,笔者第一时间想到了Vant组件库中的 NavBar 组件,和当前App的需求匹配度很高。Vant组件库的 NavBar 组件: 3. 相信你也发现了,Vant组件库默认主题

    2023年04月18日
    浏览(53)
  • vue3+ts - element-plus封装上传文件图片组件

      近期做到的项目中有涉及到上传图片上传文件的需求,因为是pc管理后台,用到了element-plus框架,所以我也一起使用element-plus中的上传图片上传图片功能,并对它进行封装成一个组件,方便在多个地方使用。 1、上传文件、视频 2、上传图片   在这里上传图片和文件是分

    2024年02月12日
    浏览(53)
  • vue3 element-plus el-form的二次封装

    form表单的二次封装 vue3 element-plus el-form的二次封装 属性名 类型 默认值 说明 data Array [] 页面展示数据内容 onChange Function false 表单事件 bindProps Object {} 表单属性 formRef Object {} 表单ref ruleForm Object {} 数据

    2024年02月13日
    浏览(73)
  • vue3 基于element plus对el-pagination进行二次封装

    在vue3项目中,如果每个列表页都敲一遍分页方法,显然是不合理的,那么,下面我将基于element plus对el-pagination进行二次封装,使用vue3语法糖格式,废话不多说,开干。

    2024年02月12日
    浏览(47)
  • Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题

    前期回顾 纯前端 —— 200行JS代码、实现导出Excel、支持DIY样式,纵横合并-CSDN博客 https://blog.csdn.net/m0_57904695/article/details/135537511?spm=1001.2014.3001.5501 目录 一、🛠️  newTable.vue 封装Table 二、🚩 newForm.vue 封装搜索表单  三、📝 TS类型 srctypesglobal.d.ts 四、♻️ 页面使用功能

    2024年01月24日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包