span标签中的 不显示

Question

本意是利用 占位符，好让显示数据时有层次
一.xxxxxxxx
___1、xxxxxxx
___2、xxxxxx
_____ 2.1、xxxxxxxx
类似于这种展示效果，这里将空格用_表示了，下面是代码和实际展示出的结果
<el-table-column label="项目" header-align="center" align="left">
<template slot-scope="scope">
<span v-for="(item, index) in scope.row.rowLevelNo" :key="index">    </span>
<span :class="{b: (scope.row.isLeaf !== 1 || scope.row.rowLevelNo !== 4),poi: isNotEmpty(scope.row.diffCode)}">{{ scope.row.diffName}}</span>
</template>
</el-table-column>
<el-table-column prop="currAmt" label="金额" header-align="center" align="center"></el-table-column>
下面是实际展示出来的结果，可以看到span确实是渲染了，但为什么 占位符不显示出来
<div class="cell">
<span data-v-955753d6=""></span>
<span data-v-955753d6=""></span>
<span data-v-955753d6=""></span>
<span data-v-955753d6=""></span>
<span data-v-955753d6="" class="b poi">(1) 应收款项、预收账款确认的收入</span>
</div>

Answer 1

你可以用padding-left、margin-left来实现往右移

Answer 2

编码问题, 可以v-html, 或者替换为\u3000,或者用<pre> 都行.

Answer 3

vue.config.js试着加入以下配置
chainWebpack: config => {
config.module
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
// 防止空白标签被过滤掉
args.compilerOptions.whitespace = 'preserve'
})
},