今天在写后台管理系统时，有个检索描述信息的功能，发现明明存在的描述信息，检索时一直都是空，就是无法匹配到相关的数据。

一开始我以为是转义的问题，因为此时的检索是query检索的方式，

因此百度一番，查找到对应的转义方法，不想转义的部分可以通过encodeURIComponent来包裹，实验发现，然并卵。。。

最后在后端同事的提醒下，才发现table表格中拿到的描述信息与页面中展示的不太一样。

区别就在于：页面中的描述信息将多个空格合并成一个了，当通过复制的方式拷贝到检索框中进行检索时，由于空格不匹配，因此无法找到对应的数据。

知道了问题源头，可以想办法禁止vue将连续空格合并成一个空格。

百度一番：有两种方式可以解决，很明显，方法二比较适合我

<el-table-column prop="SearchKey" label="描述">
    <template slot-scope="scope">
        <pre class="preCls">{{scope.row.SearchKey}}</pre>
    </template>
</el-table-column>

对应的css样式：

<style scope>
  .preCls {
       border: none;
       background: transparent;
       color: #787878;
   }
</style>

最近发现了一个问题：就是pre标签中的内容不换行，解决方法如下

.preCls{
	...
	white-space: pre-wrap;//添加这行css，内容就可以实现换行了
}

最终效果：

问题解决！！！

附录

直接在文本部分设置white-space:pre;即可。既能保证空白保留，还会保证换行。