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 面向对象之命名空间
May 04 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
关于js遍历表格的实例
Jul 10 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
javascript拖拽应用实例
Mar 25 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
js实现ajax的用户简单登入功能
Jun 18 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
php的ajax简单实例
2014/02/27 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python学生管理系统开发
2019/01/30 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
pyspark 随机森林的实现
2020/04/24 Python
python如何删除列为空的行
2020/07/17 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
校园安全教育广播稿
2014/02/17 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
食品流通安全承诺书
2014/05/22 职场文书
品质口号大全
2014/06/17 职场文书
创优争先心得体会
2014/09/11 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python