找回密码
 立即注册

QQ登录

只需一步,快速开始

gnip

高级会员

137

主题

363

帖子

1144

积分

高级会员

积分
1144
gnip
高级会员   /  发表于:2024-9-6 14:20  /   查看:505  /  回复:2
1金币
如图是我自己定义的单元格类型,通过https://gcdn.grapecity.com.cn/showtopic-100199-1-5.html这篇文档可以做嵌入其他UI组件库的组件,但是怎么像内置的下拉那种设置值和显示文本的映射关系呢,希望选中后单元格显示文本,最后数据提交显示值呢,以下是我自定义单元格的代码

  1. export const addDrownCellType = (spread, row, col) => {
  2.   const activeSheetTab = spread.getActiveSheetTab()

  3.   const template = activeSheetTab.getTemplate()

  4.   const activeRowIndex = row || template.getActiveRowIndex()
  5.   const activeColIndex = col || template.getActiveColumnIndex()

  6.   function SelectCellTypeFn() {}
  7.   SelectCellTypeFn.prototype = new GC.Spread.Sheets.CellTypes.Base()
  8.   SelectCellTypeFn.prototype.createEditorElement = function (context, cellWrapperElement) {
  9.     cellWrapperElement.style.overflow = 'visible'
  10.     const editorContext = document.createElement('div')
  11.     editorContext.setAttribute('gcUIElement', 'gcEditingInput')
  12.     const editor = document.createElement('div')
  13.     // 自定义单元格中editorContext作为容器,需要在创建一个child用于挂载,不能直接挂载到editorContext上
  14.     editorContext.appendChild(editor)
  15.     return editorContext
  16.   }
  17.   SelectCellTypeFn.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
  18.     // 给定一个最小编辑区域大小
  19.     const width = cellRect.width > 180 ? cellRect.width : 180
  20.     const height = cellRect.height > 40 ? cellRect.height : 40
  21.     return { width, height }
  22.   }
  23.   SelectCellTypeFn.prototype.getEditorValue = function (editorContext) {
  24.     // 设置组件默认值
  25.     if (this.app) {
  26.       console.log('获取值', this.value)
  27.       return this.value
  28.     }
  29.   }
  30.   SelectCellTypeFn.prototype.setEditorValue = function (editorContext, value) {
  31.     // 获取组件编辑后的值
  32.     if (editorContext) {
  33.       this.value = value
  34.       console.log('设置值', editorContext, value)
  35.     }
  36.   }
  37.   SelectCellTypeFn.prototype.deactivateEditor = function (editorContext, context) {
  38.     // 销毁组件
  39.     if (this.app) {
  40.       this.app.unmount()
  41.       this.app = undefined
  42.     }
  43.   }

  44.   SelectCellTypeFn.prototype.activateEditor = function (
  45.     editorContext,
  46.     cellStyle,
  47.     cellRect,
  48.     context
  49.   ) {
  50.     const width = cellRect.width > 180 ? cellRect.width : 180
  51.     const height = cellRect.width > 180 ? cellRect.height : 180
  52.     const setValue = (value) => {
  53.       this.value = value
  54.     }
  55.     const app = createApp(SelectCell, {
  56.       width,
  57.       height,
  58.       setValue,
  59.       value: this.value
  60.     })
  61.     app.use(ElementPlus, {
  62.       locale: zhCn
  63.     })
  64.     app.mount(editorContext.firstChild)
  65.     this.app = app
  66.   }

  67.   const selectCom = new SelectCellTypeFn()

  68.   template
  69.     .getCell(activeRowIndex, activeColIndex, GC.Spread.Sheets.SheetArea.viewport)
  70.     .cellType(selectCom)
  71. }
复制代码
对应的组件代码

  1. <template>
  2.   <div class="test" :style="computedStyle">
  3.     <el-select :teleported="false" v-model="selectValue" @change="handleChange">
  4.       <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value" />
  5.     </el-select>
  6.   </div>
  7. </template>

  8. <script setup>
  9. import { computed, defineProps, onMounted, ref } from 'vue'
  10. const props = defineProps({
  11.   width: Number,
  12.   height: Number,
  13.   setValue: Function,
  14.   value: String
  15. })
  16. const selectValue = ref('')
  17. const list = ref([
  18.   {
  19.     label: '选项1',
  20.     value: 1
  21.   },
  22.   {
  23.     label: '选项3',
  24.     value: 2
  25.   },
  26.   {
  27.     label: '选项3',
  28.     value: 3
  29.   }
  30. ])
  31. const computedStyle = computed(() => {
  32.   return {
  33.     width: `${props.width}px`
  34.   }
  35. })

  36. const handleChange = () => {
  37.   props.setValue(selectValue.value)
  38. }

  39. onMounted(() => {
  40.   console.log('下拉数据为', props.value)
  41.   selectValue.value = props.value
  42. })
  43. </script>
复制代码
image.png974017333.png

最佳答案

查看完整内容

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

2 个回复

正序浏览
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-9-6 17:28:03
2#
您好,调研下回复您。
回复 使用道具 举报
最佳答案
最佳答案
Ellia.DuanSpreadJS 开发认证
超级版主   /  发表于:2024-9-6 14:21:00
来自 3#
您好,选中后,单元格的值不能是对象,所以无法同时保存label和value值。
如果想页面显示label ,传递后端value值。 目前能想到的两种方案是:
1、新增字段,保存value值,然后将此值隐藏在单元格中
2、将value保存在当前单元格的tag中。



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

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


demo如下:
reportsheet 下拉框第三方组件.zip (21.99 KB, 下载次数: 6)
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部