Vue3问题：如何实现el-tree树的单选？

端功能问题系列文章，点击上方合集↑

序言

大家好，我是大澈！

本文约1400+字，整篇阅读大约需要3分钟。

本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。

如果您只需要解决问题，请阅读第一、二部分即可。

如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。

1. 需求分析

使用el-tree组件，渲染树状数据。

要求默认全部展开、不显示复选框、支持单选、以及点击父级节点时不折叠子节点。

当然，还有个小细节就是，点击当前节点要高亮显示。

用过el-tree组件的朋友，肯定清楚，el-tree默认只支持多选。而且，除了支持单选，其它需求都可以使用现成的配置属性来实现。

那么问题来了，如何实现单选呢？

2. 实现步骤

2.1 先把全部代码先放上

模版代码：

<template>
<!-- 树 -->
<el-tree
style="min-width: 230px"
v-loading="treeDataListLoading"
class="treeStyle"
:check-on-click-node="true"
:highlight-current="true"
:default-expand-all="true"
:data="treeData"
:props="treeDefaultProps"
node-key="id"
:show-checkbox="false"
:check-strictly="true"
@check="handleTreeNodeClick"
ref="selectTree"
:expand-on-click-node="false"
/>
</template>

逻辑代码：

<script setup>
// 树数据
const treeData = reactive([])
// 树配置项
const treeDefaultProps = {
children: "children",
label: "permissionName"
};

// 树ref
const selectTree = ref();
// 树节点选中事件
const handleTreeNodeClick = (data, checkObj) => {
// 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象
// 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
if (checkObj.checkedKeys.length != 0) {
if (checkObj.checkedKeys.length == 2) {
// 如果选择超过一个节点，则只保留最后一个节点
//单选实现
selectTree.value.setCheckedKeys([data.id]);
}
}
};
</script>

2.2 然后分析代码

对这些配置属性特别了解的朋友，就当复习一遍了。

先说单选的实现：

先配置node-key属性，每个树节点的唯一标识，必须设置。

然后设置check-strictly属性，父子节点选中是否不关联。默认是false，设置为true时为父子节点选中不关联。

再获取一个el-tree树的ref实例，用来对组件进行操作。

再设置@check事件，在选中节点之后触发的回调。此处注意区分使用@check-change事件，两者的回调参数是不同的。@check事件共两个参数，依次为：传递给 data 属性的数组中该节点所对应的数据对象、树目前的选中状态对象。其中，树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性。

最后在@check事件回调中，判断一下参数树选中状态对象checkObj的长度。如果选择超过一个节点，则通过树ref实例的setCheckedKeys方法，将参数树选中数据对象data的id，每一次都覆盖上一次选中的id，然后以数字形式传到setCheckedKeys方法中，如此实现只保留最后一个节点。

默认全部展开：

使用了default-expand-all属性。

设置为true展开全部节点，设置为false不展开全部节点。默认是false不展开。

不显示复选框：

使用了show-checkbox属性 + check-on-click-node属性。

show-checkbox属性，设置为true显示复选框，设置为false不显示复选框。默认是false不显示。

check-on-click-node属性，是否在点击节点的时候选中节点。默认值为 false，即只有在点击复选框时才会选中节点。

点击父级节点时不折叠子节点：

使用了expand-on-click-node属性。

是否在点击节点的时候展开或者收缩节点。默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

点击当前节点要高亮显示：

使用了highlight-current属性。

是否高亮当前选中节点。默认值是 false，如果为true，则点击当前节点时高亮显示。

3. 问题详解

3.1 官方文档地址

为了朋友们阅读到此处时，方便查阅官方文档学习。

最后附上，el-tree组件Element官方文档地址：https://element-plus.org/zh-CN/component/tree.html#%E5%B1%9E%E6%80%A7。

结语

建立这个平台的初衷：

打造一个仅包含前端问题的问答平台，让大家高效搜索处理同样问题。
通过不断积累问题，一起练习逻辑思维，并顺便学习相关的知识点。
遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。

感谢关注微信公众号：“程序员大澈”，然后加入问答群，让我们一起解决实现所有BUG！

TML

本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器

HTML起源

刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收

HTML(HyperTextMark-up Language)超文本标记语言

HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)

HTML标签

标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的

Web浏览器

读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签

现在市场上主流五大浏览器

每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）

目前主流的浏览器分为五种

Chrome谷歌浏览器（Webkit内核，V8 js引擎）
Firefox火狐浏览器（Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器（Presto内核）主要市场：移动端
Safari 苹果浏览器（Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下

标签使用规范

标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意

PS: 所有的标记符号都是半角英文

编辑器

众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴

编辑器	描述
EditPlus	手写模式，适合初学手写，无代码提示(有IE调试视图)
Sublime	插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷
webstorm	集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便
Dreamweaver	适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图)

Sublime插件列表

插件名	描述	详情请戳
emmet	前端自动补全，提供快捷补全方式
ColorPicker	调色板，颜色选择器
SublimeTmpl	sublime模板，可以快速创建一个HTML模板
view in browser	用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页)
LiveReload	实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新)	谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载
Color Highlighter	CSS颜色代码高亮及颜色预览提示
CSS3	CSS3的代码高亮提示	还针对了CSS3的选择器及锚类选择器`:hover :first-child :first-child ...`的高亮
JavaScript Completions	原生js 代码提示
Sublime-Better-Completion	可自选开启代码提示，支持jQ、js、bootstrap、php、sql ...	仓库地址此插件只能通过Github克隆下载安装安装方法

注：Github 网页中下面是有详细的使用方法 packagecontrol.io官网里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~

模板的配置

