1.显示隐藏字段edit 是后端返回字段 ，在table表格中的row内
2.$set 更换row中edit 的状态
3.（表格中有input框 编辑内容 ， input中的内容会改变最初值，）
取消按钮 需要 用到初始值的副本
4.用到当前时间 获取当前时间的时间戳 写法
5.后端返回时间是 字符串 转换成 时间的格式
6.返给后端时间转换成 不带 - 的字符串
7.编辑按钮禁用的条件 时间戳比较大小 条件中用return 终止逻辑
<el-table-column
:resizable='false'
fixed="right"
label="操作"
align="center"
class-name="fix-column-class"
v-if="item.columntype == 'button'"
:key="item.key"
:width="260"
>
<template slot-scope="scope">
<!-- 编辑按钮 -->
<Button type="primary" style="background-color:#4796e6"
icon="ios-create-outline" size="small"
:disabled=isEditFlagFn(scope.row)
v-if="!scope.row.edit"
@click="editTableRow(scope.row,scope.$index)"></Button>
<!-- :loading="saveLoad" -->
<!-- 对勾 -->
<Button class="successBtn" icon="md-checkmark" type="success" size="small" style="margin-right:2px"
v-if="scope.row.edit" @click="saveTableRow($event,scope.row,scope.$index)">
<span v-show='ffrirt' style="width:0px"></span>
</Button>
<!-- :loading="saveLoad" -->
<!-- 差号 -->
<Button class="successBtn" icon="md-close" type="success" size="small" style="margin-right:2px"
v-if="scope.row.edit" @click="cancelTableRow(scope.row,scope.$index)">
<span style="width:0px"></span>
</Button>
<!-- 删除 -->
<Button style="background-color:#a53e47;color:white;border-top:0px;
border-left:0px;border-right:0px;border-bottom:0px solid #a53e47;" icon="ios-trash-outline"
v-if="!scope.row.edit"
size="small"
@click="deleteTableRow(scope.row,scope.$index)"></Button>
</template>
</el-table-column>2条和3条
// 编辑表格当前行并显示保存对勾
editTableRow (row, index) {
console.log('编辑row',row)
this.$set(row, 'edit', true)
},
//保存列表当前行存单
saveTableRow(event,row, index){
// this.saveLoad = true
console.log('保存行',row);
let obj={}
let fundVoList=[]
let tOmsDepositReceipt={}
fundVoList.push(row)
tOmsDepositReceipt=Object.assign({},this.seledtedReceipt)
obj.tOmsDepositReceipt=tOmsDepositReceipt
obj.fundVoList=fundVoList
console.log('保存行obj',obj);
this.$httpPost('/receipt/saveReceiptFund',obj)
.then((resSave)=>{
console.log('保存',resSave);
if(resSave.data.actionResult==1){
this.$Message.success(resSave.data.data);
//刷新table
this.getSelectReceiptFundList()
}
})
},
// 取消编辑当前行
cancelTableRow (row, index) {
console.log('取消row',row);
console.log('this.certificateDepositData',this.certificateDepositData);
console.log('this.copyData',this.copyData);
this.copyData.forEach(item=>{
if(row.vcFundId==item.vcFundId){
// row.lAmount=item.lAmount
this.$set(row, 'lAmount', item.lAmount)
}
})
this.$set(row, 'edit', false)
console.log('取消row取消',row);
},第6条时间转换成没有 - 的字符串
<el-form-item label="申购截止日" prop="purchaseDate" style="color: #fff;">
<DatePicker
:editable="false" type="date"
@on-change="getStartDate" :value="ruleForm.purchaseDate"
placeholder="申购截止日:" format="yyyy-MM-dd"
style="width: 160px" ></DatePicker>
</el-form-item>
//获取时间
getStartDate (val, date) {
this.ruleForm.purchaseDate = val.replace('-','').replace('-','');
console.log('val',this.ruleForm.purchaseDate);
},第4 5 7 条
//时间加 -
formatDateString(dateStr) {
// 假设输入的日期字符串是8位数字，且格式为YYYYMMDD
// || !/^\d+$/.test(dateStr)
// console.log('dateStr',dateStr);
if (dateStr.length == 8 ) {
const year = dateStr.substring(0, 4);
const month = dateStr.substring(4, 6);
const day = dateStr.substring(6, 8);
return new Date(`${year}-${month}-${day} 23:59:59`);
}else{
console.log('截止时间格式不对或不存在');
return ''
// throw new Error('Invalid date string format');
}
},
//编辑按钮是否禁用
isEditFlagFn(row){
//当前时间的时间戳
let O = new Date()
let date = O.getTime()
// console.log('当前时间戳',date);
//申购截至时间转换成时间 戳
let datePur=Date.parse(this.formatDateString(this.vcRePurchaseDate))
// console.log('截止日时间戳',datePur);
if(row.editFlag=='true'){
// console.log('row.editFlag',row.editFlag);
//禁用
return true
}else if(date<=datePur){
//禁用 当前时间大于 申购截止时间 截止时间不存在不会到这里
//可以编辑 当前时间小于等于 申购截止时间
// console.log('当前时间小于等于 申购截止时间')
return false
}else if(row.vcStatus==1||row.vcStatus==2){
//不可编辑
return true
}else{
//可以编辑
return false
}
},