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 相关文章推荐
Js获取数组最大和最小值示例代码
Oct 29 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
vue解决跨域问题(推荐)
Nov 10 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
laravel Task Scheduling(任务调度)在windows下的使用详解
2019/10/22 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
javascript globalStorage类代码
2009/06/04 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python中字符串的编码与解码详析
2020/12/03 Python
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
社团2014年植树节活动总结
2014/03/11 职场文书
热门专业求职信
2014/05/24 职场文书
公司总经理任命书
2014/06/05 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
离婚协议书范本
2015/01/26 职场文书
门店店长岗位职责
2015/04/14 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS