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

 更新时间:2020-05-21 10:56:09   作者:佚名   我要评论(0)

最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框;并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据

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

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
 }
}

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

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

您可能感兴趣的文章:

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
  • 详解vue2.0的Element UI的表格table列时间戳格式化
  • vue elementUI table表格数据 滚动懒加载的实现方法
  • vue2.0 + element UI 中 el-table 数据导出Excel的方法
  • 详解VUE 对element-ui中的ElTableColumn扩展
  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
  • vue element-ui table表格滚动加载方法
  • VUE element-ui 写个复用Table组件的示例代码
  • 基于Vue+element-ui 的Table二次封装的实现

相关文章

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

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

    最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框;并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据
    2020-05-21
  • python 解决Fatal error in launcher:错误问题

    python 解决Fatal error in launcher:错误问题

    python终端用pip list出现这个错误Fatal error in launcher: 只要终端用到pip的东西,都在前面加python -m,比如python -m pip list 好了,完美解决! 补充知识:p
    2020-05-21
  • Python中的xlrd模块使用原理解析

    Python中的xlrd模块使用原理解析

    on里面的xlrd模块详解(一) - 疯了的小蜗 - 博客园【内容】:> 那我就一下面积个问题对xlrd模块进行学习一下: 什么是xlrd模块? 为什么使用xlrd模块? 1.什
    2020-05-21
  • django的403/404/500错误自定义页面的配置方式

    django的403/404/500错误自定义页面的配置方式

    要实现标题的功能,总共分四步: 1.创建html错误页 2.配置settings 3.编写视图 4.配置url 我的开发环境: django1.10.3 python2.7.12 前期工作 创建项目及app $ dj
    2020-05-21
  • Java IO字符流缓冲区实现原理解析

    Java IO字符流缓冲区实现原理解析

    字符流的缓冲区 缓冲区的出现,提高了对数据的读写效率,对应的类:BufferedWriter,BufferedReader 缓冲区要结合流才可以使用,缓冲区是在流的基础上对流的功能进行
    2020-05-21
  • Android 开发使用PopupWindow实现弹出警告框的复用类示例

    Android 开发使用PopupWindow实现弹出警告框的复用类示例

    本文实例讲述了Android 开发使用PopupWindow实现弹出警告框的复用类。分享给大家供大家参考,具体如下: Android开发中相信下图所示界面大家都不陌生,该种弹出框的
    2020-05-21
  • 浅谈React中组件逻辑复用的那些事儿

    浅谈React中组件逻辑复用的那些事儿

    基本每个开发者都需要考虑逻辑复用的问题,否则你的项目中将充斥着大量的重复代码。那么 React 是怎么复用组件逻辑的呢?本文将一一介绍 React 复用组件逻辑的几种方
    2020-05-21
  • Django 解决新建表删除后无法重新创建等问题

    Django 解决新建表删除后无法重新创建等问题

    起因 同步表的过程中,我手动将数据库中的一个表删除了,此时再去执行命令,发现不能再数据库中新建表了 修改了表结构以后执行python3 manage.py migrate 报错: No
    2020-05-21
  • Python使用re模块验证危险字符

    Python使用re模块验证危险字符

    re模块是python独有的匹配字符串的模块,该模块中提供的很多功能是基于正则表达式实现的,而正则表达式是对字符串进行模糊匹配,提取自己需要的字符串部分,他对所有
    2020-05-21
  • IntelliJ IDEA 2020下载与安装教程图文详解

    IntelliJ IDEA 2020下载与安装教程图文详解

    IDEA的下载 点击IDEA官方首页进入页面(如下图), 点击Download按钮前往下载页面,如下图: 选择对应的操作系统,选择需要下载的文件格式(.exe文件为可执行文件
    2020-05-21

最新评论