关于Vue的v-for渲染出多个元素之后如何单独添加属性

问题：我们想要在一个表单里面。有多个按钮，但是点击到只剩下一个按钮之后那个按钮不可点击。原先：<template scope="scope"><el-switch v-model="scope.row.state" :on-value=1 :off-value=0 on-text=&q

快乐的大羊

6931人浏览 · 2018-03-29 10:25:17

快乐的大羊 · 2018-03-29 10:25:17 发布

问题：我们想要在一个表单里面。有多个按钮，但是点击到只剩下一个按钮之后那个按钮不可点击。

原先：

 
  < 
  template 
  scope= 
  "scope" 
  > 
 
 
  < 
  el-switch 
  v-model=" 
  scope. 
  row. 
  state" 
 
 
          :on-value=1 
 
 
          :off-value=0 
  on-text= 
  "否" 
  off-text= 
  "是" 
 
 
  v-if=" 
  scope. 
  row. 
  assign== 
  1" 
 
 
          @change=" 
  setChange( 
  scope. 
  $index, 
  scope. 
  row)" 
  > 
 
 
  </ 
  el-switch 
  > 
 
 
  </ 
  template 
  > 
 

解决方法：我们在可以每一个switch里面添加一个属性，之后在属性里面做判断

 
  < 
  template 
  scope= 
  "scope" 
  > 
 
 
  < 
  el-switch 
  v-model=" 
  scope. 
  row. 
  state" 
 
 
          :on-value=1 
 
 
          :off-value=0 
  on-text= 
  "否" 
  off-text= 
  "是" 
 
 
  v-if=" 
  scope. 
  row. 
  assign== 
  1" 
 
 
          @change=" 
  setChange( 
  scope. 
  $index, 
  scope. 
  row)" 
 
 
          :disabled="scope.row.state==1&&isDisabled"> 
 
 
  </ 
  el-switch 
  > 
 
 
  </ 
  template 
  > 
 

之后在script中添加如下方法，判断每次点击的时候。剩下的switch的状态。在做判断

 
  setChange( 
  index, 
  row) { 
 
  let 
  arr = []; 
 
  // 改变后的值 
 
  if( 
  row. 
  state== 
  1){ 
 
  row. 
  state= 
  0; 
 
   } 
  else{ 
 
  row. 
  state= 
  1; 
 
   } 
 
  this. 
  list1. 
  forEach( 
  element 
  => { 
 
  if( 
  element. 
  assign== 
  1&& 
  element. 
  state== 
  1){ 
 
  arr. 
  push( 
  1); 
 
   } 
 
   }); 
 
  // console.log(arr.length); 
 
  //判断最后一个开关是否禁用 
 
  if( 
  arr. 
  length<= 
  1){ 
 
  this. 
  isDisabled= 
  true; 
 
   } 
  else{ 
 
  this. 
  isDisabled= 
  false; 
 
   }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^