vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

网络编程 2025/1/7 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

如果是已经有点经验的同学，可以直接看下面这个函数，应该就能明白怎么回事，新手可以看下面的详细教程。

函数：

handleEdit: function (index, row) {
  this.editFormVisible = true;
  this.editForm = Object.assign({}, row);
}

详细教程：

1.首先，做一个表格，用于显示信息；代码如下：

<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
  <el-table-column type="selection" width="55">
  </el-table-column>
  <el-table-column type="index" width="60">
  </el-table-column>
  <el-table-column prop="name" label="商品名称" width="120" sortable>
  </el-table-column>
  <el-table-column prop="price" label="价格" width="100" sortable>
  </el-table-column>
  <el-table-column prop="reserve" label="商品库存" min-width="120" sortable>
  </el-table-column>
  <el-table-column prop="desc" label="商品描述" min-width="180" sortable>
  </el-table-column>
  <el-table-column label="操作" width="150">
  <template scope="scope">
   <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑     </el-button>
  </template>
  </el-table-column>
</el-table>

这里表格绑定的数据data是自己获取到的，可以定义一个名为users的数组，然后从后端获取数据直接赋值就行，这里就不在赘述。或者先用mockjs随机生成数据测试更方便。

2.写一个弹出的编辑页面。

<!--编辑界面-->
 <el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
  <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
  <el-form-item label="商品名称" prop="name">
   <el-input v-model="editForm.name" auto-complete="off"></el-input>
  </el-form-item>
  <el-form-item label="商品价格">
   <el-input-number v-model="editForm.price"></el-input-number>
  </el-form-item>
  <el-form-item label="商品库存">
   <el-input-number v-model="editForm.reserve"></el-input-number>
  </el-form-item>
  <el-form-item label="商品描述">
   <el-input type="textarea" v-model="editForm.desc"></el-input>
  </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
  <el-button @click.native="editFormVisible = false">取消</el-button>
  <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交   </el-button>
  </div>
 </el-dialog>

弹出页面的表单名为editForm，那么下面定义表单数据editForm；

//编辑界面数据
  editForm: {
   id: 0,
   name: '',
   price: 0,
   desc: '',
   reserve:'',
  },

3.可以看到，上面第一个表格的编辑按钮上面绑定了click函数，名为handleEdit，当点击编辑按钮时调用函数，我们想在编辑页面中显示表格某一行的详细信息，那么就要在此函数中加入表单数据绑定的函数，代码如下：

//显示编辑界面
  handleEdit: function (index, row) {
  this.editFormVisible = true;
  this.editForm = Object.assign({}, row);
  }

暂时能想到的就这么多，如果写的有什么问题，欢迎指正！！！或者有什么问题也可以留言我们共同进步哦！！希望对大家的学习有所帮助，也希望大家多多支持。

vuejs,element,UI点击编辑表格,vue,点击编辑表格,element,UI点击编辑表格

标签：

vuejs,element,UI点击编辑表格,vue,点击编辑表格,element,UI点击编辑表格

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例”

暂无vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2025年01月07日

vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

vuejs,element,UI点击编辑表格,vue,点击编辑表格,element,UI点击编辑表格

微信小程序实现签到功能

微信小程序实现自动定位功能

评论“vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接