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 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
AngularJs实现ng1.3+表单验证
Dec 10 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
vue实现员工信息录入功能
Jun 11 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php explode函数实例代码
2012/02/27 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
整理Python中的赋值运算符
2015/05/13 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
四风自我剖析材料思想汇报
2014/10/01 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
导游词之包公祠
2019/11/25 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang