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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
JavaScript对象学习小结
Sep 02 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
基于jQuery的checkbox全选问题分析
Nov 18 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
关于layui时间回显问题的解决方法
Sep 24 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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
网络资源
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php小偷相关截取函数备忘
2010/11/28 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
jQuery ajax分页插件实例代码
2016/01/27 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
Python with的用法
2014/08/22 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
Python self用法详解
2020/11/28 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
精彩自我鉴定
2014/01/16 职场文书
学校岗位设置方案
2014/01/16 职场文书
中学生差生评语
2014/01/30 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2015年社区精神文明工作总结
2015/05/26 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书