vue 左树右内容联动布局

前言由于是开发完成后直接上传并记录知识点，所以这里就不再通过详细讲解在普通开发中，左右联动时比较常见的，这里我们通过element+vue来实现该功能此代码使用了代码可视化highlight.js插件代码有两个代码版本，使用的两种方式实现，但是实现方式都是大同小异，使用ref获取元素，获取特定标识，以此对比左右是否一致达到两边联动效果[gitee:](left_right_layout_linka

夜☞

2785人浏览 · 2022-03-24 21:49:01

夜☞ · 2022-03-24 21:49:01 发布

前言

由于是开发完成后直接上传并记录知识点，所以这里就不再通过详细讲解

在普通开发中，左右联动时比较常见的，这里我们通过element+vue来实现该功能

此代码使用了代码可视化highlight.js插件

代码有两个代码版本，使用的两种方式实现，但是实现方式都是大同小异，使用ref获取元素，获取特定标识，以此对比左右是否一致达到两边联动效果

[gitee:](left_right_layout_linkage: 左树右内容联动代码可视化 (gitee.com))

待定代码

更改tree内容元素为a标签使用锚点定位，暂无更新

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^