Introduction to iview table render integrated switch switch-JS Tutorial-php.cn

Introduction to iview table render integrated switch switch

不言

Release： 2018-06-30 17:03:04

Original

2982 people have browsed it

Let me share with you an example of iview table render integrating switch switch. It has a good reference value and I hope it will be helpful to everyone.

What I want to share today is that iview table render integrates the switch switch to modify the value of the table table. When reading the document, remember to read 2.0. If you accidentally open it, it becomes 1.0 and then use it but it has no effect and the reason has not been found. What is given is just a writing idea, you can integrate it yourself.

1. The effect is as follows

#That is, turn on the processing switch and change it to the processed state. , turn off the switch, and change it to the unprocessed state.

2. Template html writing method

<span style="font-size:14px;"><Table highlight-row border :columns="columns1" :data="data1" ref="table" :height="tableHeight"></Table></span>

Copy after login

3. How to write data, how to write table render function,

columns1: [{
 fixed: &#39;right&#39;,
 title: &#39;Action&#39;,
 key: &#39;action&#39;,
 width: 250,
 align: &#39;center&#39;,
 render:(h, params) => {
   return h(&#39;p&#39;, [
    h(&#39;Button&#39;, {
    props: {
     type: &#39;primary&#39;,
     size: &#39;small&#39;
    },
    style: {
     marginRight: &#39;20px&#39;
    },
    on: {
     click: () => {
     this.show(params.index)
     }
    }
    }, &#39;阅览&#39;),
    h(&#39;strong&#39;, {
    style: {
     marginRight: &#39;5px&#39;
    },
    }, &#39;处理&#39;),
    h(&#39;i-switch&#39;, { //数据库1是已处理，0是未处理
    props: {
     type: &#39;primary&#39;,
     value: params.row.treatment === 1 //控制开关的打开或关闭状态，官网文档属性是value
    },
    style: {
     marginRight: &#39;5px&#39;
    },
    on: {
     &#39;on-change&#39;: (value) => {//触发事件是on-change,用双引号括起来，
           //参数value是回调值，并没有使用到
     this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
     }
    }
    }, )
   ]);
   }
}]

Copy after login

## 4. Methods method

//通过开关状态判断值然后传值进行更新
 switch(index) {
  //打开是true,已经处理1
  if (this.data1[index].treatment == 1) {
  this.data1[index].treatment = 0
  this.updateFeedbackMessage(this.data1[index].id, &#39;treatment&#39;, this.data1[index].treatment)
  } else {
  this.updateFeedbackMessage(this.data1[index].id, &#39;treatment&#39;, 1)
  }
 },
 //更新反馈信息某一字段
 updateFeedbackMessage(id, key, value) {
  var vm = this
  var data = {
  id: id
  }
  data[key] = value
  vm.$http.put(&#39;/v1/suggestion&#39;, data).then(function (response) {
  if (response.data.code == &#39;000000&#39;) {
   vm.$Message.info(&#39;更新成功&#39;);
   vm.getFeedbackMessages()//获取table数据信息，这里调用是因为修改值之后马上可以更新table值
  }
  }).catch((error) => {
  console.log(error)
  })
 },
 //获取所有反馈信息列表
 getFeedbackMessages() {
  var vm = this
  var url = &#39;/v1/suggestions?&#39;
  url = url + "pageNum=" + this.pageNum + &#39;&pageSize=&#39; + this.pageSize
  if (this.createByValue != &#39;&#39;) {
  url = url + &#39;&createBy=&#39; + this.createByValue
  }
  if (this.dealModelValue != &#39;&#39;) {
  url = url + &#39;&treatment=&#39; + this.dealModelValue
  }
  this.$http.get(url).then(response => {
  if (response.data.code == &#39;000000&#39;) {
   vm.data1 = response.data.data
   vm.pageTotal = parseInt(response.data.message)
  }
  }).catch(error => {
  console.log(error)
  })
 },

Copy after login

Pay attention to ideas and communicate with us if you have any questions

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related Please pay attention to the PHP Chinese website for content!

Related recommendations:

Introduction to the code for vue-scroller to record the scroll position

How to understand Vue’s .sync modification The use of symbols

Vue adds a request interceptor and the use of vue-resource interceptor

The above is the detailed content of Introduction to iview table render integrated switch switch. For more information, please follow other related articles on the PHP Chinese website!