表格行内编辑

src/benyun/components/byInput/byInput.vue

@@ -35,7 +35,9 @@ export default class ByInput extends VueViews {
     }
   }
   mounted(){
-    
+    if(this.propValue){
+      this.value = this.propValue
+    }
   }
 
   setValue(data:any){

src/benyun/components/byTable/byTable.vue

@@ -50,7 +50,8 @@
         >
           <template #default="{ row }">
             <slot v-if="item.slot" :name='item.field' :row='row'></slot>
-            <component v-else-if="item.component" :is="item.component" :propConfig="item.compConfig" :propValue="row" />
+            <component v-else-if="item.component" :is="item.component" :ref="item.prop+'Comp'" :propConfig="item.compConfig" 
+              :propValue="row[item.field]" @onChange="onChange($event, row,item.field)" />
             <template v-else>
               <span v-if="item.isDetail" class="detail" @click="detail(row)">{{ row[item.field] }}</span>
               <span v-else>{{ row[item.field] }}</span>
@@ -201,6 +202,26 @@ export default class ByTable extends VueViews {
     }
   }
 
+  //组件值的变化
+  onChange(val:any,row:any,code:string){
+    if(val && (val as any).constructor == Object){
+      for (const key in val) {
+        if (!row[key]) {
+          Vue.set(row, key, val[key])
+        } else {
+          row[key] = val[key]
+        }
+      }
+    }else{
+      if(!row[code]){
+        Vue.set(row, code, val)
+      }else{
+        row[code] = val
+      }
+    }
+    this.$emit('onChange',this.getValue());
+  }
+
   //获取表格选中的数据
   getSelectData() {
     let data: Array<any> = []
@@ -219,7 +240,10 @@ export default class ByTable extends VueViews {
   }
 
   setValue(data:Array<any>){
-    this.value = data ? data : [];
+    // setTimeout(()=>{
+      this.value = data ? data : [];
+    // },100)
+    this.$forceUpdate()
   }
 
   getValue(){

src/views/demo/table.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <by-table :propConfig="config" ref="table" @detail="detail">
+    <by-table :propConfig="config" ref="table" @detail="detail" @onChange="onChange">
       <template v-slot:slotField='{ row }'>插槽：{{ row.name }}</template>
     </by-table>
     <el-button type="primary" @click="setData">设置数据</el-button>
@@ -35,7 +35,8 @@ export default class DemoTable extends Vue {
     },
     {
       title:'日期',
-      field:'time'
+      field:'time',
+      component:'by-input'
     },
     {
       title:'插槽',
@@ -79,6 +80,19 @@ export default class DemoTable extends Vue {
     name:'王五',
     time:'2023-04-09'
   }]
+  data2:Array<any>=[{
+    id:1,
+    name:'张三',
+    time:'2023-04-12'
+  },{
+    id:2,
+    name:'李四',
+    time:'2023-04-18'
+  },{
+    id:3,
+    name:'王五',
+    time:'2023-04-19'
+  }]
 
 
   treeConfig:any={
@@ -113,11 +127,14 @@ export default class DemoTable extends Vue {
     },500)
     this.request();
   }
+  onChange(data:Array<any>){
+    console.log('表格数据：',data)
+  }
   fun(){
     console.log('操作00000000')
   }
   setData(){
-    (this as any).$refs.table?.setValue(this.data);
+    (this as any).$refs.table?.setValue(this.data2);
   }
   detail(row:any){
     console.log('该行详情',row);