vue this.$set实现输入框的互斥效果

一.  this.$set 实现的功能:

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

 本质上： 为了解决 给对象/数组添加了一个新属性，在控制台能打印出来，但是却没有更新到视图上 的问题

二. 使用方法

this.$set( target, key, value )

target： 要更改的数据源(可以是对象或者数组)

key： 要更改的具体数据

value ：重新赋的值

三. 举例实现功能 及 效果图

通过设置 this.$set  实现3个输入框为互斥效果

效果图:

1.设置协议价后,专版折扣 与 减价 置灰

2.设置专版折扣后,协议价 和 减价置灰

3.设置减价后,协议价 和 专版折扣置灰

四. 实现原理:

　　在输入框的聚焦事件中通过 this.$set 添加 blurGray 值,在类名中设置该值,实现置灰效果

五. 实现代码

 1             <el-table-column align="center" label="协议价">
 2               <template slot-scope="scope">
 3                 <el-form-item prop="skus" label-width="0" class="input_box">
 4                   <el-input
 5                     v-model="scope.row.agreementPrice"
 6                     @blur="blurAgreementPrice(scope.row)"
 7                     @focus="()=>$set(scope.row,'blurGray',2)"
 8                     :class="{'product-config-danger':scope.row.agreementPrice<0, 'blurGray':scope.row.blurGray == 1 || scope.row.blurGray == 0}"
 9                   ></el-input>
10                   <span class="tips">元</span>
11                 </el-form-item>
12                 <p v-if="scope.row.agreementPrice<0" class="product-config-danger table-tips">协议价需大于0</p>
13               </template>
14             </el-table-column>
15 
16             <el-table-column align="center" label="专版折扣">
17               <template slot-scope="scope">
18                 <el-form-item prop="skus" label-width="0" class="input_box">
19                   <el-input
20                     v-model="scope.row.discount"
21                     @blur="blurDiscount(scope.row)"
22                     @focus="()=>$set(scope.row,'blurGray',0)"
23                     :class="{ 'product-config-danger':scope.row.discount<0,  'blurGray':scope.row.blurGray == 1 || scope.row.blurGray == 2  }"
24                   ></el-input>
25                   <br />
26                   <span class="tips">折</span>
27                 </el-form-item>
28                 <p v-if="scope.row.discount<0" class="product-config-danger table-tips">专版折扣需大于0</p>
29               </template>
30             </el-table-column>
31 
32             <el-table-column align="center" label="减价">
33               <template slot-scope="scope">
34                 <el-form-item prop="skus" label-width="0" class="input_box">
35                   <el-input
36                     v-model="scope.row.priceReduction"
37                     @blur="blurCheapen(scope.row)"
38                     @focus="()=>$set(scope.row,'blurGray',1)"
39                     :class="{ 'product-config-danger':scope.row.priceReduction<0, 'blurGray':scope.row.blurGray == 0 || scope.row.blurGray == 2  }"
40                   ></el-input>
41                   <span class="tips">元</span>
42                 </el-form-item>
43                 <p
44                   v-if="scope.row.priceReduction<0"
45                   class="product-config-danger table-tips"
46                 >减价金额需大于0</p>
47               </template>
48             </el-table-column>

设置css

 1 .product-config-danger {
 2     color: #f56c6c;
 3     .el-input__inner {
 4       color: #f56c6c;
 5     }
 6   }
 7  .blurGray {
 8     .el-input__inner {
 9       color: #ccc;
10       border-color: #eee;
11     }
12  }