index頁面有一個表格，有一個新增按鈕，點選新增按鈕或表格編輯彈出表單模組，如果是編輯，會回顯對應的表格中的資料

//index頁面
import React from 'react'
import { Table,Button,message,Input,Select,Modal,} from 'antd';
const Option = Select.Option;
import AddOrEdit from './AddOrEdit '
class List extends React.Component {
 constructor(props) {
 super(props);
 }
 state = {
 id: "",selectOpt: {
  getPopupContainer: () => {
  return this.refs.myForm
  }
 },tableOption: {
  //表頭
  columns: [
  { title: '員工姓名',key: 'workerName',dataIndex: 'workerName' },{ title: '員工工號',key: 'workNumber',dataIndex: 'workNumber' },{
   title: "操作",key: 'action',className: 'columnsCenter',render: (text,record) => {
   return (
    <a title="編輯" type="edit" onClick={this.addOrEditClick.bind(this,record)}>編輯</a>
   )
   }
  }
  ],dataSource: [],//表格總資料
  loading: false,scroll: { x: 1600 },//分頁初始資料
  pagination: {
  current: 1,pageSize: 10,total: 0,showTotal: total => `共 ${total} 條`
  }
 },//編輯表單詳細資訊
 dataForm: {
  data: [],model: {
  id: { value: undefined },workerName: { value: undefined },//員工姓名
  workNumber: { value: undefined }//員工工號
  },param: {}
 },//form表單模組
 modalOption: {
  title: "新增/修改",visible: false,footer: null,destroyOnClose: true,width: 900
 },}
 //編輯資料回顯
 addOrEditClick(record) {
 const self = this;
 let { modalOption,dataForm } = this.state;
 dataForm.param = JSON.parse(JSON.stringify(dataForm.model));
 //如果是編輯彈出表單並且資料回顯，否則就是新增
 if (record.id) {
  api.get(APIS.yluAssessTarget + record.id).then(function (response) {
  const data = response.data.data;
  dataForm.param.id.value = data.id;
  //給
  dataForm.param.workerName.value = data.workerName;
  dataForm.param.workNumber.value = data.workNumber;
  modalOption.visible = true;
  self.setState({ modalOption,dataForm });
  });
 } else {
  modalOption.visible = true;
  self.setState({ modalOption });
 }
 }
 //分頁
 onTableChange(pagination,filters,sorte) {
 if (pagination.current) {
  let { tableOption,searchObj } = this.state;
  tableOption.pagination.current = pagination.current;
  tableOption.pagination.pageSize = pagination.pageSize;
  this.setState({ tableOption });
 }
 this.loadTable();
 };
 /**
 * 初始化列表
 */
 loadTable() {
 let self = this,{ tableOption } = this.state;
 tableOption.loading = true;
 self.setState({ tableOption });
 api.post(APIS.yluAssessTargetSearch + '?current=' + tableOption.pagination.current + '&pageSize=' + tableOption.pagination.pageSize,{
  data: {
  companyName: "查詢引數"//分公司名
  }
 }).then(function (response) {
  tableOption.dataSource = response.data.data.
  tableOption.pagination.total = response.data.data.total;
 }).finally(() => {
  tableOption.loading = false;
  self.setState({ tableOption,notDataLevelGroup,searchObj });
 });
 }
 render() {
 const self = this;
 let { tableOption,modalOption,dataForm } = this.state;
 return (
  <div>
  <Button size="small" type="primary" onClick={this.addOrEditClick.bind(this,0)} >新增</Button>
  <Table {...tableOption} bordered onChange={this.onTableChange.bind(this)} />
  <Modal {...modalOption} >
   {modalOption.visible ? <AddOrEdit {...dataForm} /> : null}
  </Modal>
  </div>

 )
 }
 componentDidMount() {
 this.loadTable();
 }
}

