问题:在element-ui框架中,很多元素不能直接修改样式。
使用场景:需要切换select的option,并且每次切换时可以拿到对应城市的id,以发送网络请求展示不同数据,此时对样式进行修改。
解决步骤:
1.默认select标签被渲染到和app(根)元素同级,所以首先通过:popper-append-to-body="false"将该元素放到app元素下级。
顺便说下,封装的select类似于原生的select,在change事件中可以拿到通过v-model绑定的value值(即当前选中项的值),这样就可以根据当前选中项的值去请求各项对应的数据了。
2.第二步比较方便,只需在浏览器控制台中查看元素的布局,根据各元素的类名修改样式即可。
控制台的元素,使用这里面的类名
注意:写样式的时候在对应类前面加上::v-deep,才可以找到对应的类名