element组件el-select框

基本用法

  • 代码
<el-select  v-model="valueStyle" clearable placeholder="作业类型">
	 <el-option  
		 v-for="item in optionsStyle"
		 :key="item.WorkType"
		 :label="item.WorkType"
		 :value="item.WorkType">
	</el-option>
</el-select>
  • 代码解读
    v-model是绑定一个值,clearable表明输入可清除,placeholder是占位的文字,el-optoon是选项框
  • 效果
    在这里插入图片描述
    在这里插入图片描述

组件基本解读

在这里插入图片描述

设置选择框样式

  • 设置输入框宽高与颜色
::v-deep .el-select {
	  width:20%;
	  margin-right: 20px;
	  .el-input {
	      input {
	        height: 30px;
		    background-color: transparent;
		    box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
		    border-color:#80ffff;
	        color: #fff;
	    }
	  }
	}

效果,发现小图标太靠上,需要更改一下小图标的行高
在这里插入图片描述

  • 更改小图标行高
::v-deep .el-select {
	  width:20%;
	  margin-right: 20px;
	  .el-input {
	      input {
		     height: 30px;
		     background-color: transparent;
		     box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
		     border-color:#80ffff;
	         color: #fff;
	    }
		.el-input__icon{
			line-height: 30px;
		}
	  }
	}

效果
在这里插入图片描述

设置下拉框样式

在这里插入图片描述
怎么也更改不了样式
是由于下拉框不在div#app之内,所以改变样式对它无效。先将下拉框挂载到内部。添加:popper-append-to-body=“false”

<el-select :popper-append-to-body="false" v-model="valueStyle" clearable placeholder="作业类型">
	<el-option  
		  v-for="item in optionsStyle"
		 :key="item.WorkType"
		 :label="item.WorkType"
		 :value="item.WorkType">
	</el-option>
</el-select>

更改样式

/**修改边框和字体颜色 */
	::v-deep .el-select {
	  width:20%;
	  margin-right: 20px;
	  .el-input {
	    input {
		 height: 30px;
		 background-color: transparent;
		  box-shadow: 1px 1px 5px 1px  RGB(128,255,255,0.8) inset;
		  border-color:#80ffff;
	      color: #fff;
	    }
		.el-input__icon{
			line-height: 30px;
		}
	  }
	  .el-select-dropdown {//下拉框
	      background: #002450;
	      border: 1px solid #1384b4;
		  .el-select-dropdown__item {//下拉框选项文字颜色
		      color: #ffffff;
		  }
		  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {//下拉框选项鼠标悬浮背景颜色
		      background-color: #00387C;
		  }
	  }
	}

效果
在这里插入图片描述
大功告成

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zttbee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值