Maison >interface Web >js tutoriel >Exemple de commutateur intégré de rendu de table iview

Exemple de commutateur intégré de rendu de table iview

亚连original: 2018-05-30 15:13:003067parcourir

Ci-dessous, je vais partager avec vous un exemple de rendu de table iview intégrant un commutateur. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Ce que je souhaite partager aujourd'hui, c'est que le rendu de la table iview intègre le switch switch pour modifier la valeur de la table table. Lors de la lecture du document, n'oubliez pas de lire 2.0. Si vous l'ouvrez accidentellement, il devient 1.0 et. alors utilisez-le mais cela n'a aucun effet et la raison n'a pas été trouvée. Ce qui est donné n'est qu'une idée d'écriture, vous pouvez l'intégrer vous-même.

1. L'effet est le suivant

C'est-à-dire que le commutateur de traitement est activé, et la modification correspondante concerne l'état traité, éteignez l'interrupteur et passez-le à l'état non traité.

2. Comment rédiger un modèle HTML

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

3. Écriture de données, écriture de fonction de rendu de table,

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

4. méthodes

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus