Einführung in iview table render integrierter Switch-Switch-js-Tutorial-php.cn

Einführung in iview table render integrierter Switch-Switch

不言

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

Original

2983 Leute haben es durchsucht

Das Folgende ist ein Beispiel für den iview-Table-Render-Integrationsschalter. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Was ich heute mitteilen möchte, ist, dass iview table render den Schalter zum Ändern des Tabellenwerts integriert. Denken Sie daran, 2.0 zu lesen, wenn Sie es versehentlich öffnen Verwenden Sie es dann, aber es hat keine Wirkung und der Grund wurde nicht gefunden. Es handelt sich lediglich um eine Schreibidee, die Sie selbst integrieren können.

1. Der Effekt ist wie folgt

Das heißt, der Verarbeitungsschalter ist eingeschaltet, und die entsprechende Änderung erfolgt in den verarbeiteten Zustand. Schalten Sie den Schalter aus und ändern Sie ihn in den unverarbeiteten Zustand.

2. So schreiben Sie eine HTML-Vorlage

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

Nach dem Login kopieren

3. Wie man Daten schreibt, wie man eine Tabellenrenderfunktion schreibt,

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的行序列，可以取到对应的表格值
     }
    }
    }, )
   ]);
   }
}]

Nach dem Login kopieren

4. Methoden

//通过开关状态判断值然后传值进行更新
 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)
  })
 },

Nach dem Login kopieren

Achten Sie auf Ideen und teilen Sie Ihre Fragen mit, wenn Sie Fragen haben

Das Obige ist der gesamte Inhalt von Ich hoffe, dass dieser Artikel für das Studium aller hilfreich sein wird. Bitte achten Sie auf den Inhalt der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in den Code der Vue-Scroller-Aufzeichnung der Bildlaufposition

Wie man Vues .sync versteht Änderung Verwendung von Symbolen

Vue fügt Anforderungs-Interceptor und Vue-Ressource hinzu. Verwendung von Interceptor

Das obige ist der detaillierte Inhalt vonEinführung in iview table render integrierter Switch-Switch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!