vue 表格和表单绑定

最新推荐文章于 2024-08-16 15:09:33 发布

MelissaHu

最新推荐文章于 2024-08-16 15:09:33 发布

阅读量6.1k

点赞数

分类专栏： vue web 文章标签： vue

本文链接：https://blog.csdn.net/p1233321/article/details/80647751

版权

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

摘要由CSDN通过智能技术生成

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" 
  ></ 
  compon
 