专利新增页面有专利详情和发明人信息,其中发明人信息是list,发明人信息是单独的vue组件,,后是一个接口,前端怎么实现
时间: 2024-03-05 19:49:01 浏览: 26
对于专利新增页面,您可以将专利详情和发明人信息分别封装成两个Vue组件。发明人信息组件可以使用Vue中的列表渲染功能来展示单个发明人信息,如下所示:
```html
<template>
<div>
<div v-for="(inventor, index) in inventors" :key="index">
<input v-model="inventor.name" type="text" placeholder="发明人姓名">
<input v-model="inventor.phone" type="text" placeholder="发明人电话">
<input v-model="inventor.email" type="text" placeholder="发明人邮箱">
</div>
<button @click="addInventor">添加发明人</button>
</div>
</template>
<script>
export default {
data() {
return {
inventors: [{ name: '', phone: '', email: '' }]
}
},
methods: {
addInventor() {
this.inventors.push({ name: '', phone: '', email: '' })
}
}
}
</script>
```
在专利详情组件中,您可以通过引入上述发明人信息组件来完成对应的渲染,如下所示:
```html
<template>
<div>
<h2>专利详情</h2>
<!-- 其他专利详情的表单项 -->
<inventor-info />
</div>
</template>
<script>
import InventorInfo from './InventorInfo.vue'
export default {
components: {
InventorInfo
}
}
</script>
```
至于接口的实现,您可以使用Vue中的axios库或者fetch API来向后端发送请求,获取发明人信息。对于新增发明人信息的操作,您可以通过调用后端提供的API来实现。