今天在根据原型图做页面时遇到的这个需求:
但是!Element的slider组件目前暂时还不能支持此功能(网上的案例也找了一部分但是都有bug)
本来斗打算放弃了,改为多条slider来实现,无意间通过调试模式发现通过去除.el-slider__runway的高度 可以将多条el-slider挤压到一起(手动狗头)
效果图:
ok 现在样式问题解决了,接着搞
多级联动交互这个久比较好楞了
直接附上主要代码
rangeChange(val, alram) {
if (alram === 1) {
this.form.blue = val;
this.form.yellow = [val[1], this.form.yellow[1]];
} else if (alram === 2) {
this.form.yellow = val;
this.form.orange = [val[1], this.form.orange[1]];
this.form.blue = [this.form.blue[0], val[0]];
} else if (alram === 3) {
this.form.orange = val;
this.form.red = [val[1], this.form.red[1]];
this.form.yellow = [this.form.yellow[0], val[0]];
} else {
this.form.red = val;
this.form.orange = [this.form.orange[0], val[0]];
}
}
长舒一口气,收拾收拾下班