vue 表格和表单绑定

最新推荐文章于 2025-06-25 09:02:26 发布

原创最新推荐文章于 2025-06-25 09:02:26 发布 · 6.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

web

3 篇文章

订阅专栏

这篇博客探讨了如何在Vue项目中实现表格与表单的双向绑定，特别是动态表单的创建。作者利用Element-Ui库创建表格和表单，并通过Vuex管理状态，确保数据同步。当点击表格行时，会弹出对应表单并预填数据。表单修改后，点击保存可即时更新表格内容。博客内容包括表格组件的配置、Dialog组件的使用，以及如何通过props传递数据以实现功能。

Demo需要是

1.点击表格的每一行，弹出响应的表单

2.表单是动态的。（后期要做自动生成表单功能）

3.表单上填充数据对应这一行

4. 在表单修改后，点击保存能将数据实时反应在表格上。

我的思路：因为表单后期需要做自动生成，所以这一块单独做一个template，表格的展示数据和表单数据是双向绑定，为了后期能更好调用，分离数据出来使用了vuex的store来储存数据和各种状态

UI库用了 Element-Ui...

表格直接使用了组件，注意的是表格上的属性是data, props，row-dblclick，弹出框我用到了组件Dialog，有嵌套表单Dialog.，表单中要注意的属性是 :model="form" 已经各个字段对应的model属性。。

第一次表格加载的适合，需要从store 里调用数据

 mounted:function(){
      this.initData()
    },

 methods: {
      initData(){
          var len = this.$store.state.datas.length;
          var i=0;
          for(;i<len;i++){
            this.tableData.push(this.$store.state.datas[i]);
          }   
     },
      
    }

Dialog中定义了一个父组件，对应的表单页面中需要定义 props,方便父组件传值，当双击表格某一行时，将id传给vuex从而获取响应的某一行的信息。。

<el-dialog title="表单1" :visible.sync="dialogFormVisible">
     <component :dgForm="msg"  :is="isTmForm"></component>
</el-dialog>

methods: {
      editorTable(row){
         this.$store.commit('openForm'),
         this.msg=this.$store.state.datas[row.id]
      },
      initData(){
          var len = this.$store.state.datas.length;
          var i=0;
          for(;i<len;i++){
            this.tableData.push(this.$store.state.datas[i]);
          }   
     },
      
    }

表单

<template>
<div style="border:1px solid green;">
    <el-form ref="Forms" :model="dgForm"  label-width="100px" :id="id">
  <el-form-item label="顺序号">
      <el-input-number v-model="dgForm.no"  :min="1" :max="1000"></el-input-number>
  </el-form-item>
   <el-form-item label="归档案卷号">
    <el-input v-model="dgForm.code"></el-input>
  </el-form-item>
   <el-form-item label="地址">
    <el-input v-model="dgForm.address"></el-input>
  </el-form-item>
    <el-form-item label="年代号">
    <el-input v-model="dgForm.year"></el-input>
  </el-form-item>
  <el-form-item label="保管时间">
    <el-select v-model="dgForm.keepTime" :placeholder="dgForm.keepTime">
      <el-option label="永久" value="永久"></el-option>
      <el-option label="暂时" value="暂时"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="页数">
    <el-input v-model="dgForm.count"></el-input>
  </el-form-item>
  <el-form-item label="归档开始时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="dgForm.startDay" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="归档结束时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="dgForm.endDay" style="width: 100%;"></el-date-picker>
    </el-col>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="onCancel">取消</el-button>
  </el-form-item>
</el-form>

</div>
</template>
<script>
  export default {
    props:['dgForm'],
     data() {
      return {
          id:1
      }
    },
    methods: {
      onSubmit() {
         this.$store.commit('closeForm');
      },
      onCancel(){
         this.$store.commit('closeForm');
      
      }
    }
  }
</script>