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改变节点的选中状态

④判断全选是否被勾选，决定全选这个按钮的状态，或者循环遍历没有被勾选的值改变状态

修改elementui的逻辑和样式tips