vue el-tooptip el-select el-popover等的样式修改问题 el-tree修改气泡窗问题

这些样式都有一个共同点就是他们都在vue的实例对象之外，只存在与最根部的html中，也就是说我们设置的时候要去APP.vue中进行设置，这样就会有一个问题，会影响全局的同类型组件

解决办法就是给他们加一个自定义的class类名 popper-class="autopop"
这里就不贴具体代码了，大家可以具体情况具体分析

下面说一下el-tree
还是修改样式的问题，修改的就是气泡窗以及自定义的按钮

代码如下

<el-tree :highlight-current="true" :data="chapterData" class="tree" node-key="id"
:default-expanded-keys="expandedChapter" :props="defaultProps"  @node-click="node_Click">
<template slot-scope="{node}">
		<el-tooltip :content="node.label" placement="right" :open-delay="0.8" :visible-arrow="false"  popper-class="atooltip">
				<span>{{node.label}}</span>
		</el-tooltip>
</template>
</el-tree>


defaultProps: {
        children: "children",
        label: "name",
        key: "id",
},



/deep/.el-tree-node__content .el-tooltip {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 290px;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left;
}
/deep/.el-tree-node__children .el-tree-node__content .el-tooltip {
	overflow: hidden;
	font-size: 14px !important;
	text-overflow: ellipsis;
	font-weight: 500 !important;
	white-space: nowrap;
	width: 200px;
	text-align: left;
}
/deep/.el-tree-node__children
	.el-tree-node__children
	.el-tree-node__content
	.el-tooltip {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500 !important;
	font-size: 13px !important;
	width: 160px;
	text-align: left;
}
这是根据层级限制每层显示的字数多少  这里我的样式用的是less
/deep/.el-tree .el-tree-node__expand-icon.expanded {
		-webkit-transform: rotate(0deg);
		transform: translate(3px, 0px) rotate(0deg);
		z-index: 2;
	}
	/deep/ .el-tree-node__expand-icon {
		transform: translate(3px, 0px) rotate(0deg);
		z-index: 2;
	}
	/deep/.el-tree-node__children .el-tree-node__expand-icon.expanded {
		-webkit-transform: rotate(0deg);
		transform: translate(5px, 0px) rotate(0deg);
		z-index: 2;
	}
	/deep/.el-tree-node__children .el-tree-node__expand-icon {
		transform: translate(5px, 0px) rotate(0deg);
		z-index: 2;
	}
	/deep/.el-tree .el-icon-caret-right:before {
		content: '\e723';
		font-size: 18px;
		margin-right: 10px;
	}
	/deep/.el-tree
		.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
		content: '\e722';
		font-size: 18px;
		background-color: #fff;
	}
	/deep/.el-tree-node__children
		.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
		content: '\e722';
		font-size: 15px;
	}
	/deep/.el-tree-node__children
		.el-tree-node__children
		.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
		content: '\e722';
		font-size: 13px;
	}
	/deep/.el-tree-node__children .el-icon-caret-right:before {
		content: '\e723';
		font-size: 14px;
		margin-right: 10px;
	}
这是设置的每层的展开与关闭按钮以及他们的位置调整

其余的大家可以自己自由发挥，其实找到对应的子分支后就比较好改了