当需要再表格中的某个字段是关联另外一张表示，需要将从另外表选择数据，并将数据保存在当前行中
官网：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-modalresizeshow-footershow-confirm-buttonshow-cancel-buttonshow-maximizev-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 = truethis.selectRow = row},showSubEvent () {const $productGrid = this.$refs.productGridRefif ($productGrid) {const row = this.selectRowif (row && row.productId) {const productRow = $productGrid.getRowById(row.productId)$productGrid.setRadioRow(productRow)} else {$productGrid.clearRadioRow()}}},confirmSubEvent () {const $productGrid = this.$refs.productGridRefif ($productGrid) {const row = this.selectRowconst selectProduct = $productGrid.getRadioRecord()if (row && selectProduct) {row.productId = selectProduct.idrow.productName = selectProduct.namerow.productPrice = selectProduct.price}}}}
}
</script>
https://gitee.com/xuliangzhan/vxe-table
