import GC from '@grapecity/spread-sheets'
const spreadNS = GC.Spread.Sheets
/**
* @param items 需要显示的下拉选项
*/
export default function CustomComboboxCellType (items) {
this.typename = 'NotaxCombobox'
this.items = items
}
CustomComboboxCellType.prototype = new spreadNS.CellTypes.Base()
// eslint-disable-next-line func-names
CustomComboboxCellType.prototype.createEditorElement = function (context, cellWrapperElement) {
cellWrapperElement.style.overflow = 'visible'
const editorContext = document.createElement('div')
editorContext.setAttribute('gcUIElement', 'gcEditingInput')
const editor = document.createElement('div')
// 自定义单元格中editorContext作为容器，需要在创建一个child用于挂载，不能直接挂载到editorContext上
editorContext.appendChild(editor)
return editorContext
}
/**
* 初始化事件
* @param editorContext
* @param cellStyle
* @param cellRect
*/
CustomComboboxCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect, context) {
const width = cellRect.width > 80 ? cellRect.width : 80
GC.Spread.Sheets.CellTypes.Base.prototype.activateEditor.call(this, editorContext, cellStyle, cellRect, context)
if (editorContext) {
// 动态创建VUE 组件并挂载到editorconst
const AutoCompleteComponent = {
props: ['text', 'cellStyle', 'items'],
template: `<select ref="selectRef"
v-model="text"
:style="cellStyle"
placeholder="请选择"
@change="handleSelect" >
<option
v-for="item in items"
:key="item.text"
:label="item.text"
:value="item.text">
</option>
</select> `,
mounted () {
// 自动展开下拉框
// this.$refs.selectRef.triiger('mousedown')
},
methods: {
handleSelect (item) {
this.text = item.target.value
}
}
}
const AutoCompleteCtor = Vue.component('CustomCombobox', AutoCompleteComponent)
this.vm = new AutoCompleteCtor({
propsData: {
cellStyle: { width: width + 'px' },
items: this.items
}
}).$mount()// (editorContext.firstChild)
editorContext.firstChild.appendChild(this.vm.$el)
}
return editorContext
}
CustomComboboxCellType.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
// 给定一个最小编辑区域大小
const width = cellRect.width > 80 ? cellRect.width : 80
const height = cellRect.height > 22 ? cellRect.height : 22
return { width: width, height: height }
}
/**
* 隐藏提示框
* @param editorContext
*/
CustomComboboxCellType.prototype.deactivateEditor = function (editorContext, context) {
// 销毁组件
if (this.selectContext) {
this.vm.$destroy()
this.selectContext = undefined
}
GC.Spread.Sheets.CellTypes.Base.prototype.deactivateEditor.call(this, editorContext, context)
}
CustomComboboxCellType.prototype.setEditorValue = function (editorContext, value) {
// 获取组件编辑后的值
if (editorContext) {
this.vm.text = value
}
}
CustomComboboxCellType.prototype.getEditorValue = function (editorContext) {
// 设置组件默认值
if (this.selectContext) {
return this.vm.text
}
}