//form表單頁,點選編輯或新增的時候會彈出，並且編輯的時候下拉框value值就為表格當前的這一條資料對應的值
//對select裡面的value值用getFieldDecorator進行繫結
import React from 'react'
import { Table,Form,Row,Col,} from 'antd';
const Option = Select.Option;
class AddOrEdit extends React.Component {
 //提交儲存
 handleSubmit(e) {
 e.preventDefault();
 const self = this;
 this.props.form.validateFieldsAndScroll((err,values) => {
  if (!err) {
  //提交儲存
  api.post(APIS.yluAssessTarget,{
   data: {
   ...values,}
  }).then(res => {
   message.success(res.data.message)
  }).finally(() => {
   self.setState({ addOrEditFooterLoading: false })
  })
  }
 });
 }
 render() {
 const { workerNameList,workNumberList} = this.state;
 const { getFieldDecorator } = this.props.form;
 const reqMeg = '不能為空';
 const renderOption = (arr,code,name) => arr ? arr.map((item,index) => {
  return (<Option key={index + item[code]} value={typeof (item[code]) === 'number' ? item[code].toString() : item[code]}>{item[name]}</Option>)
 }) : null

 return (
  <Form styleName="form_box" onSubmit={this.handleSubmit.bind(this)} >
  <Col {...span24}>
   <FormItem label="員工姓名" {...formItemLayout} hasFeedback>
   {getFieldDecorator('workerName',{
    rules: [{ required: true,message: reqMeg }]
   })(<Select
    placeholder="請選擇"
   >
    {renderOption(workerNameList,'workCode','name')}
   </Select>)}
   </FormItem>
  </Col>
  <Col {...span24}>
   <FormItem label="員工工號" {...formItemLayout} hasFeedback>
   {getFieldDecorator('workNumber',message: reqMeg }]
   })(<Select
    placeholder="請選擇"
   >
    {renderOption(workNumberList,'workNumber','name')}
   </Select>)}
   </FormItem>
  </Col>
  </Form>
 )
 }
}
export default AddOrEdit;

補充知識：Ant Design Vue 中a-upload元件通過axios實現檔案列表上傳與更新回顯的前後端處理方案

前言

在企業應用的快速開發中，我們需要儘快的完成一些功能。如果您使用了Ant Design Vue，在進行表單的檔案上傳相關功能開發的時候，您肯定迫不及待地需要找到一篇包治百病的文章，正是如此，才有了該文的誕生，願以此文解君憂。

方案設計

前端方案設計

重寫a-upload的檔案上傳方式，使用axios來進行上傳

選擇一個檔案後立即進行上傳，前端記錄上傳成功後的name和uid，並構建一個File例項，用於a-upload元件的已上傳檔案列表的回顯

提交前讓檔案列表轉化為要後端要處理的uid列表

後端方案設計

提供一個統一上傳單個檔案的介面，每個檔案選擇後自動上傳都將上傳到該介面，並寫入到資料庫的file資料表中

對錶單資料新建完成後，對上傳的檔案列表進行當前實體記錄的繫結

對錶單資料更新完成後，檢測該實體記錄的所有檔案列表，對沒有在該列表中的uid的檔案列表進行刪除，然後對該列表中所有的uid檔案記錄進行當前實體記錄的繫結

新建與更新的一致性處理方案

因為更新表單在讀取舊資料後，需要與新選擇檔案進行同樣的格式化處理，這裡的處理流程一樣，進行回顯的資料是一樣的，提交表單也都是提交file表中已經存在的uid列表，所以這裡的資料結構是一致的，處理起來將會更加簡潔明瞭。

讓程式碼說話

為了讓各位看官老爺們便於理解，直接上程式碼，希望能將整件事說明白。

構建表單

<a-form :form="form"> 
 <a-form-item label="名稱" style="margin-bottom: 0;"> 
 <a-input v-decorator="['name',{rules: [{required: true,message: '請輸入名稱！'}]}]" /> 
 </a-form-item>
 <a-form-item> 
 <a-upload 
 :multiple="true" 
 :fileList="downloadFiles" 
 :remove="handleDownloadFileRemove" 
 :customRequest="downloadFilesCustomRequest" 
 > 
 <a-button class="upload-btn"> <a-icon type="upload" > 相關下載 </a-button> 
 </a-upload> 
 </a-form-item>
</a-form>

編寫js程式碼

請求後端介面的token、header以及baseUrl等我已預設您已經在axios的統一設定中已經配置好了

為了簡化axios相關操作，我們將axios進行了如下封裝（您也可以按此完全使用axios來直接對資料進行提交等）：

const dibootApi = {
 get (url,params) { 
 return axios.get(url,{ 
 params 
 }) 
 },upload(url,formData) { 
 return service({ 
 url,method: 'POST',data: formData 
 }) 
 }
}
export default dibootApi

