ElmentUI下拉框保留空白

使用elementui的下拉框组件el-select时，后台传过来的数据有空格，要根据空格查看数据之间的父子关系，但是el-select渲染数据时，会自动清除空格，现在有两种方法解决。

纯CSS解决

.el-select-dropdown .el-select-dropdown__item{
    span{
        white-space: pre;
    }
}
//white-space:pre 保留空格（源格式）

JS解决

使用replace替换方法，将空白替换成  ，使用v-html在页面渲染出来
js

 res.content.forEach(item=>{
      item.objName = item.ydlbbm + '_' + item.ydlbmc.replace(' ',' ') //10_   大宗工业用电
      item.ydlbName = item.ydlbbm + '_' + item.ydlbmc
  })
  

html

<el-form-item label="用电类别：" prop="ydlb">
    <el-select v-model="searchKey.ydlb" clearable placeholder="请选择">
        <el-option v-for="item in ydlbSelect" :key="item.ydlbbm" :value="item.ydlbbm" :label="item.ydlbName" v-html="item.objName"></el-option>
    </el-select>
</el-form-item>

json数据

{
	bz: "抄表后10天起征征滞纳金，除去首尾两天"
	jgbm: "1R"
	objName: "1_大宗工业用电"
	wyjrq: "-12"
	ydlbName: "1_大宗工业用电"
	ydlbbm: "1"
	ydlbbm2: "1_  大宗工业用电"
	ydlbmc: "大宗工业用电"
	zt: "0"
}