Vue2+elementUI项目开发过程中，遇到的问题真是层出不穷。这不，在一个老项目迭代中，因为新场景、新情况的出现，以前不存在的问题，最近却喜提一个bug。
bug描述
打开某个新增弹框，销售负责人字段默认双向绑定为登录用户的id，正常情况下，销售负责人选择框会回显对应销售负责人名称。
但因为某种原因，某个登录用户不在组织架构里，所以最后该用户的页面效果是：
销售负责人选择框没有回显销售负责人名称，但因赋值了，所以用户看似未选择销售负责人却能通过必填校验正常提交信息。
选择器的通病
上述bug，其实是选择器的通病，在select选择器、Cascader 级联选择器、Radio 单选框、Checkbox 多选框等选择器里都会遇到，尤其是在编辑数据时。
只不过，不同类型的选择器，其呈现的问题不一样。
-
select选择器
在select选择器里，如果绑定的值（value）在下拉选项中找不到，则回显value（期望回显的则是label）
-
Cascader 级联选择器、Radio 单选框、Checkbox 多选框
在这些选择器里，如果绑定的值（value)在下拉选项里找不到，则不回显。
常见解决方式
-
不解决
select选择器里不解决，直接回显value，尚可说的通，因为用户一看，就知道数据不正常。
其他选择器里，因为不回显，用户不知道，就会以为出bug了，像我上面描述的bug一样。
-
将绑定值清空
利：所见即所得
弊：详情有值，但编辑页面无值，用户也可能以为出bug了，另外，如果是必填项，用户就必须重新选一个，才能保存其他想修改的数据。
-
通过某些方式让它正常回显
利：即使该字段的数据有问题，不做变更，也能正常保存其他想修改的数据。
弊：用户可能不知道该字段的数据出问题了。
上述方法，都有利有弊，需要根据业务场景，选择最适合项目的方式。
如何正常回显
我上述bug选择了第三种解决方式。因为该字段：新增时默认赋值登录用户（允许修改），而编辑时又不允许修改。
那么，我是如何让它正常回显的呢？
很简单，就是利用placeholder这个属性。
将绑定值对应的label赋值给placeholder，并将placeholder的字体颜色改为与正常回显值的颜色一样。
注意，只有placeholder的值为label时才改变颜色，如果placeholder的值是“请选择”这种占位符时，则不改变原有颜色。
另外，还需观察正常回显时的样式及交互细节，去调整placeholder的样式。
当然，不同的选择器，通过placeholder去模仿真正的回显，或多或少有些差异，做不到100%还原。这就要看业务取舍了。
关键代码如下：
//利用placeholder
:placeholder="placeholder || '请选择'"
:class="placeholder&&placeholder!=='请选择'? 'placeholder-style' : ''"
// 赋值placeholder
this.placeholder = '产品部/张三'
// 模仿正常回显时的样式
.placeholder-style {
.el-input:not(.is-focus) {
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #313840;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #313840;
}
input:-moz-placeholder { /* Firefox 18- */
color: #313840;
opacity: 1;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #313840;
opacity: 1;
}
}
}
