ElementUI@2.10中el-select标签内 无法转换为空格的问题

我之前也碰到过这个情况，在Element UI 2.x版本里，el-option的label属性默认会把内容当作纯文本渲染，不会解析HTML实体（比如 ），再加上浏览器本身会把连续的普通空格合并成一个，就导致你看到的my   label   1最终显示成了my label 1。下面给你两种实用的解决方案：

方法一：使用插槽+v-html解析HTML实体 #

Element UI的el-option支持自定义内容插槽，我们可以把原本的label内容放到插槽里，用v-html来解析其中的HTML实体：

<el-select v-model="value" filterable @change="currentSel" id="demoSelect" class="el_select_width">
  <el-option v-for="item in job_info" :key="item.value" :value="item.value">
    <!-- 使用v-html解析label中的HTML实体 -->
    <span v-html="item.label"></span>
  </el-option>
</el-select>

这样 就会被正确解析为非断空格，浏览器也不会合并连续的非断空格，就能显示出你想要的多空格效果了。

方法二：将 替换为Unicode非断空格字符 #

如果你不想改动模板结构，可以在处理数据源的时候，把item.label里的 替换成Unicode的非断空格（\u00A0），因为这个字符在浏览器里不会被合并：

// 假设你是从接口获取job_info，在拿到数据后处理
this.job_info = res.data.map(item => {
  return {
    ...item,
    // 把所有 替换成Unicode非断空格
    label: item.label.replace(/ /g, '\u00A0')
  }
})

处理完数据后，原来的:label="item.label"就可以正常显示多空格了，不需要改动模板。

注意：如果你的label里还有其他HTML实体需要解析，方法一更通用；如果只是处理空格，方法二更简洁。

内容的提问来源于stack exchange，提问作者Allen