<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