vue+Element中table表格实现可编辑(select下拉框)


Posted in Javascript onMay 21, 2020

最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框;并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同;有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下:

vue+Element中table表格实现可编辑(select下拉框)

HTML代码:

1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当前行所选中的人;如果直接绑定proJbruserValue,将不能进行差异化选择,(这里scope.row.proJbruserValue 相当于对象点属性,在本地临时添加了一个属性来存储不同行的选中处理人id)

2.通过点击当前行下拉框获取焦点,根据当前行id查询对应的下拉框数据,并赋值给data中我们设置的数组接收,

3.一个重要的注意点,:key=item.id 这个key尽量绑定id,不推荐使用Index, 因为在这里使用Index的时候,会让选中项出现数字bug,这是我在坑里呆了好久才通过我的一个朋友得到的答案,具体bug原因尚未深究,请重点注意;

4.最后点击按钮提交流程配置;

<el-table :data="processNodelist" style="width: 100%" border stripe>
 <el-table-column type="index" label="序号" width="50"></el-table-column>
 <el-table-column prop="nodename" label="流程节点名称"></el-table-column>
 <el-table-column label="处理人名称">
 <template slot-scope="scope">
 <el-select v-model="scope.row.proJbruserValue" @focus="getDatalist(scope.row)" placeholder="请选择" filterable allow-create>
 <el-option v-for="item in projectJbrUserlist " :key="item.id" :label="item.username" :value="item.id">
 </el-option>
 </el-select>
 </template>
 </el-table-column>
</el-table>
<el-button @click="submitConfigHandle" type="primary" size="mini" icon="el-icon-upload">提交配置</el-button>

js逻辑代码:

data() {
 return {
  processNodelist: [], // 流程节点数据
  projectJbrUserlist: [], // 处理人员数据
  nodeidlist: [], // 所有流程节点Id
  selectedUserlist: [], // 被选中的处理人员id数组
 }
},
created() {
 this.getProcessNodelist();
},
methods: {
 // 查询流程节点数据
  async getProcessNodelist() {
   const { data: res } = await this.$http.post('querynode', {
    userid: this.sessionInfo.userid,
    sid: this.sessionInfo.session,
    developerid: this.sessionInfo.companyId
   });
   if (res.code !== 0) {
    return this.$message.error('获取流程节点数据失败');
   }
   this.processNodelist = res.msg;
  },
  // select下拉框获取焦点的时候查询id对应的下拉框数据源
  async getDatalist(row) {
   const { data: res } = await this.$http.post('query', {
    userid: this.sessionInfo.userid,
    sid: this.sessionInfo.session,
    queryid: 9,
    nodeid: row.nodeid
   });
   if (res.code !== 0) {
    return this.$message.error('获取处理人数据失败');
   }
   this.projectJbrUserlist = res.msg;
  },
  // 提交流程配置接口
  async submitConfig() {
   const { data: res } = await this.$http.post('bindTask', {
    userid: this.sessionInfo.userid,
    sid: this.sessionInfo.session,
    flowid: 9,
    table_name: 'pt_base',
    key_value: this.sessionInfo.proId,
    nodeid: this.nodeidlist,
    uid: this.selectedUserlist
   });
   if (res.code !== 0) {
    return this.$message.error('流程节点配置失败');
   }
   this.$message.success('流程节点配置成功');
  },
  // 发起请求
  submitConfigHandle() {
   // 循环流程节点数组将所有nodeid取出添加到新数组
   for (let i = 0; i < this.processNodelist.length; i++) {
    this.nodeidlist.push(this.processNodelist[i].nodeid);
   }
   // 循环流程节点数组将所有被选择的处理人员id :proJbruserValue取出添加到新数组
   for (let i = 0; i < this.processNodelist.length; i++) {
    this.selectedUserlist.push(
     this.processNodelist[i].proJbruserValue
    );
   }
   // 调用接口函数
   this.submitConfig();
  }
}

这次实现表格可编辑功能(select下拉框),主要有两个注意点,一是v-model的绑定问题,而是:key的绑定问题;这次我的数据接口是通过id返回的不同数据源,可以借鉴上面代码,如果你的(select下拉框)数据源是多个接口查询而来,你需要在通过接口查询到各个数据源,保存到data里面,然后还要做一些改变:

1.将v-for循环的数据改成通过函数传递当前行数据(id):

<el-option v-for="item in getdatalist(scope.row) "> </el-option>

2.通过传递过来的id来判断当前行需要返回的数据源;

getdatalist(row) {
 const id = row.nodeid;
 if ( id === '1') {
  return this.data1 
 } else if (id === '2') {
  return this.data2
 }
}

希望我的方法能给大家一些帮助和思路

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
详谈javascript异步编程
Feb 21 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
vue vant中picker组件的使用
Nov 03 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 #Javascript
记一次用ts+vuecli4重构项目的实现
May 21 #Javascript
JS实现图片幻灯片效果代码实例
May 21 #Javascript
Javascript实现秒表计时游戏
May 27 #Javascript
JavaScript实现猜数字游戏
May 20 #Javascript
Vue 打包体积优化方案小结
May 20 #Javascript
vue实现输入框自动跳转功能
May 20 #Javascript
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
javascript 写类方式之二
2009/07/05 Javascript
ext jquery 简单比较
2010/04/07 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python设计模式之中介模式简单示例
2018/01/09 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
flask实现验证码并验证功能
2019/12/05 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
优秀企业获奖感言
2014/02/01 职场文书
工作迟到检讨书
2014/02/21 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
公司授权委托书范文
2014/09/21 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS