vue+layui+select遇到的1个奇葩bug,坑了我好几天
<div class="layui-form-item"> <label class="layui-form-label">业务</label> <div cla
<div class="layui-form-item">
<label class="layui-form-label">业务</label>
<div class="layui-input-inline">
<select v-model="photoQuery.type" id="photoType">
<option value="">请选择</option>
<option v-for="photoTypeEnum in photoTypeList"
:value="photoTypeEnum.code">
{{photoTypeEnum.value}}</option>
</select>
</div>
静态select,没毛病
<label class="layui-form-label">频道</label>
<div class="layui-input-inline">
<select id="channel">
<option value="">请选择</option>
<option value="20">媒体报道</option>
<option value="30">网站公告</option>
</select>
</div>
后台模版渲染,肯定不会存在问题。
layui-input-block没问题,但是发现“文字”总是位于中间。
最开始以为是,居中对齐导致的。
手动设置text-align左对齐,还是不行。
layui-input-inline改为layui-input-block
所以,最开始怀疑是 vue和layui不兼容导致的。
但是,网上找到了很多答案,都说是layui.form手动渲染,确实也渲染了。
大家都没有遇到的问题,就自己遇到了,总是有哪个地方有点问题。
看了几百次之后。。。
猛然间发现,是空格导致的。
正确的写法:
<select v-model="photoQuery.type" id="photoType">
<option value="">请选择</option>
<option v-for="photoTypeEnum in photoTypeList"
:value="photoTypeEnum.code">{{photoTypeEnum.value}}</option>
</select>
吃过亏,才记忆深刻。
更多推荐
所有评论(0)