效果
<!-- -->
<template>
<a-modal v-model:visible="visible" title="新增国家(地区)" @ok="handleOk" width="1000px">
<a-form :model="dataSource" ref="AddModalForm">
<a-table :dataSource="dataSource" :columns="columns" size="small" :pagination="null" rowKey="id"
:row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
<template #headerCell="{ column }: any">
<template v-if=" column.dataIndex === 'action' ">
<a-button type="primary" style="padding-left:10px;padding-right:10px;" @click=" handleAddRow ">
<template #icon><plus-outlined /></template>新增
</a-button>
</template>
</template>
<template #bodyCell=" { column, index, record }: any ">
<template v-if=" column.dataIndex === 'nation' ">
<a-form-item
:rules=" [{ required: true, validator: () => customCheck(index, 'nation'), trigger: 'change' }] ">
<a-input v-model:value=" record.nation " placeholder="请输入国家(地区)名称" />
</a-form-item>
</template>
<template v-if=" column.dataIndex === 'code' ">
<a-form-item name="code"
:rules=" [{ required: true, validator: () => customCheck(index, 'code'), trigger: 'change' }] ">
<a-input v-model:value=" record.code " placeholder="请输入国家(地区)编码" />
</a-form-item>
</template>
<template v-if=" column.dataIndex === 'desc' ">
<a-form-item>
<a-input v-model:value=" record.desc " placeholder="请输入描述" />
</a-form-item>
</template>
<template v-if=" column.dataIndex === 'action' ">
<a-button type="link" danger @click=" handleDel(index) ">删除</a-button>
</template>
</template>
</a-table>
</a-form>
</a-modal>
</template>
<script lang='ts' setup>
import {
reactive, toRefs, ref, onMounted } from 'vue'
import {
PlusOutlined } from '@ant-design/icons-vue'
import {
columns } from "../columns";
import type {
Rule } from 'ant-design-vue/es/form';
const AddModalForm = ref(null)
const visible = ref(false)
const dataSource = ref([
{
nation: '', code: '', desc: '' }
])
function handleAddRow() {
dataSource.value.push({
nation: '', code: '', desc: '' })
}
function handleDel(index: number) {
dataSource.value.splice(index, 1)
}
async function handleOk() {
console.log(AddModalForm.value)
AddModalForm.value.validateFields()
.then((res) => {
console.log('res', res)
})
.catch((err) => {
console.error("校验失败", err)
})
}
function show() {
visible.value = true
}
function hide() {
visible.value = false
}
defineExpose({
show, hide })
function customCheck(index: number, key: string) {
if (dataSource.value[index][key]) {
return Promise.resolve()
}
return Promise.reject()
}
</script>
<style lang='scss' scoped ></style>