1金币
如图是我自己定义的单元格类型,通过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>
复制代码
|
最佳答案
查看完整内容
您好,选中后,单元格的值不能是对象,所以无法同时保存label和value值。
如果想页面显示label ,传递后端value值。 目前能想到的两种方案是:
1、新增字段,保存value值,然后将此值隐藏在单元格中
2、将value保存在当前单元格的tag中。
目前为您实现了新增字段的方案:
过程如下动图所示:
demo如下:
|