用vue ant写代码,需求是一个表格,比如有姓名,手机号,身份证号,民族,国家省市等等,并且要求提交数据时,对数据进行校验重复性校验,比如,当姓名和手机号同时重复时,或者身份证号完全一致时,判定为一个人,为重复,如果出现重复,则以表格的形式将重复的内容标红展示在主表下方
时间: 2024-05-05 17:22:22 浏览: 23
好的,你可以按照以下步骤实现:
1. 使用Vue Antd的Table组件来展示表格,根据需求定义表格的列,包括姓名,手机号,身份证号,民族,国家省市等等。
2. 在提交数据时,定义一个校验函数,遍历已有数据,对新提交的数据进行重复性校验。可以使用lodash等工具库进行数组的比对和操作。
3. 如果发现有重复数据,将重复的内容标红并展示在主表下方。可以使用Vue Antd的Alert和Table组件来实现。
以下是一个简单的代码示例:
```vue
<template>
<div>
<a-form :form="form" @submit="handleSubmit">
<a-form-item label="姓名" required>
<a-input v-decorator="['name']" />
</a-form-item>
<a-form-item label="手机号" required>
<a-input v-decorator="['phone']" />
</a-form-item>
<a-form-item label="身份证号" required>
<a-input v-decorator="['idCard']" />
</a-form-item>
<!-- 其他表单项 -->
<a-button type="primary" html-type="submit">提交</a-button>
</a-form>
<a-alert v-if="duplicates.length > 0" type="warning" show-icon>
<span>以下数据已存在:</span>
<a-table :columns="columns" :dataSource="duplicates" rowKey="id" />
</a-alert>
<a-table :columns="columns" :dataSource="data" rowKey="id" />
</div>
</template>
<script>
import { cloneDeep, findIndex } from 'lodash'
export default {
data() {
return {
form: this.$form.createForm(this),
data: [],
duplicates: []
}
},
computed: {
columns() {
return [
{ title: '姓名', dataIndex: 'name' },
{ title: '手机号', dataIndex: 'phone' },
{ title: '身份证号', dataIndex: 'idCard' },
// 其他列
]
}
},
methods: {
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
const newData = cloneDeep(this.data)
const index = findIndex(newData, {
name: values.name,
phone: values.phone,
idCard: values.idCard
})
if (index >= 0) {
this.duplicates.push(newData[index])
newData[index] = { ...newData[index], isDuplicate: true }
} else {
newData.push({ ...values, id: Date.now() })
}
this.data = newData
this.form.resetFields()
}
})
}
}
}
</script>
```
当提交时表单中的数据存在重复时,会将重复的数据展示在主表下方,并且标记为红色。可以根据需求定制更复杂的校验逻辑和展示方式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)