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 = trueconsole.log('保存行',row);let obj={} let fundVoList=[] let tOmsDepositReceipt={}fundVoList.push(row)tOmsDepositReceipt=Object.assign({},this.seledtedReceipt)obj.tOmsDepositReceipt=tOmsDepositReceiptobj.fundVoList=fundVoListconsole.log('保存行obj',obj);this.$httpPost('/receipt/saveReceiptFund',obj).then((resSave)=>{console.log('保存',resSave);if(resSave.data.actionResult==1){this.$Message.success(resSave.data.data);//刷新tablethis.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.lAmountthis.$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}},