我們預設為demo實體中需要上傳一些檔案列表

export default {
 name: 'demoForm',data () {
 title: '新建',// 該表單的功能標題
 form: this.$form.createForm(this),// 表單資料初始化，沒什麼好說的
 model: {},// 如果是更新表單，之前的資料放到這裡，來做資料初始化顯示之用
 downloadFiles: []    // 已經上傳的檔案列表
 },methods: {
 // 初始開啟的表單時的處理（如果是更新表單，這裡首先需要讀取出相關資料）
 async open (id) { 
  if (id === undefined) { 
  // 沒有id資料則認為是新建 
  this.model = {} 
  this.afterOpen() 
  } else { 
  // 否則作為更新處理 
  const res = await dibootApi.get(`/${this.name}/${id}`) 
  if (res.code === 0) { 
  this.model = res.data 
  this.title = '編輯' 
  this.afterOpen(id) 
  } else { 
  this.$notification.error({ 
   message: '獲取資料失敗',description: res.msg 
  }) 
  } 
  } 
 },// 更新表單在讀取資料完成後的操作
 afterOpen (id) { 
  // 獲取該記錄資訊後，回顯檔案列表相關操作
  dibootApi.post(`/demo/getFiles/${id}`).then(res => { 
  if (res.code === 0){ 
   if (res.data.downloadFile !== undefined){ 
   res.data.downloadFile.forEach(data => { 
    this.downloadFiles.push(this.fileFormatter(data)) 
   }) 
   }
  } 
  }) 
 },// 重寫a-upload的檔案上傳處理方式
 downloadFilesCustomRequest (data) { 
  this.saveFile(data) 
 },// 上傳並儲存檔案
 saveFile (data){ 
  const formData = new FormData() 
  formData.append('file',data.file) 
  dibootApi.upload('/demo/upload',formData).then((res) => { 
  if (res.code === 0){ 
   let file = this.fileFormatter(res.data) 
   // 上傳單個檔案後，將該檔案會先到a-upload元件的已上傳檔案列表中的操作
   this.downloadFiles.push(file) 
  } else { 
   this.$message.error(res.msg) 
  } 
  }) 
 },// 對上傳成功返回的資料進行格式化處理，格式化a-upload能顯示在已上傳列表中的格式（這個格式官方文件有給出的）
 fileFormatter(data) { 
  let file = { 
  uid: data.uuid,// 檔案唯一標識，建議設定為負數，防止和內部產生的 id 衝突 
  name: data.name,// 檔名 
  status: 'done',// 狀態有：uploading done error removed 
  response: '{"status": "success"}',// 服務端響應內容 
  } 
  return file 
 },// 沒錯，刪除某個已上傳的檔案的時候，就是呼叫的這裡
 handleDownloadFileRemove (file) { 
  const index = this.downloadFiles.indexOf(file) 
  const newFileList = this.downloadFiles.slice() 
  newFileList.splice(index,1) 
  this.downloadFiles = newFileList 
 },// 表單校驗就靠他了，不過這裡面還是可以對需要提交的一些資料做些手腳的
 validate () { 
  return new Promise((resolve,reject) => { 
  this.form.validateFields((err,fieldsValue) => { 
   if (!err) { 
   // 設定上傳檔案列表 
   const downloadFiles = this.downloadFiles.map(o => { 
    return o.uid 
   }) 
   const values = { 
    ...fieldsValue,'downloadFiles': downloadFiles
   } 
   resolve(values) 
   } else { 
   reject(err) 
   }
  }) 
  }) 
 },// 表單提交的相關操作
 async onSubmit () { 
  const values = await this.validate() 
  try { 
  let result = {} 
  if (this.model.id === undefined) { 
   // 新增該記錄 
   result = await this.add(values) 
  } else { 
   // 更新該記錄 
   values['id'] = this.model.id 
   result = await this.update(values) 
  } 

  // 執行提交成功的一系列後續操作 
  this.submitSuccess(result) 
  } catch (e) { 
  // 執行提交失敗的一系列後續操作 
  this.submitFailed(e) 
  } 
 },// 新增資料的操作
 async add (values) {
  ....
 },// 更新資料的操作
 async update (values) {
  ...
 }
 }
}

編寫SpringBoot相關的介面程式碼

DemoController

