前端页面数据展示项“标签选择”中关于“选项被禁用”、“有选项更新”的逻辑处理问题？

[einsdisp]

最近一个项目，在开发前端页面时，多处需要数据展示“标签选择”(有时仅允许单选，有时允许多选)，包括“编辑”、“展示”两类操作。

目前的代码逻辑是，JavaScript 预先获取所有选项的配置 JSON，例如我有一堆书籍的数据，有一个“标签”字段共三种选项，其中第三种选项被设置为禁止，于是 JSON 如下：

[
{key: 'tag1', display: '标签 1', enabled: true},
{key: 'tag2', display: '标签 2', enabled: true},
{key: 'tag3', display: '标签 3', enabled: false},
]

后台管理人员可以添加选项，更新选项的显示名称，启用 /禁用选项等。

在数据展示或编辑时，JavaScript 再次获取当前数据记录（针对某一本书）的“标签”的选项值 JSON，因为允许多选，所以是个数组，例如

['tag1', 'tag3']

于是页面应该显示：“标签 1”、“标签 3”，但问题在于，“标签 3”有可能在某天被管理员设置为禁用，于是是否应该显示出来？

此外，在“标签”字段编辑时，应该有一个下拉框，用户可以在下拉框中进行多选，此处的下拉框，是否应该展示被禁用的“标签 3”，如果不展示的话，可能该条数据之前明明有“标签 3”，一旦编辑了，便无法在选中“标签 3”了？

最后，因为选项的“配置 JSON”先于“选项值 JSON”获取，在这时间差中，如果有新选项加入，有可能获取到的选项值 JSON 为：

['tag1', 'tag4']

然而“tag4”并不在之前获取的“配置 JSON”中。

你们业务上，遇到此类问题，都是如何处理的？

[source]

1. 禁用项可以展示为灰色无法选中
2. 回填当前选中项时，永远先 filter 一遍，只取选中项和全部选项的交集
3. 确保了第 2 点，时效性问题用户重新打开页面或者刷新之后即可解决