首页 > 编程 > JavaScript > 正文

iview table render集成switch开关的实例

2019-11-19 14:10:35
字体:
来源:转载
供稿:网友

今天想要分享的是iview table render集成switch开关修改table表格的值,看文档记得看2.0的,不注意打开就成1.0然后用上了一直没有效果又没有找出原因。给出的只是一种写法思路,具体自己集成。

一、效果如下

即是打开处理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开关的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表