/*** 
 * 獲取檔案資訊列表 
 * @param id 
 * @return 
 * @throws Exception 
 */
@PostMapping("/getFiles/{id}") 
public JsonResult getFilesMap(@PathVariable("id") Serializable id) throws Exception{ 
 List<File> files = fileService.getEntityList( 
  Wrappers.<File>lambdaQuery() 
   .eq(File::getRelObjType,Demo.class.getSimpleName()) 
   .eq(File::getRelObjId,id) 
 ); 
 return new JsonResult(Status.OK,files); 
}

/*** 
 * 上傳檔案 
 * @param file 
 * @param request 
 * @return 
 * @throws Exception 
 */
@PostMapping("/upload") 
public JsonResult upload(@RequestParam("file") MultipartFile file) throws Exception { 
 File fileEntity = demoService.uploadFile(file); 
 return new JsonResult(Status.OK,fileEntity,"上傳檔案成功"); 
}

/***
* 建立成功後的相關處理
* @param entity
* @return
*/
@Override
protected String afterCreated(BaseEntity entity) throws Exception {
 DemoDTO demoDTO = (DemoDTO) entity;
 // 更新檔案關聯資訊
 demoService.updateFiles(new ArrayList<String>(){{
 addAll(demoDTO.getDownloadFiles());
 }},demoDTO.getId(),true);
 return null;
}

/***
* 更新成功後的相關處理
* @param entity
* @return
*/
@Override
protected String afterUpdated(BaseEntity entity) throws Exception {
 DemoDTO demoDTO = (DemoDTO) entity;
 // 更新檔案關聯資訊
 demoService.updateFiles(new ArrayList<String>(){{
 addAll(demoDTO.getDownloadFiles());
 }},false);
 return null;
}

DemoService

@Override 
public File uploadFile(MultipartFile file) { 
 if(V.isEmpty(file)){ 
 throw new BusinessException(Status.FAIL_OPERATION,"請上傳圖片"); 
 } 
 String fileName = file.getOriginalFilename(); 
 String ext = fileName.substring(fileName.lastIndexOf(".")+1); 
 String newFileName = S.newUuid() + "." + ext; 
 //TODO: 需要對合法的檔案型別進行驗證 
 if(FileHelper.isImage(ext)){ 
 throw new BusinessException(Status.FAIL_OPERATION,"請上傳合法的檔案型別"); 
 }; 
 
 // 說明：此處為我們的處理流程，看官們需要根據自己的需求來對檔案進行儲存及處理（之後我們的File元件開源之後也可以按照此處的處理）
 String filePath = FileHelper.saveFile(file,newFileName); 
 if(V.isEmpty(filePath)){ 
 throw new BusinessException(Status.FAIL_OPERATION,"圖片上傳失敗"); 
 } 
 
 File fileEntity = new File(); 
 fileEntity.setRelObjType(Demo.class.getSimpleName()); 
 fileEntity.setFileType(ext); 
 fileEntity.setName(fileName); 
 fileEntity.setPath(filePath); 
 String link = "/file/download/" + D.getYearMonth() + "_" + newFileName; 
 fileEntity.setLink(link); 
 
 boolean success = fileService.createEntity(fileEntity); 
 if (!success){ 
 throw new BusinessException(Status.FAIL_OPERATION,"上傳檔案失敗"); 
 } 
 return fileEntity; 
} 
 
@Override 
public void updateFiles(List<String> uuids,Long currentId,boolean isCreate) { 
 // 如果不是建立，需要刪除不在列表中的file記錄 
 if (!isCreate){ 
 fileService.deleteEntities(Wrappers.<File>lambdaQuery().notIn(File::getUuid,uuids)); 
 } 
 // 進行相關更新 
 boolean success = fileService.updateEntity( 
  Wrappers.<File>lambdaUpdate() 
   .in(File::getUuid,uuids) 
   .set(File::getRelObjType,Demo.class.getSimpleName()) 
   .set(File::getRelObjId,currentId)); 
 if (!success){ 
 throw new BusinessException(Status.FAIL_OPERATION,"更新檔案資訊失敗"); 
 } 
}

提示

該文章所有程式碼皆為方案示例，其中有些許刪減，不確保能直接執行，如果各位有好的想法，歡迎一起探討。

以上這篇antd form表單資料回顯操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。