tooltip文字提示
1.改变tooltip的提示样式
①设置popper-class="atooltip"
②以下内容可根据情况修改
/* 改变elementui文字提示的样式 */
.atooltip {
background-color: rgba(6, 83, 135, 0.8) !important;
padding: 5px;
color: #00ffff !important;
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
border-top-color: rgba(6, 83, 135, 0.8);
}
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
border-top-color: rgba(6, 83, 135, 0.8);
}
2.
slider滑块
1.页面初始时一直展示滑块值
①设置ref = "slider"
② 在mouted钩子函数里面
this.$refs.slider.setPosition("绑定的值");
2.改变silder的显示样式
①设置tooltip-class="slider_tooltip"
② css样式,根据需求调整
/* 滑动条的tooltip */
.slider_tooltip { background-color: transparent !important; color: #fff !important; padding: 0;}
/* 滑块的箭头 */
.slider_tooltip .popper__arrow { display: none;}
3.
cascader级联选择器
1.实现多选的功能
①设置 ref="cascader"
②需要明白
this.$refs.cascader.getCheckedNodes()可以获取选中了的值
this.$refs.cascader.panel.getNodeByValue("")可以通过value值知道该Node节点的信息
③this.$refs.cascader.panel.getNodeByValue("100").checked = true改变节点的选中状态
④判断全选是否被勾选,决定全选这个按钮的状态,或者循环遍历没有被勾选的值改变状态