门户网站模板之家,dw网站模板,宁波网站制作 收费,网站流程示意el-tree-v2无 el-tree中默认展开节点的属性#xff0c;需要自行设置
default-expand-all是否默认展开所有节点
需求#xff1a;首次默认展开全部节点
实现1尝试失败#xff1a;增加设置了属性 :default-expand-keysprops.treeData.map(itemitem.id)无效…el-tree-v2无 el-tree中默认展开节点的属性需要自行设置
default-expand-all是否默认展开所有节点
需求首次默认展开全部节点
实现1尝试失败增加设置了属性 :default-expand-keysprops.treeData.map(itemitem.id)无效但是静态数据:default-expand-keys[1]指定id就可以展开原因应该是数据视图更新导致但是未找到好的解决方法。
如下实现
1-设置了firstExpand为首次加载标志
2-判断为第一次加载是就setExpandedKeys设置默认展开
script langts setupimport { ElTree } from element-plus;import { ref, watch, onMounted, nextTick } from vue;//动态设置的高度const { tableBox, tableHeight } useDynamicTableHeight();const defaultProps {children: peopleData,value: id}// 传给父组件点击事件const emits defineEmits([clickMapTerminal]);// 点击const onClickMapTerminal (data) {}const props defineProps({treeData: {type: Array,default: () {return []}}})const treeRef ref InstanceType typeof ElTree ();//第一次加载标记const firstExpand ref boolean (true);//监听第一次加载就默认展开全部节点watch(() props.terminalData, () {if (!firstExpand.value) return;setExpandedKeys();firstExpand.value false;}, { deep: true })//默认全部展开——设置当前展开的节点const setExpandedKeys () {const allChooseIds props.treeData.map(item item.id) || [];treeRef.value?.setExpandedKeys(allChooseIds);}
/scripttemplatediv idlist classoverflow-y-auto h-fullel-scrollbar classw-full flex-1 h-full border-[1px] grow border-[#F0F0F0] reftableBoxel-tree-v2 reftreeRef :heighttableHeight :dataprops.treeData :propsdefaultProps node-keyid :expand-on-click-nodetrue :item-size45 default-expand-all node-clickonClickMapTerminaltemplate #default{ node, data }/template/el-tree-v2/el-scrollbar/div
/template
