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

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

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

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

时间: 2020-05-18

VUE element-ui 写个复用Table组件的示例代码

饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:

详解VUE 对element-ui中的ElTableColumn扩展

公司有一个新的需求,点击ElTableColumn的头部可以进行搜索,这个功能同事已经做出来了,但是使用有些不方便,自己就打算封装成一个组件,学习一下. ElTableColumn本来是这个样子的: 要做成的是这个样子: 我直接就放代码了,挨着挨着说明太多了. 代码的结构: 组件 <!-- ElTableColumnPro.vue --> <template> <el-table-column v-if="visible" :formatter="

详解vue2.0的Element UI的表格table列时间戳格式化

这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

vue2.0 + element UI 中 el-table 数据导出Excel的方法

1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

基于Vue+element-ui 的Table二次封装的实现

本人第一次写这个 写的不好还望指出来 作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ! 公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+Pagination了 效果图 表格组件的引入与使用 <com-table title="监测数据" v-model="tableData4" @selection-change="handleSelectionChange&q

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

在开发中,需要表格控件根据浏览器高度进行调整,固定表头,且然后多余的出滚动条,官方给出的: 只要在el-table元素中定义了height属性,即可实现固定表头的表格,而不需要额外的代码. 然后直接上template代码: <template> <el-table :data="tableData3" height="250" border style="width: 100%"> <el-table-column

vue elementUI table表格数据 滚动懒加载的实现方法

在项目中遇到了一个性能问题 vue+elementUI table表格展示数据,当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验, 这个时候常常有两种方法处理, 1.分页,如下 2.如果我不想分页,又想在一页显示全部数据呢?这个时候其实就可以用数据懒加载了 如下一开始表格只显示31行数据 当将滚动条拉到低的时候,就会再加载31条数据,如果剩下的数据不足31,那就加载剩下的 根据项目需求,这需要一页可以看到全部数据,所以我选择了第二中方式 那么第二种方式要怎

vue element-ui table表格滚动加载方法

添加全局注册事件,用来监听滚动事件 window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.

Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

vue1.0和vue2.0的watch监听事件写法详解

如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

对vue2.0中.vue文件页面跳转之.$router.push的用法详解

vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

mysql8.0.20配合binlog2sql的配置和简单备份恢复的步骤详解

第一步 安装 1.安装MySQL 2.安装Python3 [root@localhost /]#yum install python3 3.下载binlog2sql文件到本地(文件在百度云盘) [root@localhost /]#mkdir tools [root@localhost /]#cd tools [root@localhost tools]# ll total 317440 -rw-r--r--. 1 root root 317440 Sep 21 23:55 binlog2sql

MySQL 8.0.20 Window10免安装版配置及Navicat管理教程图文详解

1.MySQL8.0.20下载及解压 下载链接https://dev.mysql.com/downloads/mysql/ 2.新建配置文件my.ini放在D:\mysql-8.0.20-winx64目录下 [client] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] # 设置3306端口 port = 3306 # 设置mysql的安装目录 basedir=D:\\mysql-8.0.20-winx64 # 设置 mysql数据库

mysql 循环批量插入的实例代码详解

背景 前几天在MySql上做分页时,看到有博文说使用 limit 0,10 方式分页会有丢数据问题,有人又说不会,于是想自己测试一下.测试时没有数据,便安装了一个MySql,建了张表,在建了个while循环批量插入10W条测试数据的时候,执行时间之长无法忍受,便查资料找批量插入优化方法,这里做个笔记. 数据结构 寻思着分页时标准列分主键列.索引列.普通列3种场景,所以,测试表需要包含这3种场景,建表语法如下: drop table if exists `test`.`t_model`; Crea

Android仿京东淘宝自动无限循环轮播控件思路详解

在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于RelativeLayout,首先要考虑的就是自定义的控件需要扩展那些属性,把这些属性列出来.在这里是要实现类似于京东淘宝的无限轮播广告栏,那么首先想到的就是轮播的时长.轮播指示器的样式等等.我在这里列举了一些并且结合到了代码中. 1.扩展属性 (1)是否开启自动轮播的功能. (2)指示器的图形样式,一

对python中的for循环和range内置函数详解

如下所示: 1.for循环和range内置函数配合使用 range函数生成一个从零开始的列表, range(4)表示list:0123 range(1,11,2)表示从1开始到11-1为止步长为2的list:13579 即range(i)表示从0开始到i-1的列表,range(m,n)表示从m开始到n-1的列表,range(m,n,t)表示从m开始步长为t到n-1的列表 ''' print('第一次循环输出:') for i in range(4): print(i) print('第二次循环输

IOS 避免self循环引用的方法的实例详解

IOS 避免self循环引用的方法的实例详解 示例代码: // - weak & strong #define myWeakify(VAR) \ try {} @finally {} \ __weak __typeof__(VAR) VAR##_myWeak_ = (VAR) #define myStrongify(VAR) \ try {} @finally {} \ __strong __typeof__(VAR) VAR = VAR##_myWeak_ #define myStrongif

JQuery在循环中绑定事件的问题详解

有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 <input type="text" name="username" id="username_1" value="" /> <input type="text" name="username" id="username_2" value="" />