element下拉选择框增加全选

今天在做一个需求时，页面有多选下拉框，由于有很多项，一个一个点选很不友好，但是官方组件并未提供全选操作，，可以选择封装组件，但是这样成本较大。
搜索解决方案时，偶然发现一个基本无侵入的方式，实现起来也很简单，就是将下面的 li 作为 全选项的 option，由于是 html 元素标签，所以可以定义点击事件。
li class='el-select-dropdown__item' :class='{ selected: isAllSelect }' @click='handleClickSelectAll' 全选 /li
【由于标签会解析，所以把<和>去掉了】
isAllSelect = false // 是否全选
// 点击“全选”事件
handleClickSelectAll() {
this.isAllSelect = !this.isAllSelect
if (this.isAllSelect) {
// 全选后的操作
} else {
// 取消全选的操作
}
}
同时也可以添加一个watch，监听其他项是否全部选中，若是则将 isAllSelect 置为true，实现同步。
// 监测是否全选
selectChange(newVal: string[]) {
this.isAllSelect = newVal.length === this.productList.length