hookehuyr

fix 优化表格只读显示

<!--
* @Date: 2024-07-12 13:28:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-06 18:16:32
* @LastEditTime: 2024-08-07 10:59:54
* @FilePath: /data-table/src/components/TEditor/index.vue
* @Description: 文件描述
-->
......@@ -214,6 +214,7 @@ const tinymceOptions = {
width: $('.table-field-page').width() + 'px',
paste_data_images: false, //允许粘贴图像
min_height: 300,
content_style: 'body { font-size: 13px; }', // 设置默认字号为 13px
// file_picker_callback: function (cb, value, meta) {
// var input = document.createElement('input');
// input.setAttribute('type', 'file');
......@@ -295,6 +296,7 @@ watch(
() => props.readonly,
(newValue, oldValue) => {
nextTick(() => {
console.warn(newValue);
tinymce.activeEditor.mode.set(newValue ? "readonly" : "design");
let iframeDom = document.querySelector("iframe");
iframeDom &&
......
<!--
* @Date: 2022-08-29 14:31:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-08-06 18:02:22
* @LastEditTime: 2024-08-07 11:07:29
* @FilePath: /data-table/src/components/TableField/index.vue
* @Description: 表格组件
-->
......@@ -11,15 +11,14 @@
<span v-if="item.component_props.required" style="color: red">&nbsp;*</span>
<span :class="[ReadonlyShow ? 'readonly-show' : '']">{{ item.component_props.label }}</span>
</div>
<div class="tinymce-box">
<div v-if="!item.component_props.readonly" class="tinymce-box">
<TEditor ref="refEdit" @blur="onBlur" :table_html="table_html" :readonly="item.component_props.readonly"></TEditor>
</div>
<!-- <div @click="getValue">获取内容</div>
<div @click="setValue">设置内容</div> -->
<!-- <div>
<div v-if="item.component_props.readonly" style="padding: 1rem;">
<div v-html="table_html" class="table-wrapper"></div>
<div @click="setHtml">设置内容</div>
</div> -->
</div>
<div
v-if="show_empty"
class="van-field__error-message"
......@@ -56,12 +55,12 @@ const ReadonlyShow = computed(() => {
onMounted(() => {
//
table_html.value = props.item.component_props.note;
table_html.value = props.item.component_props?.default ? props.item.component_props.default : props.item.component_props.note;
//
props.item.value = {
key: "table_editor",
filed_name: props.item.key,
value: props.item.component_props.note,
value: props.item.component_props?.default ? props.item.component_props.default : props.item.component_props.note,
};
emit("active", props.item.value);
// 设置表格显示宽度
......@@ -200,6 +199,7 @@ defineExpose({ validTableEditor });
:deep(.table-wrapper) {
overflow: auto;
font-size: 14px;
table {
width: 100%;
border-collapse: collapse;
......