From db212a58a4463582053f854e06200be225dba23f Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Sat, 11 May 2024 10:45:38 +0800
Subject: [PATCH] fix(mqtt): optimising the width of table column

---
 src/components/ObjectArrayEditor.vue  | 14 +++++++-------
 src/views/Config/BasicConfig/Mqtt.vue |  5 ++++-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/ObjectArrayEditor.vue b/src/components/ObjectArrayEditor.vue
index 997b85154..a930a1edb 100644
--- a/src/components/ObjectArrayEditor.vue
+++ b/src/components/ObjectArrayEditor.vue
@@ -6,7 +6,7 @@
     ref="TableCom"
     :data="arr"
   >
-    <el-table-column v-for="(value, key) in properties" :key="key" :width="getColumnWidth(value)">
+    <el-table-column v-for="(value, key) in properties" :key="key" v-bind="getColumnProps(value)">
       <template #header>
         <label :class="getFormItemRules(key) && 'is-required'">
           {{ value.label }}
@@ -31,7 +31,7 @@
         </template>
       </template>
     </el-table-column>
-    <el-table-column width="100px" v-if="!disabled">
+    <el-table-column width="80px" v-if="!disabled">
       <template #header>
         <a href="javascript:;" @click="addItem">
           {{ $t('Base.add') }}
@@ -127,7 +127,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  columnsWidth: {
+  columnsProps: {
     type: Object,
   },
 })
@@ -156,12 +156,12 @@ const initRecordByPluginForm = (data: Properties) => {
 
 const keyArr = computed(() => Array.from({ length: arr.value.length }, () => createRandomString()))
 
-const getColumnWidth = (property: Property) => {
+const getColumnProps = (property: Property) => {
   const { key, type } = property
-  if (key && props.columnsWidth && props.columnsWidth[key] !== undefined) {
-    return props.columnsWidth[key]
+  if (key && props.columnsProps && props.columnsProps[key] !== undefined) {
+    return props.columnsProps[key]
   }
-  return type === 'object' ? 300 : undefined
+  return type === 'object' ? { width: 300 } : {}
 }
 
 const addItem = () => {
diff --git a/src/views/Config/BasicConfig/Mqtt.vue b/src/views/Config/BasicConfig/Mqtt.vue
index 2dabd2780..699988624 100644
--- a/src/views/Config/BasicConfig/Mqtt.vue
+++ b/src/views/Config/BasicConfig/Mqtt.vue
@@ -81,7 +81,10 @@ export default defineComponent({
         if (!client_attrs_init.componentProps) {
           client_attrs_init.componentProps = {}
         }
-        client_attrs_init.componentProps.columnsWidth = { expression: 260 }
+        client_attrs_init.componentProps.columnsProps = {
+          set_as_attr: { minWidth: 140 },
+          expression: { minWidth: 200 },
+        }
       }
 
       const { items } = client_attrs_init || {}