elementUI 树形表格展开折叠default-expand-all动态改变状态无效原因

最新推荐文章于 2024-05-15 16:32:52 发布
最新推荐文章于 2024-05-15 16:32:52 发布
阅读量6.2k 收藏 18
点赞数 7
分类专栏： vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41038929/article/details/118214481
版权

elementUI 树形表格default-expand-all动态改变状态无效原因

在写树形表格的时候我发现没有办法动态展开和收起表格，在动态修改default-expand-all的时候值发生改变了，但是页面并未有任何改变，很是惆怅。把解决的代码放到下面

  1. 表格部分
    这是表格部分，重点在前面的v-if，这里是重新渲染表格的方法

  2. js部分

data(){
   
	isExpandAll: false,//是否全部展开 默认全部折叠
    refreshTable:
最低0.47元/天 解锁文章
欣琪
关注
  • 7
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
ANWExpandScrollView：展开-折叠滚动视图-捏手势进行动画处理
02-04
ANWExpandScrollView：展开-折叠滚动视图-捏手势进行动画处理
el-table中树形表格使用属性default-expand-all失效
weixin_44032619的博客
07-11 1458
el-table中树形表格使用属性default-expand-all失效，无法全部展开数据
el-tree动态设置是否全部展开属性，值已经改变，但是没有展开或折叠
m0_50981596的博客
04-29 591
el-tree动态设置是否全部展开属性，值已经改变，但是没有展开
使用element-ui table expand展开行实现手风琴效果
01-21
问题讲解： 在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题，可以说饿了么团队在这个UI框架的文档撰写已经非常不错了，不过还是有一些方法乍一看让人摸不着头脑，有些table的常用功能示例代码提供的不是非常详细，所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。 先展示一下ElementUI官方提供的示例代码效果图 可以看到官方代码中在这边没有让这个可展开table自动折叠的功能，我点击了别的标签页后上次点击的行仍旧处在一个展开的状态，而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态，体验不是特别好，可以说有点糟糕了，但是我后来在后面的
展开或折叠细节「Expand or collapse details」-crx插件
03-24
展开或折叠细节 一个简单的助手来扩展或折叠全部 <details>标签。 </details> 支持语言:English (United States)
element-ui tree树形控件:default-checked-keys 设置空数组 默认还是选中状态问题
01-20
今天在写个后台管理系统，使用了element-ui的组件库。在做角色权限，通过tree控件展示权限列表的时候，用:default-checked-keys绑定数据，这个属性不能实现双向绑定，只能用于初始化选择状态。如果想双向绑定只能使用组件的方法setCurrentKey来实现。想直接绑定数据来的方便，只能修改源码。在tree的源码 属性中重新定义一个属性，在watch中监听，调用 this.store.setCheckedKeys()。以下是作者修改的代码，第一次写博客分享给大家，不喜勿碰，还望更多大神多多指教。 props: { ..... pCheckedKeys: Array, .
element tree树组件default-expand-all属性设置默认展开的节点
weixin_45799001的博客
12-04 5191
el-table 动态default-expand-all 不生效
阿坤的博客
11-10 3157
动态修改 default-expand-all 不生效解决办法
element table tree default-expand-all 动态全部展开关闭功能
xuelong的博客
09-08 2094
vue项目中使用elementUI的table组件的树结果时，需要动态的展开关闭节点（在tree组件中也可以使用）。
el-table 展开行默认关闭或打开
然而老干妈早就看穿了一切
02-19 6612
转载博客地址：https://blog.csdn.net/qq_35257117/article/details/97906637?utm_source=distribute.pc_relevant.none-task 1.第一种方式： 使用 :default-expand-all=“isExpand” 优点：方便，简单，页面初始化的时候给 delfault-expand-all 赋值展开或关闭...
Element table组件动态设置expand展开项以及同时只展开一项
热门推荐
lucky_fd的博客
04-21 1万+
场景一：table表格展开项过多，界面数据太繁杂影响查看。场景二：Element Table加载的数据发生变化时，会重新渲染界面，之前的展开项会自动关闭，用户需要手动去打开展开项，频繁的手动操作会极大的影响客户体验。
discourse-expand-collapse-banner:Discourse创建可扩展或折叠的横幅的主题组件
05-06
话语扩展折叠横幅 Discourse创建可扩展或折叠的横幅的主题组件 桌面检视 移动视图-肖像 流动检视-风景 有关更多信息， 访问： :
Ant Design中Tree使用defaultExpandAll属性后不会默认展开所有节点怎么办？
Reggie97的博客
04-18 537
本文介绍Ant Design中Tree使用defaultExpandAll属性后不会默认展开所有节点可能产生的两个问题：1、TreeData数据未初始化完成，还未开始渲染，就已经开始展开。2、defaultExpandAll属性无法生效，与expandedKeys属性冲突。
el-table 指定层级展开
carbonzhao的专栏
09-20 1194
核心代码注意：这三个属性，一定要注意使用。id即接口给你返回的每个节点的id，具体看你后端接口返回的命名。isExpandAll在data中默认为false意为不要全部默认展开，即全部自动收起。再来看看被展开节点的设置：将要展开节点的id放入expandRowKeysList数组中。如果你默认展开第二级，则修改以上代码，将二级节点的id压入数组中即可。先来看看页面默认全部展开时页面的显示效果：所有节点被展开，一眼望去杂乱无章！那么如何实现只展开指定的节点呢？最终效果如下：一眼看去很舒爽。
vue3中，el-table级联表格——default-expand-all & row-key & show-overflow-tooltip & 树状表格计算总价合计总计
最新发布
weixin_44867717的博客
05-15 370
【代码】vue3中，el-table级联表格——default-expand-all & row-key & show-overflow-tooltip & 树状表格计算总价合计总计。
element el-table 动态设置展开折叠default-expand-all方法
qq_23207707的博客
12-22 4766
elementui vue el-table
element-ui中tree节点默认展开动态设置
weixin_67644104的博客
01-06 5219
使用key使tree组件重新渲染
Vue2&Element-UI中Table树形结构默认全部展开和关闭的实现方案
月色真美121的博客
07-23 4855
element ui 中table表格全部展开和收起的两种实现方式
ElementUI el-table default-expand-all属性
m0_63451467的博客
01-28 597
ElementUI el-table default-expand-all属性无法动态改变
elementui 树形表格中子节点展开行表单
05-27
对于 ElementUI 的树形表格中的子节点展开行表单，你可以在表格的 `row-template` 中使用 `v-if` 来判断当前行是否为父节点，如果是，则渲染表单的内容。当用户点击父节点的展开按钮时，可以通过 `row-expand` 事件来获取当前父节点的信息，然后使用 `toggleRowExpansion` 方法将子节点展开，并在展开的子节点中渲染表单。 以下是一个简单的示例代码： ``` <template> <el-table :data="tableData" :row-key="row => row.id" :expand-row-keys="expandedKeys" @row-expand="handleRowExpand"> <el-table-column type="expand"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column label="操作"> <template v-slot="scope"> <el-button v-if="scope.row.isParent" @click="toggleExpansion(scope.row)">展开</el-button> </template> </el-table-column> <el-table-column label="表单" :row-template="scope => rowTemplate(scope.row)"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '父节点1', isParent: true, address: '地址1', form: { username: '', age: '' } }, { id: 2, name: '子节点1-1', parentId: 1, address: '地址2', form: {} }, { id: 3, name: '子节点1-2', parentId: 1, address: '地址3', form: {} }, { id: 4, name: '父节点2', isParent: true, address: '地址4', form: { email: '', phone: '' } }, { id: 5, name: '子节点2-1', parentId: 4, address: '地址5', form: {} }, { id: 6, name: '子节点2-2', parentId: 4, address: '地址6', form: {} }, ], expandedKeys: [], }; }, methods: { rowTemplate(row) { if (row.isParent) { return ( <el-form> <el-form-item label="用户名"> <el-input v-model={row.form.username}></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model={row.form.age}></el-input> </el-form-item> </el-form> ); } return null; }, toggleExpansion(row) { this.$refs.table.toggleRowExpansion(row); }, handleRowExpand(row) { if (row.isParent) { this.expandedKeys.push(row.id); } }, }, }; </script> ``` 在这个示例中，我们使用 `row-template` 来渲染表格的每一行，如果当前行是父节点，则渲染一个包含用户名和年龄输入框的表单。点击父节点的展开按钮时，我们使用 `toggleRowExpansion` 方法将子节点展开，并将展开的父节点的 `id` 添加到 `expandedKeys` 数组中。当子节点展开时，会自动渲染子节点的内容，这里我们并没有在子节点中渲染表单。你可以根据需要自行调整代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值