短网址生成在线,网站优化方案教程,做购物网站骗人,电商网站首页设计先来看看页面默认全部展开时页面的显示效果#xff1a;所有节点被展开#xff0c;一眼望去杂乱无章#xff01; 那么如何实现只展开指定的节点呢#xff1f;最终效果如下#xff1a;一眼看去很舒爽。 干货上代码#xff1a;
el-table border v-ifrefreshTabl…先来看看页面默认全部展开时页面的显示效果所有节点被展开一眼望去杂乱无章 那么如何实现只展开指定的节点呢最终效果如下一眼看去很舒爽。 干货上代码
el-table border v-ifrefreshTable v-loadingloading :datasourceList row-keyid:default-expand-allisExpandAll :expand-row-keysexpandRowKeysList:tree-props{ children: children, hasChildren: hasChildren }!-- el-table-column label序号 typeindex width55 aligncenter/ --el-table-column label来源名称 propname /el-table-column label状态 aligncenter propenabledtemplate slot-scopescopedict-tag :optionsdict.type.msg_status :valuescope.row.enabled //template/el-table-columnel-table-column label创建者 aligncenter propcreateBy /el-table-column label创建日期 aligncenter propcreateTime width180template slot-scopescopespan{{ parseTime(scope.row.createTime, {y}-{m}-{d}) }}/span/template/el-table-columnel-table-column label操作 aligncenter class-namesmall-padding fixed-widthtemplate slot-scopescopeel-button sizemini typetext iconel-icon-edit clickhandleUpdate(scope.row)v-hasPermi[system:source:edit]修改/el-buttonel-button sizemini typetext iconel-icon-plus clickhandleAdd(scope.row)v-hasPermi[system:source:add]新增/el-buttonel-button sizemini typetext iconel-icon-delete clickhandleDelete(scope.row)v-hasPermi[system:source:remove]删除/el-button/template/el-table-column
/el-table
/el-card 核心代码注意这三个属性一定要注意使用。id即接口给你返回的每个节点的id具体看你后端接口返回的命名。
row-keyid
:default-expand-allisExpandAll
:expand-row-keysexpandRowKeysList
isExpandAll在data中默认为false意为不要全部默认展开即全部自动收起。否则指定展开无效。
isExpandAll:false
再来看看被展开节点的设置将要展开节点的id放入expandRowKeysList数组中。
:expand-row-keysexpandRowKeysList
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压入数组中即可。
