效果:
结构:
<a-table
v-show="isDone==='plan'"
:pagination="false"
:columns="columns"
:data-source="showList"
bordered
size="middle"
:scroll="{ y: 'calc(100vh - 250px)' }"
>
<template v-for="col in [ 'yearMon', 'wellType','dmMethod', 'wellName', 'wellTime', 'oilInc']" :slot="col" slot-scope="text, record,index">
<div :class="col" :key="col">
<a-input
style="box-shadow: none;backgroundColor:rgba(0,0,0,0);border:none;margin:-10px 0;width:100%;height:100%;border:none;outline: none;textAlign:center"
:ref="col"
v-if="record.wellType==='waterWell'?col != 'oilInc'&&col != 'yearMon'&&col != 'wellType':col != 'yearMon'&&col != 'wellType'"
:value="text"
@keyup="(e) => handleChange(e.target, record, col)"
/>
<a-select
placeholder="请选择"
v-if="col == 'yearMon'"
v-model="record.yearMon"
style="width: 100%"
@change="aSelectChange($event,col,index)"
>
<a-select-option :value="ind >= 10 ? ind+1 : '0' + (ind+1)" v-for="(item, ind) in month" :key="ind"> {{ item }} </a-select-option>
</a-select>
<a-select
placeholder="请选择"
v-if="col == 'wellType'"
v-model="record.wellType"
style="width: 100%"
@change="aSelectChange($event,col,index)"
>
<a-select-option :value="item.type" v-for="(item, ind) in [{name:'油井',type:'oilWell'},{name:'水井',type:'waterWell'}]" :key="ind"> {{ item.name }} </a-select-option>
</a-select>
</div>
</template>
<template slot="operation" slot-scope="text, record">
<span @click.stop="delRow(record)" class="deletStyle">删除</span>
</template>
</a-table>
数据:
data () {
return {
year: '',
idNow: '',
showList: [],
showList2: [],
saveList: [],
dateList: [],
planList: [],
delPlanList: [],
delDateList: [],
columns,
key: 0,
key2: 0,
isDone: 'plan',
isWrite: true,
month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}
}
功能:
delRow (record) {
if (this.isDone === 'plan') {
if (record.planId) {
this.delPlanList.push(record.planId)
this.delPlanList = Array.from(new Set(this.delPlanList))
this.showList = this.showList.filter(item => {
return item.key !== record.key
})
} else {
this.showList = this.showList.filter(item => {
return item.key !== record.key
})
}
} else if (this.isDone === 'done') {
if (record.implementId) {
this.delDateList.push(record.implementId)
this.delDateList = Array.from(new Set(this.delDateList))
this.showList2 = this.showList2.filter(item => {
return item.key !== record.key
})
} else {
this.showList2 = this.showList2.filter(item => {
return item.key !== record.key
})
}
}
},
handleChange (value, record, column) {
this.isWrite = true
if (this.isDone === 'plan') {
if (column !== 'wellName') {
this.showList[record.key][column] = value.value
} else {
const arr = this.showList.filter(item => {
return item.wellName === value.value && item.key !== record.key && item.wellType === record.wellType && item.yearMon === record.yearMon
})
if (arr.length === 0) {
this.showList[record.key][column] = value.value
} else {
this.$message.warning('不能有重复井号', 1.5)
value.value = this.showList[record.key][column]
}
}
} else if (this.isDone === 'done') {
if (column !== 'wellName') {
this.showList2[record.key][column] = value.value
} else {
const arr = this.showList2.filter(item => {
return item.wellName === value.value && item.key !== record.key && item.wellType === record.wellType && item.yearMon === record.yearMon
})
if (arr.length === 0) {
this.showList2[record.key][column] = value.value
} else {
this.$message.warning('不能有重复井号', 1.5)
value.value = this.showList2[record.key][column]
}
}
}
},
aSelectChange (e, col, index) {
this.isWrite = true
if (this.isDone === 'plan') {
if (e === 'oilWell' || e === 'waterWell') {
this.showList[index][col] = e
} else {
this.showList[index][col] = this.year + '' + e
}
} else if (this.isDone === 'done') {
if (e === 'oilWell' || e === 'waterWell') {
this.showList2[index][col] = e
} else {
this.showList2[index][col] = this.year + '' + e
}
}
}