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