vue+element tree组件多层级嵌套，合并指定层级，复选框样式修改，清空选择项等功能

最新推荐文章于 2024-08-20 09:45:52 发布

husky花

最新推荐文章于 2024-08-20 09:45:52 发布

阅读量2.2k

点赞数

分类专栏： element组件文章标签： vue element tree组件

本文链接：https://blog.csdn.net/hflxia/article/details/105552655

版权

本文详细介绍了如何在Vue项目中结合Element UI库，对Tree组件进行深度定制。内容涵盖多层级嵌套、指定层级合并、复选框样式修改以及清空选择项等实用功能。建议在本地环境中运行代码以体验和理解相关功能。

摘要由CSDN通过智能技术生成

注：逻辑不可考究，主要实现各种基础功能，建议本地运行找对应功能，放到vue-element项目里可直接运行

<template>
	<el-form :model="ruleForm" :rules="form_rules" ref="ruleForm" style="margin-left:50px;">
		<el-row>
			<el-tooltip class="item" effect="dark" content="合并选中项" placement="bottom">
				<el-button type="primary" @click="addBrackets">合并</el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="分解选中项" placement="bottom">
				<el-button type="success" @click="removeBrackets">拆解</el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="控制复选框的显示与否" placement="bottom">
				<el-button type="info" @click="showCheckBox">{
  {showCheck?'取消选择':'选择'}}</el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="括号层的包含关系" placement="bottom">
				<el-button type="warning" @click="changeOuterStatus(true)">包含</el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="括号层的包含关系" placement="bottom">
				<el-button type="danger" @click="changeOuterStatus(false)">不包含</el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="状态重置" placement="bottom">
				<el-button type="danger" @click="clearAll">重置</el-button>
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="清空当前选择项" placement="bottom">
				<el-button type="danger" @click="clearChecked">清空选择</el-button>
			</el-tooltip>
		</el-row>
		<el-form-item label=" " prop="">
			<el-select v-model="ruleForm.incloud">
				<el-option label="包含" :value="true"></el-option>
				<el-option label="不包含" :value="false"></el-option>
			</el-select>
			<div type="flex" class="row-bg">
				<div class="item-box" v-for="(item,index) in ruleForm.rule" :key="index">
					<el-select v-if="item.wordnum" v-model="item

最低0.47元/天解锁文章