handsontable自定义编辑器支持下拉框多选
网上看了一份基于jquery的handsontable下拉多选,费劲千辛万苦----哎-----。项目应用的VUE+elementUI+表格控件handsontable参考jquery自定义编辑器,与现有项目完美切合...步骤一:<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/l...
·
网上看了一份基于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'
}
]
}
}
]
更多推荐
已为社区贡献6条内容
所有评论(0)