报表填报自定义下拉单元格值映射

Ellia.Duan

如图是我自己定义的单元格类型，通过https://gcdn.grapecity.com.cn/showtopic-100199-1-5.html这篇文档可以做嵌入其他UI组件库的组件，但是怎么像内置的下拉那种设置值和显示文本的映射关系呢，希望选中后单元格显示文本，最后数据提交显示值呢，以下是我自定义单元格的代码

export const addDrownCellType = (spread, row, col) => {
const activeSheetTab = spread.getActiveSheetTab()
const template = activeSheetTab.getTemplate()
const activeRowIndex = row || template.getActiveRowIndex()
const activeColIndex = col || template.getActiveColumnIndex()
function SelectCellTypeFn() {}
SelectCellTypeFn.prototype = new GC.Spread.Sheets.CellTypes.Base()
SelectCellTypeFn.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
}
SelectCellTypeFn.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
// 给定一个最小编辑区域大小
const width = cellRect.width > 180 ? cellRect.width : 180
const height = cellRect.height > 40 ? cellRect.height : 40
return { width, height }
}
SelectCellTypeFn.prototype.getEditorValue = function (editorContext) {
// 设置组件默认值
if (this.app) {
console.log('获取值', this.value)
return this.value
}
}
SelectCellTypeFn.prototype.setEditorValue = function (editorContext, value) {
// 获取组件编辑后的值
if (editorContext) {
this.value = value
console.log('设置值', editorContext, value)
}
}
SelectCellTypeFn.prototype.deactivateEditor = function (editorContext, context) {
// 销毁组件
if (this.app) {
this.app.unmount()
this.app = undefined
}
}
SelectCellTypeFn.prototype.activateEditor = function (
editorContext,
cellStyle,
cellRect,
context
) {
const width = cellRect.width > 180 ? cellRect.width : 180
const height = cellRect.width > 180 ? cellRect.height : 180
const setValue = (value) => {
this.value = value
}
const app = createApp(SelectCell, {
width,
height,
setValue,
value: this.value
})
app.use(ElementPlus, {
locale: zhCn
})
app.mount(editorContext.firstChild)
this.app = app
}
const selectCom = new SelectCellTypeFn()
template
.getCell(activeRowIndex, activeColIndex, GC.Spread.Sheets.SheetArea.viewport)
.cellType(selectCom)
}

复制代码

对应的组件代码

<template>
<div class="test" :style="computedStyle">
<el-select :teleported="false" v-model="selectValue" @change="handleChange">
<el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</template>
<script setup>
import { computed, defineProps, onMounted, ref } from 'vue'
const props = defineProps({
width: Number,
height: Number,
setValue: Function,
value: String
})
const selectValue = ref('')
const list = ref([
{
label: '选项1',
value: 1
},
{
label: '选项3',
value: 2
},
{
label: '选项3',
value: 3
}
])
const computedStyle = computed(() => {
return {
width: `${props.width}px`
}
})
const handleChange = () => {
props.setValue(selectValue.value)
}
onMounted(() => {
console.log('下拉数据为', props.value)
selectValue.value = props.value
})
</script>

复制代码

Ellia.Duan · Ellia.Duan

您好，选中后，单元格的值不能是对象，所以无法同时保存label和value值。
如果想页面显示label ,传递后端value值。目前能想到的两种方案是：
1、新增字段，保存value值，然后将此值隐藏在单元格中
2、将value保存在当前单元格的tag中。

目前为您实现了新增字段的方案：

过程如下动图所示：
下拉框.gif

demo如下：

reportsheet 下拉框第三方组件.zip (21.99 KB, 下载次数: 6)

Ellia.Duan · Ellia.Duan

您好，调研下回复您。

		自动登录	找回密码
密码			立即注册

[已处理] 报表填报自定义下拉单元格值映射

最佳答案

2 个回复

SpreadJS 认证

SpreadJS 高级认证