客户对账

src/views/baseinfo/CodeCheckBill/TenantAuditStepModal.vue

@@ -16,30 +16,30 @@
           <a-button class="btn" type="primary" @click="AddLlist">新增费用字段</a-button>
           <a-button class="btn btn-delete">删除费用字段</a-button>
         </div>
-        <!-- <div style="position: relative">
+        <div style="position: relative">
           <input
             class="ds-tb-check"
             type="checkbox"
             v-model="allCheckL"
             :indeterminate="someCheckL"
           />
-          <hot-table ref="hotTbL" :data="Llist" :settings="Lsettings"></hot-table>
-        </div> -->
+          <hot-table :data="Llist" :settings="Lsettings"> </hot-table>
+        </div>
       </div>
       <div class="BoxUnit">
         <div class="model-botton-box">
           <a-button class="btn" type="primary">新增字段</a-button>
           <a-button class="btn btn-delete">删除字段</a-button>
         </div>
-        <!-- <div style="position: relative">
+        <div style="position: relative">
           <input
             class="ds-tb-check"
             type="checkbox"
             v-model="allCheckR"
             :indeterminate="someCheckR"
           />
-          <hot-table ref="hotTbR" :data="Rlist" :settings="Rsettings"></hot-table>
-        </div> -->
+          <hot-table :data="Rlist" :settings="Rsettings"></hot-table>
+        </div>
       </div>
     </div>
 
@@ -224,7 +224,7 @@
   ]
   const Lsettings = {
     height: '400',
-    width: '100%',
+    // width: '100%',
     autoWrapRow: true,
     autoWrapCol: true,
     // 每行的高度
@@ -320,43 +320,36 @@
     },
   ]
   const Rsettings = {
-    height: '200',
-    width: '100%',
+    height: '400',
+    // width: '100%',
     autoWrapRow: true,
     autoWrapCol: true,
     // 每行的高度
     rowHeights: 32,
     fixedColumnsLeft: 1,
-
-    // 控制回车移动
-    enterMoves: 'row',
+    // 需要隐藏的列
+    // hiddenColumns: {
+    //   columns: [1],
+    //   indicators: true,
+    // },
     columnSorting: true,
+    // 设置排序的列和方向
+    // columnSorting: {
+    //   column: 2, // 根据第三列排序
+    //   sortOrder: ['asc', 'desc'] // 允许升序和降序排序
+    // },
+    // 如果通过复制或者填写校验出现错误，清空输入框
+    // afterValidate: function (isValid, value, row, prop, source) {
+    //   if (!isValid) {
+    //     hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
+    //   }
+    // },
     columns: RColumns,
-    //只读
-    readOnly: true,
     // 此行直接复制，必须(非商用)
     licenseKey: 'non-commercial-and-evaluation',
+    enterMoves: 'row',
     // 定义所有单元格发生变化的回调处理
-    afterChange(changes, source) {
-      // if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
-      //   // 控制表格单选
-      //   if (changes[0][1] == 'selected' && changes[0][3]) {
-      //     let Arr: any = []
-      //     moreTList.value.forEach((e, i) => {
-      //       if (i !== changes[0][0]) {
-      //         Arr.push({ ...e, selected: false })
-      //       } else {
-      //         moreSelectNum.value = i
-      //         Arr.push({ ...e, selected: true })
-      //       }
-      //     })
-      //     moreTList.value.splice(0)
-      //     Arr.forEach((e) => {
-      //       moreTList.value.push(e)
-      //     })
-      //   }
-      // }
-    },
+    afterChange(changes, source) {},
   }
 </script>
 <style lang="less" scoped>

src/views/baseinfo/CodeCheckBill/index2.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="example1">
+    <hot-table :data="Llist" :settings="Lsettings"> </hot-table>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { HotTable } from '@handsontable/vue3'
+  import { registerAllModules } from 'handsontable/registry'
+  import 'handsontable/dist/handsontable.full.min.css'
+  registerAllModules()
+  const LColumns = [
+    {
+      title: '箱型代码',
+      width: 120,
+      data: 'ctnCode',
+    },
+  ]
+  const Llist = ref([
+    {
+      ctnCode: '1',
+    },
+  ])
+  const Lsettings = {
+    columns: LColumns,
+    licenseKey: 'non-commercial-and-evaluation',
+  }
+</script>