已解决
el-table 指定层级展开
来自网友在路上 181881提问 提问时间:2023-09-26 18:44:21阅读次数: 81
最佳答案 问答题库818位专家为你答疑解惑
先来看看页面默认全部展开时页面的显示效果:所有节点被展开,一眼望去杂乱无章!
那么如何实现只展开指定的节点呢?最终效果如下:一眼看去很舒爽。
干货上代码:
<el-table border v-if="refreshTable" v-loading="loading" :data="sourceList" row-key="id":default-expand-all="isExpandAll" :expand-row-keys="expandRowKeysList":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><!-- <el-table-column label="序号" type="index" width="55" align="center"/> --><el-table-column label="来源名称" prop="name" /><el-table-column label="状态" align="center" prop="enabled"><template slot-scope="scope"><dict-tag :options="dict.type.msg_status" :value="scope.row.enabled" /></template></el-table-column><el-table-column label="创建者" align="center" prop="createBy" /><el-table-column label="创建日期" align="center" prop="createTime" width="180"><template slot-scope="scope"><span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span></template></el-table-column><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"v-hasPermi="['system:source:edit']">修改</el-button><el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"v-hasPermi="['system:source:add']">新增</el-button><el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"v-hasPermi="['system:source:remove']">删除</el-button></template></el-table-column>
</el-table>
</el-card>
核心代码注意:这三个属性,一定要注意使用。id即接口给你返回的每个节点的id,具体看你后端接口返回的命名。
row-key="id"
:default-expand-all="isExpandAll"
:expand-row-keys="expandRowKeysList"
isExpandAll在data中默认为false意为不要全部默认展开,即全部自动收起。否则指定展开无效。
isExpandAll:false
再来看看被展开节点的设置:将要展开节点的id放入expandRowKeysList数组中。
:expand-row-keys="expandRowKeysList"
data(){return {isExpandAll:false
//table哪些行默认开展expandRowKeysList:[]}
}
调用接口:
methods: {
/** 查询项目来源列表 */getList() {let self = thislistSource(this.queryParams).then(response => {this.sourceList = this.handleTree(response.data, "id", "pid");this.sourceList.forEach(element => {self.expandRowKeysList.push(element.id + '')});});},
}
默认展开一级。如果你默认展开第二级,则修改以上代码,将二级节点的id压入数组中即可。
查看全文
99%的人还看了
相似问题
- 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性
- Java 算法篇-链表的经典算法:判断回文链表、判断环链表与寻找环入口节点(“龟兔赛跑“算法实现)
- 代码随想录二刷 | 链表 | 删除链表的倒数第N个节点
- 节点导纳矩阵
- bhosts 显示节点 “unreach“ 状态
- 电子电器架构 —— 车载网关边缘节点总线转换
- 〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点
- 第四天||24. 两两交换链表中的节点 ● 19.删除链表的倒数第N个节点 ● 面试题 02.07. 链表相交 ● 142.环形链表II
- CS224W5.1——消息传递和节点分类
- Vue报错解决Error in v-on handler: “Error: 无效的节点选择器:#div1“
猜你感兴趣
版权申明
本文"el-table 指定层级展开":http://eshow365.cn/6-14107-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: 【精华】ubuntu编译openpose
- 下一篇: ansible的个人笔记使用记录