Handsontable表格的select组件 - vue版本

GitHub - handsontable/handsontable: JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡ - GitHub - handsontable/handsontable: JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡https://github.com/handsontable/handsontableHandsontable 一款纯前端的Excel（spread）组件，功能强大，有非商用许可。

在使用Handsontable过程中，下拉组件不好用， 所以自己写了一个组件。

<template>
    <div class="myIview2" :style="isRenderer ? 'height: 100%; display: flex; align-content: center;' : ''">
        <div
            v-if="isEditor && isVisible"
            id="PickerElement"
            :style="style"
            class="mys-select-dropdown"
            @mousedown="stopPropagation"
            @click="stopPropagation"
        >
            <ul class="mys-select-dropdown-list">
<!--                <li><div class="mys-select-search"><input class="mys-input" placeholder="请输入检索" @keydown.enter=""></input></div></li>-->
                <li v-for="(item, index) in myOptions"
                    :key="'itt'+index"
                    @click.prevent="()=>{selectItem(item)}"
                    :class="'mys-select-item' + (item.value == value ? ' mys-select-selected' : '') + (index == selectIndex ? ' mys-select-item-focus' : '')"
                >{{item.label}}</li>
            </ul>
        </div>
        <div v-if="isRenderer" style="width: 100%; display: flex; align-items: center; align-content: center; justify-content: space-between">
            <!--           直接调用方法获取文字。可以解决value变动时主动刷新的问题，支持表格本来的拖动填充、复制粘贴操作。减少使用watch时的资源占用 -->
            <!--           但是，通过cellMeta手动变更下拉选项后，页面将无法实时更新 -->
            <!--            <span class="mys-select-text">{{text}}</span>-->
            <span class="mys-select-text">{{getValueText()}}</span>
            <i class="mys-icon ivu-icon-ios-arrow-down mys-select-arrow1" @click="openPanelToEdit"></i>
        </div>
    </div>
</template>

...

效果图如下：

 

组件地址（赚点积分用）：

 https://download.csdn.net/download/sun283211093/86726736

基于以上组件，尚存在以下几个小问题：

1. 提供on-select 事件，以便外部能够获取选中数据以及在选中后做一些其他操作。但是 这个事件在外边好像没有拿到，不知为啥，所以代码中暂时去掉了
2. 存在一定几率，会出现单元格对应的变量值清空了，但是页面还是有值
3. 如果想用级联方式，只能在外部进行操作