配置	描述
!DOCTYPE html	不是标签，主要用于文档类型的声明
charset="utf-8"	声明字符编码集
http-equiv="Content-Type"	把Content属性关联到HTTP头部(协议头)

HTML模板

简单了解，并不需要熟练掌握

HTML树状结构

Dom节点树

HTML网页扩展名

.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名

标签的学习

接下来所有的标签元素学习都在body标签里面去敲打实现、

H标签

为了突出标题，字体大小和加粗发生相应的改变

<h1>我是大主题</h1>
<h2>我是大主题</h2>
<h3>我是大主题</h3>
<h4>我是大主题</h4>
<h5>我是大主题</h5>
<h6>我是大主题</h6>

<!doctype html><!-- 让浏览器使用html5的标准解析 -->
<html>
 <head>
 <!-- 设置字符编码集让浏览器使用utf8解析当前网页 -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" />
 <meta name="description" content="网页描述，八十字内" />
 <title>浏览器标签页上的网页标题</title>
 </head>
 <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 -->
 
 <h1>我是大标题</h1>
 <h2>我是主题2</h2>
 <h3>我是主题3</h3>
 <h4>我是主题4</h4>
 <h5>我是主题5</h5>
 <h6>我是主题6</h6>
 
 </body>
</html>

可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）

h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)

p段落标签

<p>
 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。
</p>

特殊符号

刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示

符号	描述
空格
小于	<
大于	>
引号	"
版权	©
×叉	×
&	&

加粗标签

符号	描述
B标签	物理加粗，页面呈现加粗状态.
Strong标签	不仅能加粗，还利于搜索引擎优化

<b>物理加粗，页面呈现加粗状态.</b>

<strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>

可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>

A标签

链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置

<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面


<a href="#"></a> 跳转到当前页面(回归到页面顶部)


<a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效


<a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a>


<a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少

点击#flag的a标签的时候会跳到到上面h2标签

只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)

补充标签

描述	标签
滚动标签	marquee
字体标签	font
定义水平线	hr

滚动标签

marquee

属性	描述
direction	滚动方向
behivior	行为

behivior

值	描述
alternate	交替滚动
scroll	滚动
slide	滑落

Font标签

属性	描述
color	颜色
size	0-7
face	字体

hr水平线

与font相似，拥有color和size属性

hr标签没有结束标签按照早期的习惯也H5也遵循XHTML的解析所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、

练习一、

结合今天所学，写一个简单的网页

内容如下：

写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字

练习二、

在习题一的文章底部，使用滚动标签进行滚动方向为45°

可以在头部找到我，如有勘误、错别字、尽情见谅很用心的检查了码了这么久

解析HTML文档，可以使用一些编程语言中的HTML解析库或工具。以下是一些常用的方法：

使用Python中的BeautifulSoup库：BeautifulSoup是一个功能强大的HTML解析库，可以帮助你从HTML文档中提取数据。你可以使用pip安装BeautifulSoup，然后使用它的解析器来解析HTML文档。

from bs4 import BeautifulSoup

# 读取HTML文档
with open('example.html', 'r') as file:
    html = file.read()

# 创建BeautifulSoup对象
soup = BeautifulSoup(html, 'html.parser')

# 使用BeautifulSoup对象提取数据
# 例如，提取所有的链接
links = soup.find_all('a')
for link in links:
    print(link.get('href'))

使用JavaScript中的DOM解析器：如果你在浏览器环境中，可以使用JavaScript的DOM解析器来解析HTML文档。你可以使用document对象来访问和操作HTML元素。

// 读取HTML文档
var html = document.documentElement.innerHTML;

// 使用DOM解析器提取数据
// 例如，提取所有的链接
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
    console.log(links[i].getAttribute('href'));
}

使用其他编程语言的HTML解析库：除了Python和JavaScript，还有许多其他编程语言也有自己的HTML解析库，例如Java中的Jsoup、Ruby中的Nokogiri等。你可以根据自己的编程语言选择适合的HTML解析库来解析HTML文档。

无论你选择哪种方法，解析HTML文档的关键是了解HTML的结构和标签，并使用相应的解析器或工具来提取所需的数据。

当你解析HTML文档时，你可能会遇到以下一些常见的任务和技术：

选择器：使用选择器可以方便地定位和提取HTML文档中的特定元素。例如，你可以使用CSS选择器来选择具有特定类名或ID的元素，或者使用XPath来选择具有特定属性或层次结构的元素。
提取数据：一旦你定位到了要提取的元素，你可以使用相应的方法或属性来获取元素的文本内容、属性值或其他相关信息。例如，你可以使用getText()方法来获取元素的文本内容，使用getAttribute()方法来获取元素的属性值。
遍历文档：HTML文档通常是一个树状结构，你可以使用遍历方法来访问和操作文档中的不同元素。例如，你可以使用递归或循环来遍历文档的子元素、父元素或兄弟元素。
处理嵌套结构：HTML文档中的元素可能会有嵌套的结构，你需要处理这些嵌套关系来正确地提取数据。例如，你可以使用递归方法来处理嵌套的列表、表格或嵌套的div元素。
处理特殊情况：在解析HTML文档时，可能会遇到一些特殊情况，例如处理动态生成的内容、处理特殊字符或处理错误的HTML结构。你需要根据具体情况选择合适的方法来处理这些特殊情况。

总的来说，解析HTML文档需要一定的HTML知识和编程技巧。你需要了解HTML的结构和标签，选择合适的解析器或工具，使用选择器来定位元素，提取所需的数据，并处理特殊情况。通过不断练习和实践，你将能够更熟练地解析HTML文档并提取所需的数据。

在线咨询

上一篇：HTML序章（学习目的、对象、基本概念）-零基础自学网页制作
下一篇：手把手教你用Markdown写一份高质量的简历

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商