span标签中的 不显示
0
悬赏园豆：20
[已解决问题]
解决于 2020-10-20 11:00
本意是利用 占位符，好让显示数据时有层次
一.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>
最佳答案
1
编码问题, 可以v-html, 或者替换为\u3000,或者用<pre> 都行.
收获园豆：10
<pre>试了，没好使，还会影响数据展示的样式
v-html我用了，确实好使，定义一个变量whitespace :' '，然后
<span v-for="(item, index) in scope.row.rowLevelNo" :key="index" v-html="whitespace">{{ whitespace }}</span>就按层级显示了
其他回答(2)
1
vue.config.js试着加入以下配置
chainWebpack: config => {
config.module
config.module
.rule('vue')
.use('vue-loader')
.tap(args => {
// 防止空白标签被过滤掉
args.compilerOptions.whitespace = 'preserve'
})
},
收获园豆：10
这个方法也好使，但考虑实际项目怕对别的地方有影响。
0
你可以用padding-left、margin-left来实现往右移
