iview table render集成switch开关的实例


Posted in Javascript onMarch 14, 2018

今天想要分享的是iview table render集成switch开关修改table表格的值,看文档记得看2.0的,不注意打开就成1.0然后用上了一直没有效果又没有找出原因。给出的只是一种写法思路,具体自己集成。

一、效果如下

iview table render集成switch开关的实例

即是打开处理switch开关,对应修改为已处理状态,关闭switch开关,修改为未处理状态。

二、template html写法

<span style="font-size:14px;"><Table highlight-row border :columns="columns1" :data="data1" ref="table" :height="tableHeight"></Table></span>

三、data写法,table render函数写法,

columns1: [{
 fixed: 'right',
 title: 'Action',
 key: 'action',
 width: 250,
 align: 'center',
 render:(h, params) => {
   return h('div', [
    h('Button', {
    props: {
     type: 'primary',
     size: 'small'
    },
    style: {
     marginRight: '20px'
    },
    on: {
     click: () => {
     this.show(params.index)
     }
    }
    }, '阅览'),
    h('strong', {
    style: {
     marginRight: '5px'
    },
    }, '处理'),
    h('i-switch', { //数据库1是已处理,0是未处理
    props: {
     type: 'primary',
     value: params.row.treatment === 1 //控制开关的打开或关闭状态,官网文档属性是value
    },
    style: {
     marginRight: '5px'
    },
    on: {
     'on-change': (value) => {//触发事件是on-change,用双引号括起来,
           //参数value是回调值,并没有使用到
     this.switch(params.index) //params.index是拿到table的行序列,可以取到对应的表格值
     }
    }
    }, )
   ]);
   }
}]

四、methods方法

//通过开关状态判断值然后传值进行更新
 switch(index) {
  //打开是true,已经处理1
  if (this.data1[index].treatment == 1) {
  this.data1[index].treatment = 0
  this.updateFeedbackMessage(this.data1[index].id, 'treatment', this.data1[index].treatment)
  } else {
  this.updateFeedbackMessage(this.data1[index].id, 'treatment', 1)
  }
 },
 //更新反馈信息某一字段
 updateFeedbackMessage(id, key, value) {
  var vm = this
  var data = {
  id: id
  }
  data[key] = value
  vm.$http.put('/v1/suggestion', data).then(function (response) {
  if (response.data.code == '000000') {
   vm.$Message.info('更新成功');
   vm.getFeedbackMessages()//获取table数据信息,这里调用是因为修改值之后马上可以更新table值
  }
  }).catch((error) => {
  console.log(error)
  })
 },
 //获取所有反馈信息列表
 getFeedbackMessages() {
  var vm = this
  var url = '/v1/suggestions?'
  url = url + "pageNum=" + this.pageNum + '&pageSize=' + this.pageSize
  if (this.createByValue != '') {
  url = url + '&createBy=' + this.createByValue
  }
  if (this.dealModelValue != '') {
  url = url + '&treatment=' + this.dealModelValue
  }
  this.$http.get(url).then(response => {
  if (response.data.code == '000000') {
   vm.data1 = response.data.data
   vm.pageTotal = parseInt(response.data.message)
  }
  }).catch(error => {
  console.log(error)
  })
 },

注重思路,有问题一起交流

以上这篇iview table render集成switch开关的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
Javascript的闭包详解
Dec 26 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue动态绑定style样式
Apr 20 Vue.js
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 #Javascript
Vue.js 动态为img的src赋值方法
Mar 14 #Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 #Javascript
vue 过滤器filter实例详解
Mar 14 #Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 #Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 #Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php发送邮件的问题详解
2015/06/22 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jQuery基础知识小结
2014/12/22 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
简单的js计算器实现
2016/10/26 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
新手学python应该下哪个版本
2020/06/11 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
银行职业规划书范文
2013/12/28 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
大专学生求职自荐信
2014/07/06 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
学期个人自我总结
2015/02/13 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL