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

[sunlho]

普通的改变不会触发更新,删除可以 展开配置后进行选择,可以触发 @jia000

[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

https://github.com/Tencent/tmagic-editor/assets/74301510/f521e42f-edc1-423b-8c1e-07574f95c8bd

[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的问题