vxe-grid table 实现表格中弹窗选择数据

当需要再表格中的某个字段是关联另外一张表示，需要将从另外表选择数据，并将数据保存在当前行中

官网：https://vxetable.cn

<template>   <div>     <vxe-grid v-bind="gridOptions">       <template #action="{ row }">         <vxe-button mode="text" status="primary" @click="selectEvent(row)">关联订单</vxe-button>       </template>     </vxe-grid>      <vxe-modal       resize       show-footer       show-confirm-button       show-cancel-button       show-maximize       v-model="showPopup"       title="关联订单"       height="400"       width="800"       @show="showSubEvent"       @confirm="confirmSubEvent">       <vxe-grid ref="productGridRef" v-bind="productGridOptions"></vxe-grid>     </vxe-modal>   </div> </template>  <script> export default {   data () {     const gridOptions = {       border: true,       showOverflow: true,       editConfig: {         trigger: 'click',         mode: 'row'       },       columns: [         { type: 'seq', width: 70 },         { field: 'name', title: '采购人员', minWidth: 200, editRender: { name: 'VxeInput' } },         { field: 'productName', title: '商品名称', minWidth: 200, editRender: { name: 'VxeInput' } },         { field: 'productPrice', title: '商品价格', width: 120, editRender: { name: 'VxeNumberInput' } },         { title: '操作', width: 200, slots: { default: 'action' } }       ],       data: [         { id: 10001, productId: null, name: '张三', productName: '', productPrice: null },         { id: 10002, productId: 1002, name: '李四', productName: 'Vxe 企业版授权', productPrice: 12499 },         { id: 10003, productId: null, name: '王五', productName: '', productPrice: null }       ]     }     const productGridOptions = {       border: true,       height: '100%',       rowConfig: {         keyField: 'id'       },       columns: [         { type: 'radio', width: 60 },         { field: 'name', title: '名称' },         { field: 'price', title: '价格' }       ],       data: [         { id: 1001, name: 'Vxe 企业版授权', price: 12499 },         { id: 1002, name: 'Vxe 高级筛选扩展', price: 1099 },         { id: 1003, name: 'Vxe 零代码平台', price: 16888 }       ]     }     return {       gridOptions,       productGridOptions,       showPopup: false,       selectRow: null     }   },   methods: {     selectEvent (row) {       this.showPopup = true       this.selectRow = row     },     showSubEvent () {       const $productGrid = this.$refs.productGridRef       if ($productGrid) {         const row = this.selectRow         if (row && row.productId) {           const productRow = $productGrid.getRowById(row.productId)           $productGrid.setRadioRow(productRow)         } else {           $productGrid.clearRadioRow()         }       }     },     confirmSubEvent () {       const $productGrid = this.$refs.productGridRef       if ($productGrid) {         const row = this.selectRow         const selectProduct = $productGrid.getRadioRecord()         if (row && selectProduct) {           row.productId = selectProduct.id           row.productName = selectProduct.name           row.productPrice = selectProduct.price         }       }     }   } } </script> 

https://gitee.com/xuliangzhan/vxe-table