Ant Design Vue 表格内新增修改行数据
如图所示:代码核心处1、表单columns 属性对象下标的 scopedSlots:完整源码(已将导入导出等无关功能代码删除)<template><div><a-modalwidth="1400px"title="SAP产成品产出":visible="visible":footer="null"@cancel="handleCancel"><di
·
如图所示:
代码核心处
1、表单columns 属性对象下标的 scopedSlots:
完整源码(已将导入导出等无关功能代码删除)
<template>
<div>
<a-modal
width="1400px"
title="SAP产成品产出"
:visible="visible"
:footer="null"
@cancel="handleCancel"
>
<div class="d-flex justify-content-between" style="padding: 5px 0">
<div class="mtb-5px">
<a-button
type="primary"
@click="onAdd"
>
新增
</a-button>
</div>
</div>
<a-table
bordered
:scroll="{ y: scrollHeight }"
:columns="columns"
:data-source="dataSource"
:pagination="false"
>
<template
v-for="col in ['finalNum', 'batch', 'feedingSpecifications']"
:slot="col"
slot-scope="text, record"
>
<div :key="col">
<a-input
v-if="record.edit && col !== 'batch'"
style="margin: -5px 0"
:value="text"
@change="(e) => handleChange(e.target.value, record, col)"
/>
<a-select
v-else-if="record.edit && col === 'batch'"
style="margin: -5px 0; width: 100%"
:value="text"
@change="(e) => handleChange(e, record, col)"
>
<a-select-option
v-for="item in record.batchList"
:key="item.value"
:value="item.value"
>
{{ item.value }}
</a-select-option>
</a-select>
<template v-else>{{ text }}</template>
</div>
</template>
<template slot="operation" slot-scope="text, record">
<div class="editable-row-operations">
<a v-if="!record.edit" class="mr-5px" @click="() => onEdit(record)">
修改
</a>
<a v-else style="margin-right: 5px" @click="() => onSave(record)">
保存
</a>
<template v-if="!record.id">
<a-popconfirm
title="确定删除吗?"
@confirm="() => cancel(record.uuid)"
>
<a>删除</a>
</a-popconfirm>
</template>
</div>
</template>
</a-table>
</a-modal>
</div>
</template>
<script>
import {
GetJHBatchListData,
ExportJHProductRecordsData,
SaveJHSapProductReportData,
} from '@/services/dutysApis/jhSapProduct'
export default {
name: 'detailModal',
props: ['visible', 'detailData', 'currentId'],
data() {
return {
uuid: 0,
scrollHeight: 530,
dataSource: [],
status: 0,
columns: [
{
title: '',
customRender: (text, record, index) => {
return index + 1
},
align: 'center',
width: '70px',
},
{
title: '工厂',
dataIndex: 'factoryName',
align: 'center',
},
{
title: '产品编码',
dataIndex: 'matnr',
align: 'center',
},
{
title: '产品描述',
dataIndex: 'maktx',
align: 'center',
},
{
title: '生产版本号',
dataIndex: 'verid',
align: 'center',
},
{
title: '生产版本',
dataIndex: 'texT1',
align: 'center',
},
{
title: '单位',
dataIndex: 'meins',
align: 'center',
},
{
title: '产出数量(自动获取)',
dataIndex: 'autoNum',
scopedSlots: { customRender: 'autoNum' },
width: '100px',
align: 'center',
},
{
title: '产出数量(手动获取)',
dataIndex: 'finalNum',
scopedSlots: { customRender: 'finalNum' },
width: '100px',
align: 'center',
},
{
title: '批次号',
dataIndex: 'batch',
scopedSlots: { customRender: 'batch' },
width: '150px',
align: 'center',
},
{
title: '投料规格',
dataIndex: 'feedingSpecifications',
scopedSlots: { customRender: 'feedingSpecifications' },
align: 'center',
},
{
title: '操作',
scopedSlots: { customRender: 'operation' },
align: 'center',
},
],
}
},
watch: {
visible() {
this.init()
},
},
methods: {
init() {
this.dataSource = this.detailData.datas
this.dataSource.forEach((item, index) => {
// 获取每项的批次列表
this.getBatch(item)
})
},
async getBatch(item) {
let params = { matnr: item.matnr }
let res = await GetJHBatchListData(params)
item.batchList = res
},
// 新增table表行数据
onAdd() {
let newData = [...this.dataSource]
let maxData = newData[newData.length - 1]
let addCount = false
newData.forEach((item) => {
if (item.finalNum === '') {
addCount = true
}
})
if (addCount) {
this.$message.warning('产出数量不能为空!')
} else {
this.dataSource = [
...this.dataSource,
{
// 区分原来的接口数据,还是我们前端新增的数据
uuid: this.uuid++,
// 判断新增数据保存或修改
edit: true,
// 新增行的部分数据与上一行数据一致(业务需求,看看就好)
orderId: maxData ? maxData.orderId : '',
werks: maxData ? maxData.werks : '',
factoryName: maxData ? maxData.factoryName : '',
matnr: maxData ? maxData.matnr : '',
maktx: maxData ? maxData.maktx : '',
verid: maxData ? maxData.verid : '',
texT1: maxData ? maxData.texT1 : '',
meins: maxData ? maxData.meins : '',
autoNum: maxData ? maxData.autoNum : '',
batchList: maxData ? maxData.batchList : [],
// 以下三项是需要我们手动编辑的
finalNum: '',
batch: '',
feedingSpecifications: '',
},
]
}
},
handleChange(value, record, column) {
const newData = [...this.dataSource]
let index
// 区分我们修改 原始接口数据 还是我们 前端新增数据
if (record.id) {
index = newData.findIndex((item) => item.id == record.id)
} else {
index = newData.findIndex((item) => item.uuid == record.uuid)
}
if (index >= 0) {
newData[index][column] = value
this.dataSource = newData
}
},
onEdit(record) {
const newData = [...this.dataSource]
let index
if (record.id) {
index = newData.findIndex((item) => item.id == record.id)
} else {
index = newData.findIndex((item) => item.uuid == record.uuid)
}
if (index >= 0) {
newData[index].edit = true
this.dataSource = newData
}
},
onSave(record) {
const newData = [...this.dataSource]
let index
// 区分我们保存 原始接口数据 还是我们 前端新增数据
if (record.id) {
index = newData.findIndex((item) => item.id == record.id)
} else {
index = newData.findIndex((item) => item.uuid == record.uuid)
}
if (index >= 0) {
if (newData[index].finalNum === '') {
this.$message.warning('产出数量不能为空!')
} else {
newData[index].edit = false
this.$message.success('保存成功')
this.dataSource = newData
}
}
},
// 前端新增数据可删除,原始接口数据不能删,只能改(业务需要,看看就好)
cancel(uuid) {
const newData = [...this.dataSource]
const index = newData.findIndex((item) => item.uuid == uuid)
if (index >= 0) {
newData.splice(index, 1)
this.dataSource = newData
}
},
handleCancel() {
this.$emit('onCloseVisible', false)
},
},
}
</script>
解决antdv中scopedSlots的customRender和customRender函数冲突
data() {
return {
columns: [
{
title: '考核项',
dataIndex: 'sourceId',
// 写法一:如上例子所示
scopedSlots: { customRender: 'sourceId' },
align: 'center',
},
{
title: '数据来源',
dataIndex: 'category',
// 写法二:customRender + jsx 写法
customRender: (text, record) => {
if (record.edit) {
return (
<a-select
style="margin: -5px 0; width: 100%"
value={text}
allowClear
onchange={(e) => {
this.handleChange(e, record, 'category')
}}
>
{this.sourceList.map((item) => {
return (
<a-select-option key={item.value} value={item.value}>
{item.name}
</a-select-option>
)
})}
</a-select>
)
} else {
if (text == 0) {
return '指标库'
} else if (text == 1) {
return '手动录入'
}
}
},
align: 'center',
width: '180px',
},
],
sourceList: [
{ name: '指标库', value: 0 },
{ name: '手动录入', value: 1 },
],
}
},
更多推荐
已为社区贡献8条内容
所有评论(0)