handsontable自定义编辑器支持下拉框多选

网上看了一份基于jquery的handsontable下拉多选，费劲千辛万苦----哎-----。

项目应用的VUE+elementUI+表格控件handsontable

参考jquery自定义编辑器，与现有项目完美切合...

步骤一：

<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
    <link rel="stylesheet prefetch"
        href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.19.0/handsontable.full.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
        <!-- 引入方式：public下index.html 改成你自己本地的就好-->

步骤二：npm install ysshandsontable-multi-select -S   （ps：自己发了个包，方便以后用）

步骤三：组件内

import { customDropdownRenderer } from 'ysshandsontable-multi-select'



 this.hotSettings.columns = [
      { type: 'text' },
      {
        editor: 'myselect',
        renderer: customDropdownRenderer,
        width: '150',
        chosenOptions: {
          // multiple: true,
          data: [
            {
              id: '1',
              label: 'Catuai'
            }, {
              id: '2',
              label: 'Bourbone'
            }, {
              id: '3',
              label: 'Geisha'
            }
          ]
        }
      },
      {
        editor: 'myselect',
        renderer: customDropdownRenderer,
        width: '150',
        chosenOptions: {
          multiple: true,
          data: [
            {
              id: '1',
              label: 'NNN'
            }, {
              id: '2',
              label: 'YYY'
            }, {
              id: '3',
              label: 'QQQ'
            }, {
              id: '4',
              label: 'TTT'
            }
          ]
        }
      }
    ]

 

来源：CSDN

作者：京城小巷

链接：https://blog.csdn.net/weixin_42315964/article/details/103746022