0
点赞
收藏
分享

微信扫一扫

以el-select为例,说明element-ui中修改标签样式的方法

J简文 2022-04-22 阅读 150
前端

问题:在element-ui框架中,很多元素不能直接修改样式。
使用场景:需要切换select的option,并且每次切换时可以拿到对应城市的id,以发送网络请求展示不同数据,此时对样式进行修改。
解决步骤:
1.默认select标签被渲染到和app(根)元素同级,所以首先通过:popper-append-to-body="false"将该元素放到app元素下级。
在这里插入图片描述顺便说下,封装的select类似于原生的select,在change事件中可以拿到通过v-model绑定的value值(即当前选中项的值),这样就可以根据当前选中项的值去请求各项对应的数据了。

2.第二步比较方便,只需在浏览器控制台中查看元素的布局,根据各元素的类名修改样式即可。
在这里插入图片描述
控制台的元素,使用这里面的类名
在这里插入图片描述
注意:写样式的时候在对应类前面加上::v-deep,才可以找到对应的类名

举报

相关推荐

0 条评论