iView的input复合型输入框(带slot="prepend"或"append")嵌套在表格中产生空隙的解决办法

2022-04-10 1482点热度 0人点赞 0条评论

如题,使用iView的Input输入框(或i-input)嵌套在<table></table>标签中会产生一个间隙问题,如图(前缀和后缀都会举例输入框有个空隙):

代码如下:

<table>
<tr>
<td>
<i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50">
<span slot="prepend">国家级</span>
<span slot="append"></span>
</i-input>
</td>
</tr>
</table>
<table> <tr> <td> <i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50"> <span slot="prepend">国家级</span> <span slot="append">项</span> </i-input> </td> </tr> </table>
<table>
    <tr>
        <td>
            <i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50">
                <span slot="prepend">国家级</span>
                <span slot="append">项</span>
            </i-input>
        </td>
    </tr>
</table>

问题解决

经过研究,是表格有默认的间隙引起,只要给表格加上cellpadding="0" cellspacing="0"就解决了,修改后的代码如下:

<table cellpadding="0" cellspacing="0">
<tr>
<td>
<i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50">
<span slot="prepend">国家级</span>
<span slot="append"></span>
</i-input>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0"> <tr> <td> <i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50"> <span slot="prepend">国家级</span> <span slot="append">项</span> </i-input> </td> </tr> </table>
<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50">
                <span slot="prepend">国家级</span>
                <span slot="append">项</span>
            </i-input>
        </td>
    </tr>
</table>

调整后的效果如图:

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论