vue值发生变化颜色就变化,值变化时获取值

  <template slot-scope="scope">
        <el-date-picker id="fname1" class="date" v-model="scope.row.paymentMonth" :class="scope.row.redClassFlag1 && 'red-class'" type="month" :disabled="!scope.row.changeNums" format="yyyy年MM月"  @change="changeValue1(scope.row, scope.$index)"> </el-date-picker>
        <i class="el-icon-edit" @click="changeNum(scope.row, scope.$index)"></i>
   </template>
    <template slot-scope="scope">
        <el-input type="text" v-model="scope.row.payedAmount" :class="scope.row.redClassFlag2 && 'red-class'" class="cell_input" :disabled="!scope.row.changeNums" style="width:90px; color: red" @change="changeValue2(scope.row, scope.$index)" />
        <i class="el-icon-edit" @click="changeNum(scope.row, scope.$index)"> </i>
    </template>

export default {
  	data() {
    	return {
	      disabled: true,
	      centerDialogVisible: false,
	      tableHeight: window.innerHeight - 305,
	      params: {
	        paymentInputDate: "",
	        pageNum: 1,
	        pageSize: 15
	      },
	      tableData: {
	        total: 1,
	        list: []
	      }
	   }
	}
   change(row){
      const index = this.allParams.clubPaymentHistories.findIndex((item) => {return item.index === row.index})
      if(index === -1){
        const rowData = {
          ...row,
          paymentMonth: moment(row.paymentMonth).format("YYYYMM")
        };
        this.allParams.clubPaymentHistories.push(rowData);
      }else{
        const rowData = {
          ...row,
          paymentMonth: moment(row.paymentMonth).format("YYYYMM")
        };
        this.allParams.clubPaymentHistories[index] = rowData;
      }
    },
    changeValue1(row, index){
      this.change(row);
      const temp = JSON.parse(JSON.stringify(row));
      temp.redClassFlag1 = true;
      this.$set(this.tableData.list, index, temp);
    },
    changeValue2(row,index){
      this.change(row);  
      const temp = JSON.parse(JSON.stringify(row));
      temp.redClassFlag2 = true;
      this.$set(this.tableData.list, index, temp);
      
    },
<style>
.red-class input{
 color: red;
}
</style>

this.$set(target, key, value)触发视图更新
target:要更改的数据源(可以是对象或者数组)(在这里为table里的数据)
key:要更改的具体数据(这里为index,所改变行)
value :重新赋的值
scope.row:这里指拿到每一行的数据
scope.index:这里指拿到每一行的index

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值