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对象模型-执行模型
Apr 28 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
解决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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
Zend引擎的发展 [15]
2006/10/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
浅谈php自定义错误日志
2015/02/13 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
在Python中表示一个对象的方法
2019/06/25 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
Python 实现一个计时器
2020/07/28 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
师范生教师实习自我鉴定
2013/09/27 职场文书
公司出纳岗位职责
2013/12/07 职场文书
培训心得体会
2013/12/29 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
商超业务员岗位职责
2014/03/12 职场文书
师德建设实施方案
2014/03/21 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python