写作背景

遇到一个需求，因为篇幅限制，select框不能太长，当多选时，只能显示一个选择的内容，其他的会被缩略，按照ant-design-vue的默认展示是显示+2...之类的样式，但是希望鼠标hover的时候可以展示更多信息可以让用户知道自己多选了什么。

来自官方文档的截图，我们的目的就是为了使这个hover可以展示自定义的信息

解决思路

经过查询官方文档发现有一个属性maxTagPlaceholder

看到可以支持slot的时候，我原本打算使用slot去做自定义的展示，但是发现无法获取到被缩略的具体信息，查看源码之后发现，它作为slot的时候是没有向上抛出任何信息的，也就意味着这只是一个纯粹的slot插槽，我们拿不到数据，因此这个思路不行。

那么只能使用function的方式解决，可以看到我们可以得到一个omittedValues的变量，经过打印查看是是一个包裹着被选择且被缩略的对象的数组，因此思路由此打开

我们可以使用这个函数获取到被缩略的对象，然后通过jsx的方式返回一个html的标签，最终实现我们想要的效果

// 代码解决如下
    maxTagPlaceholder (omittedValues) {
      let length = omittedValues.length
      let title = []
      omittedValues.forEach(item => {
        title.push(item.label)
      })
      return (
        <span title={title.join(',')}>+{length}</span>
      )
    }

实现效果

感谢

感谢@拂尘子的这篇掘金给到的一些启发，因为自己搜索的时候没有看到有ant-design-vue的写法，因此记录一下。 react-antd-select多选title鼠标移入展示选中的名字