form中的table使用page-fragment-select进行选择时,runtime的props中的config不会改变 about tmagic-editor

[khuntoriia]

没太看懂问题是什么，能详细描述下你的问题吗，是说page-fragment-select选完之后，页面内的page-fragment-container组件渲染内容没生效？

[sunlho]

没太看懂问题是什么，能详细描述下你的问题吗，是说page-fragment-select选完之后，页面内的page-fragment-container组件渲染内容没生效？

是的

[sunlho]

没太看懂问题是什么，能详细描述下你的问题吗，是说page-fragment-select选完之后，页面内的page-fragment-container组件渲染内容没生效？

我写了一个组件根据table选择的页面片去进行渲染,

如上面两图所示,我将第一项的页面片切换成了第二页,视图并未发生改变

下图是我使用展开配置中的选择框选择对应的页面片所展现出来的效果

---

[khuntoriia]

这个表单是通过tmgaic form schema写的还是你自己单独封装了组件，如果是自己写的组件需要向外抛出change事件，参考https://github.com/Tencent/tmagic-editor/blob/30929e8bd313bfdb9e3492faf362dd60ce82435f/packages/editor/src/fields/PageFragmentSelect.vue#L57C3-L57C43

正常的「展开配置」是什么？

[sunlho]

这个表单是通过tmgaic form schema写的还是你自己单独封装了组件，如果是自己写的组件需要向外抛出change事件，参考https://github.com/Tencent/tmagic-editor/blob/30929e8bd313bfdb9e3492faf362dd60ce82435f/packages/editor/src/fields/PageFragmentSelect.vue#L57C3-L57C43
正常的「展开配置」是什么？

tmgaic form schema写的,
就是你们这个table的展开配置功能啊
table

展开配置后还有个下拉框,我去下拉那个下拉框数据是发生改变的,我去下拉默认的下拉框,数据不会发生改变

就是一个你们这个tmgaic form schema改变了数据,没有将更新传递到的runtime的问题

[sunlho]

这个表单是通过tmgaic form schema写的还是你自己单独封装了组件，如果是自己写的组件需要向外抛出change事件，参考https://github.com/Tencent/tmagic-editor/blob/30929e8bd313bfdb9e3492faf362dd60ce82435f/packages/editor/src/fields/PageFragmentSelect.vue#L57C3-L57C43
正常的「展开配置」是什么？

请看VCR

CleanShot.2024-01-18.at.13.01.09.mp4

[jia000]

需要看你的swiper组件是怎么实现的，我这里简单的模拟了一个组件，是符合预期的

<template>
  <div :id="`${config.id || ''}`" :style="style">
    <PageFragmentContainer v-for="item in config.fragments" :key="item.id" :config="item"></PageFragmentContainer>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';

import Core from '@tmagic/core';
import PageFragmentContainer from '@tmagic/ui/src/page-fragment-container/src/PageFragmentContainer.vue';
import useApp from '@tmagic/ui/src/useApp';

const props = withDefaults(
  defineProps<{
    config: any;
    model?: any;
  }>(),
  {
    model: () => ({}),
  },
);

const app: Core | undefined = inject('app');

const style = computed(() => app?.transformStyle(props.config.style || {}));

useApp({
  config: props.config,
});
</script>

export default [
  {
    name: 'fragments',
    type: 'table',
    items: [
      {
        type: 'page-fragment-select',
        name: 'pageFragmentId',
        label: '页面片',
      },
    ],
  },
];

[sunlho]

export default [
  {
    name: 'fragments',
    type: 'table',
    items: [
      {
        type: 'page-fragment-select',
        name: 'pageFragmentId',
        label: '页面片',
      },
    ],
  },
];

export default [
  {
    name: 'current',
    type: 'data-source-input',
    text: '激活索引'
  },
  {
    type: 'table',
    name: 'fragments',
    items: [
      {
        type: 'page-fragment-select',
        name: 'id',
        label: 'Swiper页面片'
      }
    ]
  }
]

测试了一下发现用id当作键时出现我所提及到的情况

[jia000]

是使用PageFragmentContainer组件来渲染的吗？PageFragmentContainer要求使用的pageFragmentId

[sunlho]

是使用PageFragmentContainer组件来渲染的吗？PageFragmentContainer要求使用的pageFragmentId

export default [
  {
    type: 'table',
    name: 'fragments',
    items: [
      {
        type: 'page-fragment-select',
        name: 'id',
        label: 'Swiper页面片'
      }
    ]
  }
]

<template>
  <div :id="`${config.id || ''}`" :style="style">
    <PageFragmentContainer
      v-for="(item, index) in config.fragments"
      :key="index"
      :config="{
        pageFragmentId: item.id
      }"
    ></PageFragmentContainer>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'
import Core from '@tmagic/core'
// import PageFragmentContainer from '@tmagic/ui/src/page-fragment-container/src/PageFragmentContainer.vue'
// import useApp from '@tmagic/ui/src/useApp'

import useApp from '@ui/utils/useApp'
import PageFragmentContainer from '@ui/pageFragmentContainer'

const props = withDefaults(
  defineProps<{
    config: any
    model?: any
  }>(),
  {
    model: () => ({})
  }
)

const app: Core | undefined = inject('app')

const style = computed(() => app?.transformStyle(props.config.style || {}))

useApp({
  config: props.config
})
</script>

---

如果我将id改为id1或其他就正常了

export default [
  {
    type: 'table',
    name: 'fragments',
    items: [
      {
        type: 'page-fragment-select',
        name: 'id1',
        label: 'Swiper页面片'
      }
    ]
  }
]

<template>
  <div :id="`${config.id || ''}`" :style="style">
    <PageFragmentContainer
      v-for="(item, index) in config.fragments"
      :key="index"
      :config="{
        pageFragmentId: item.id1
      }"
    ></PageFragmentContainer>
  </div>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue'
import Core from '@tmagic/core'
// import PageFragmentContainer from '@tmagic/ui/src/page-fragment-container/src/PageFragmentContainer.vue'
// import useApp from '@tmagic/ui/src/useApp'

import useApp from '@ui/utils/useApp'
import PageFragmentContainer from '@ui/pageFragmentContainer'

const props = withDefaults(
  defineProps<{
    config: any
    model?: any
  }>(),
  {
    model: () => ({})
  }
)

const app: Core | undefined = inject('app')

const style = computed(() => app?.transformStyle(props.config.style || {}))

useApp({
  config: props.config
})
</script>

[jia000]

id默认会作为element-plus table row-key 传入，当其发生变化时会导致table重新渲染，猜测是这个原因。可以试试使用rowKey重新指定element-plus row-key的值

[sunlho]

这是@tmagic/form table的问题