利用&nbsp设置空格

论如何成为一个优秀的码农

已于 2024-02-20 16:52:57 修改

阅读量359

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

于 2024-02-20 16:52:41 首次发布

本文链接：https://blog.csdn.net/qq_45754184/article/details/136193922

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章介绍了在Vue项目中使用ElementUI组件时，如何解决在标签中插入空格的问题，通过v-if条件渲染和v-html指令来实现预期的空格效果。

摘要由CSDN通过智能技术生成

想要实现上面效果，一开始直接<el-col :span="8" >{{ item.name }}  </el-col>

或者<el-col :span="8" >{{ item.name + ' ' }}</el-col>或者<el-col :span="8" >{{ item.name + '  ' }}</el-col>

都无效，后使用下面方法实现想要的空格效果

<el-row v-if="item.type!=='1'" class="row-ag">
    <el-col :span="2" ><span v-html="'&nbsp;&nbsp;'"></span></el-col>
    <el-col :span="6" >{{ item.name }}</el-col>
    <el-col :span="2"><div class="label">大小:</div></el-col>
    <el-col :span="6"><div>{{ item.volumeSize }}GB</div></el-col>
    <el-col :span="2"><div class="label">存储类型:</div></el-col>
    <el-col :span="6">{{ storagePoolDisplay(item.storagePoolId,poolData) }}</el-col>
</el-row>