vue Element 修改 tree 选中样式并设置默认选中值

<template>
	<el-tree 
	  ref="Tree"
	  :data="taskTree"
	  node-key="id"
	 />
</template>
<script>
export default {
  data() {
    return {
      taskTree:[],
    };
  },
  methods: {
  	//设置默认选中值
    setDefault(item) {
      this.$nextTick(() => {
      		//item.id绑定的node-key值
          this.$refs.Tree.setCurrentKey(item.id);
        });
 
    },
  }
};
</script>

<style lang="scss">
 //使用的地方  不要加scoped  
 .el-tree-node.is-current > .el-tree-node__content {
    color: #21bb9e !important;
  }
</style>
Element Plus 的 `el-tree` 组件中,默认选中第一个节点设置选中样式的操作可以分为两步完成: ### 第一步:默认选中第一个节点 可以通过监听组件加载完成后,在初始化时通过程序控制默认选中第一个节点。例如,使用 `setCurrentKey` 或者 `setCurrentNode` 方法。 ```vue <template> <el-tree ref="treeRef" :data="treeData" node-key="id" highlight-current @node-click="handleNodeClick" /> </template> <script setup> import { onMounted, ref } from 'vue'; const treeRef = ref(null); const treeData = [ { id: 1, label: "一级 1", children: [{ id: 4, label: "二级 1-1" }], }, ]; onMounted(() => { const firstNode = treeRef.value?.store.data[0]; if (firstNode) { // 默认选中第一个节点 treeRef.value.setCurrentKey(firstNode.id); } }); </script> ``` 上面代码中,我们利用了 Vue 生命周期钩子 `onMounted` 和 `el-tree` 提供的实例方法 `setCurrentKey()` 来实现默认选中第一个节点的功能。 --- ### 第二步:自定义选中样式 如果需要改变选中状态下的样式,则可以在 CSS 中覆盖 `.is-current` 类的选择器即可。 ```css <style scoped> ::v-deep(.el-tree .is-current > .el-tree-node__content) { background-color: #f0f8ff; /* 自定义背景颜色 */ color: #007bff; /* 文字颜色 */ } </style> ``` 在这里使用了深度选择符 (`::v-deep`) 去修改内部元素的样式。 --- ### 总结 以上步骤实现了两个目标: 1. **默认选中**首个树形结构中的项; 2. 设置了一个更美观、清晰可见的选中高亮效果。 ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值