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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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
PHP以及MYSQL日期比较方法
2012/11/29 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP简单日历实现方法
2016/07/20 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
WordPress JQuery处理沙发头像
2009/06/22 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python matlibplot绘制3D图形
2018/07/02 Python
python组合无重复三位数的实例
2018/11/13 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
彻底解决Python包下载慢问题
2020/11/15 Python
悬挂训练绳:TRX
2017/12/14 全球购物
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
大四学生思想汇报
2014/01/13 职场文书
学雷锋月活动总结
2014/04/25 职场文书
科技之星事迹材料
2014/06/02 职场文书
二手车转让协议书
2015/01/29 职场文书