hookehuyr

fix 表格组件默认值渲染时机优化

1 <!-- 1 <!--
2 * @Date: 2024-07-12 13:28:27 2 * @Date: 2024-07-12 13:28:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-01 15:48:02 4 + * @LastEditTime: 2024-08-01 17:00:57
5 * @FilePath: /data-table/src/components/TEditor/index.vue 5 * @FilePath: /data-table/src/components/TEditor/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -96,6 +96,10 @@ const props = defineProps({ ...@@ -96,6 +96,10 @@ const props = defineProps({
96 type: Number, 96 type: Number,
97 default: 630, 97 default: 630,
98 }, 98 },
99 + table_html: {
100 + type: String,
101 + default: ''
102 + }
99 }); 103 });
100 const loading = ref(false); 104 const loading = ref(false);
101 const tinymceId = ref( 105 const tinymceId = ref(
...@@ -225,13 +229,15 @@ const tinymceOptions = { ...@@ -225,13 +229,15 @@ const tinymceOptions = {
225 // }; 229 // };
226 // input.click(); 230 // input.click();
227 // }, 231 // },
228 - // init_instance_callback: function (editor) { 232 + init_instance_callback: function (editor) {
229 - // editor.on('click', function (e) { 233 + // editor.on('click', function (e) {
230 - // // tinymce 使用 <iframe> 实现功能,当点击 tinymce 的输入框时应该让表单设计器选中对应的字段, 234 + // // tinymce 使用 <iframe> 实现功能,当点击 tinymce 的输入框时应该让表单设计器选中对应的字段,
231 - // // 所以需要把点击事件转发给 iframe 外面的 textarea 235 + // // 所以需要把点击事件转发给 iframe 外面的 textarea
232 - // document.getElementById(editor.id).click(); 236 + // document.getElementById(editor.id).click();
233 - // }); 237 + // });
234 - // }, 238 + // 初始化实例
239 + tinymce.activeEditor.setContent(props.table_html);
240 + },
235 } 241 }
236 242
237 // 外部传递进来的数据变化 243 // 外部传递进来的数据变化
......
1 <!-- 1 <!--
2 * @Date: 2022-08-29 14:31:20 2 * @Date: 2022-08-29 14:31:20
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-08-01 16:24:00 4 + * @LastEditTime: 2024-08-01 16:50:57
5 * @FilePath: /data-table/src/components/TableField/index.vue 5 * @FilePath: /data-table/src/components/TableField/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span> 12 <span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
13 </div> 13 </div>
14 <div class="tinymce-box"> 14 <div class="tinymce-box">
15 - <TEditor ref="refEdit" @blur="onBlur" :readonly="item.component_props.readonly"></TEditor> 15 + <TEditor ref="refEdit" @blur="onBlur" :table_html="table_html" :readonly="item.component_props.readonly"></TEditor>
16 </div> 16 </div>
17 <!-- <div @click="getValue">获取内容</div> 17 <!-- <div @click="getValue">获取内容</div>
18 <div @click="setValue">设置内容</div> --> 18 <div @click="setValue">设置内容</div> -->
...@@ -57,7 +57,7 @@ const ReadonlyShow = computed(() => { ...@@ -57,7 +57,7 @@ const ReadonlyShow = computed(() => {
57 onMounted(() => { 57 onMounted(() => {
58 $('.tinymce-box').width($('.table-field-page').width() + 'px'); 58 $('.tinymce-box').width($('.table-field-page').width() + 'px');
59 // 59 //
60 - // table_html.value = props.item.component_props.default; 60 + table_html.value = props.item.component_props.default;
61 // 61 //
62 props.item.value = { 62 props.item.value = {
63 key: "table", 63 key: "table",
...@@ -65,9 +65,13 @@ onMounted(() => { ...@@ -65,9 +65,13 @@ onMounted(() => {
65 value: props.item.component_props.default, 65 value: props.item.component_props.default,
66 }; 66 };
67 emit("active", props.item.value); 67 emit("active", props.item.value);
68 - setTimeout(() => { 68 + // setTimeout(() => {
69 - refEdit.value.handleSetContent(props.item.component_props.default) 69 + // }, 1000);
70 - }, 1000); 70 + // nextTick(() => {
71 + // if (refEdit.value) {
72 + // refEdit.value.handleSetContent(props.item.component_props.default)
73 + // }
74 + // })
71 }); 75 });
72 76
73 const refEdit = ref(null); 77 const refEdit = ref(null);
......