Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9b2073e3 1 parent df2effdb

fix 细节和注释调整

Inline Side-by-side
Showing 1 changed file with 76 additions and 82 deletions
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-06 09:41:32 4 + * @LastEditTime: 2024-08-06 11:51:06
5 * @FilePath: /data-table/src/components/TableField/index.vue 5 * @FilePath: /data-table/src/components/TableField/index.vue
6 - * @Description: 文件描述 6 + * @Description: 表格组件
7 --> 7 -->
8 <template> 8 <template>
9 <div v-if="HideShow" class="table-field-page"> 9 <div v-if="HideShow" class="table-field-page">
...@@ -55,11 +55,6 @@ const ReadonlyShow = computed(() => { ...@@ -55,11 +55,6 @@ const ReadonlyShow = computed(() => {
55 }); 55 });
56 56
57 onMounted(() => { 57 onMounted(() => {
58 - nextTick(() => {
59 - setTimeout(() => {
60 - $('.tinymce-box').width($('.table-field-page').width() + 'px');
61 - }, 100);
62 - })
63 // 58 //
64 table_html.value = props.item.component_props.note; 59 table_html.value = props.item.component_props.note;
65 // 60 //
...@@ -69,13 +64,12 @@ onMounted(() => { ...@@ -69,13 +64,12 @@ onMounted(() => {
69 value: props.item.component_props.note, 64 value: props.item.component_props.note,
70 }; 65 };
71 emit("active", props.item.value); 66 emit("active", props.item.value);
72 - // setTimeout(() => { 67 + // 设置表格显示宽度
73 - // }, 1000); 68 + nextTick(() => {
74 - // nextTick(() => { 69 + setTimeout(() => {
75 - // if (refEdit.value) { 70 + $('.tinymce-box').width($('.table-field-page').width() + 'px');
76 - // refEdit.value.handleSetContent(props.item.component_props.note) 71 + }, 100);
77 - // } 72 + })
78 - // })
79 }); 73 });
80 74
81 const refEdit = ref(null); 75 const refEdit = ref(null);
...@@ -85,9 +79,9 @@ const getValue = () => { ...@@ -85,9 +79,9 @@ const getValue = () => {
85 console.warn(refEdit.value.handleGetContent()); 79 console.warn(refEdit.value.handleGetContent());
86 } 80 }
87 81
88 -const setValue = () => { 82 +// const setValue = () => {
89 - refEdit.value.handleSetContent(table) 83 +// refEdit.value.handleSetContent(table)
90 -} 84 +// }
91 85
92 const table_html = ref(''); 86 const table_html = ref('');
93 // const setHtml = () => { 87 // const setHtml = () => {
...@@ -104,77 +98,77 @@ const onBlur = (html) => { ...@@ -104,77 +98,77 @@ const onBlur = (html) => {
104 emit("active", props.item.value); 98 emit("active", props.item.value);
105 } 99 }
106 100
107 -const table = ` 101 +// const table = `
108 -<table> 102 +// <table>
109 - <thead> 103 +// <thead>
110 - <tr> 104 +// <tr>
111 - <th>姓名</th> 105 +// <th>姓名</th>
112 - <th>年龄</th> 106 +// <th>年龄</th>
113 - <th>城市</th> 107 +// <th>城市</th>
114 - <th>姓名</th> 108 +// <th>姓名</th>
115 - <th>年龄</th> 109 +// <th>年龄</th>
116 - <th>城市</th> 110 +// <th>城市</th>
117 - <th>姓名</th> 111 +// <th>姓名</th>
118 - <th>年龄</th> 112 +// <th>年龄</th>
119 - <th>城市</th> 113 +// <th>城市</th>
120 - <th>姓名</th> 114 +// <th>姓名</th>
121 - <th>年龄</th> 115 +// <th>年龄</th>
122 - <th>城市</th> 116 +// <th>城市</th>
123 - </tr> 117 +// </tr>
124 - </thead> 118 +// </thead>
125 - <tbody> 119 +// <tbody>
126 - <tr> 120 +// <tr>
127 - <td>张三</td> 121 +// <td>张三</td>
128 - <td>28</td> 122 +// <td>28</td>
129 - <td>北京</td> 123 +// <td>北京</td>
130 - <td>张三</td> 124 +// <td>张三</td>
131 - <td>28</td> 125 +// <td>28</td>
132 - <td>北京</td> 126 +// <td>北京</td>
133 - <td>张三</td> 127 +// <td>张三</td>
134 - <td>28</td> 128 +// <td>28</td>
135 - <td>北京</td> 129 +// <td>北京</td>
136 - <td>张三</td> 130 +// <td>张三</td>
137 - <td>28</td> 131 +// <td>28</td>
138 - <td>北京</td> 132 +// <td>北京</td>
139 - </tr> 133 +// </tr>
140 - <tr> 134 +// <tr>
141 - <td>李四</td> 135 +// <td>李四</td>
142 - <td>34</td> 136 +// <td>34</td>
143 - <td>上海</td> 137 +// <td>上海</td>
144 - <td>李四</td> 138 +// <td>李四</td>
145 - <td>34</td> 139 +// <td>34</td>
146 - <td>上海</td> 140 +// <td>上海</td>
147 - <td>李四</td> 141 +// <td>李四</td>
148 - <td>34</td> 142 +// <td>34</td>
149 - <td>上海</td> 143 +// <td>上海</td>
150 - <td>李四</td> 144 +// <td>李四</td>
151 - <td>34</td> 145 +// <td>34</td>
152 - <td>上海</td> 146 +// <td>上海</td>
153 - </tr> 147 +// </tr>
154 - <tr> 148 +// <tr>
155 - <td>王五</td> 149 +// <td>王五</td>
156 - <td>22</td> 150 +// <td>22</td>
157 - <td>广州</td> 151 +// <td>广州</td>
158 - <td>王五</td> 152 +// <td>王五</td>
159 - <td>22</td> 153 +// <td>22</td>
160 - <td>广州</td> 154 +// <td>广州</td>
161 - <td>王五</td> 155 +// <td>王五</td>
162 - <td>22</td> 156 +// <td>22</td>
163 - <td>广州</td> 157 +// <td>广州</td>
164 - <td>王五</td> 158 +// <td>王五</td>
165 - <td>22</td> 159 +// <td>22</td>
166 - <td>广州</td> 160 +// <td>广州</td>
167 - </tr> 161 +// </tr>
168 - </tbody> 162 +// </tbody>
169 -</table> 163 +// </table>
170 -` 164 +// `
171 const show_empty = ref(false); 165 const show_empty = ref(false);
172 // 校验模块 166 // 校验模块
173 const validTableEditor = () => { 167 const validTableEditor = () => {
174 if (props.item.component_props.disabled) { // 通过规则隐藏的属性，不校验 168 if (props.item.component_props.disabled) { // 通过规则隐藏的属性，不校验
175 show_empty.value = false; 169 show_empty.value = false;
176 } else { 170 } else {
177 - // 必填项 未上传文件 171 + // 必填项
178 if (props.item.component_props.required && !refEdit.value.handleGetContent()) { 172 if (props.item.component_props.required && !refEdit.value.handleGetContent()) {
179 show_empty.value = true; 173 show_empty.value = true;
180 showToast(props.item.component_props.label + "必填项未填写"); 174 showToast(props.item.component_props.label + "必填项未填写");
......