效果图:

实现功能:

• 【代码】下拉选择后，带出【代码】，【名称】，【规格】，并跳转到【用法】
• 用法，剂量，天数，可以输出或选择，总量自动计算
• 备注填完回车自动新增下一行数据
• 每次输完内容自动保存，支持回车键自动跳转到下一个可编辑单元格
• 跳转到单元格时，若此单元格有下拉容器，则展开下拉框
• 已保存数据的单元格重新编辑，可以更新原有数据

官方文档:

https://vxetable.cn/v3/#/table/edit/click

关键API

1 cell-selected:只对 mouse-config.selected 配置时有效，单元格被选中时会触发该事件
2 edit-closed 只对 edit-config 配置时有效，单元格编辑状态下被关闭时会触发该事件
3 current-change 只对 row-config.isCurrent 有效，当手动选中行并且值发生改变时触发的事件
4 insertAt 往表格插入临时数据，从指定位置插入一行或多行
5 getRecordset 获取表格数据集
6 this.$nextTick 回调
7 setEditCell 用于 mouse-config.selected，选中指定的单元格
8 focus和getCurrentRecord() 获取焦点和获取选中行的数据

代码片段

<template>
  <div>
    <a-space direction="vertical">
      <vxe-toolbar>
        <template #buttons>
          <vxe-button @click="insertEvent(-1)">新增一项</vxe-button>
        </template>
      </vxe-toolbar>
      <a-space style="margin-top: 8px">
        <vxe-table
          border
          show-overflow
          keep-source
          ref="xTable"
          max-height="400"
          :data="tableData"
          @cell-selected="cellSelectedEvent"
          @edit-closed="editClosedEvent"
          @current-change="currentChangeEvent"
          :edit-rules="validRules"
          :mouse-config="{ selected: true }"
          :row-config="{ isCurrent: !0, isHover: !0 }"
          :keyboard-config="{
            isEnter: true,
            isTab: true,
            isEdit: true,
            editMethod,
            enterToTab: true,
          }"
          :edit-config="{
            trigger: 'click',
            mode: 'cell',
            icon: 'vxe-icon-edit',
            showStatus: true,
            beforeEditMethod: activeCellMethod,
          }"
        >
          <!--- ,beforeEditMethod:'activeCellMethod' -->
          <vxe-column type="checkbox" width="60"></vxe-column>

          <vxe-column
            field="code"
            title="代码"
            :edit-render="{
              autofocus: '.vxe-input--inner',
              autoselect: true,
              placeholder: '请点击输入...',
            }"
            width="100"
          >
            <template #edit="{ row }">
              <vxe-pulldown ref="xDown4" transfer>
                <template #default>
                  <vxe-input
                    ref="input1"
                    v-model="row.code"
                    placeholder="物价字典"
                    @focus="focusEvent4({ row })"
                    @suffix-click="suffixClick4({ row })"
                  ></vxe-input>
                </template>
                <template #dropdown>
                  <div class="my-dropdown4">
                    <vxe-table
                      ref="ChargeItemTable"
                      width="300"
                      border
                      height="300"
                      :row-config="{ isHover: true, isCurrent: true }"
                      :loading="loading4"
                      :pager-config="tablePage4"
                      :data="tableData4"
                      @cell-dblclick="cellClickEvent4"
                      @page-change="pageChangeEvent4"
                      @keydown="ChargeItemTablekeySetEvent($event)"
                      :keyboard-config="{ isArrow: true }"
                    >
                      <vxe-column
                        v-for="config in tableColumn4"
                        :key="config.key"
                        :field="config.field"
                        :title="config.title"
                        min-width="80"
                        :visible="config.visible"
                      >
                      </vxe-column>
                    </vxe-table>
                  </div>
                </template>
              </vxe-pulldown>
            </template>
          </vxe-column>

          <vxe-column field="name" title="名称" :edit-render="{}" width="200">
            <template #default="{ row }">
              <span>{{ row.name }}</span>
            </template>
          </vxe-column>

          <vxe-column field="spec" title="规格" :edit-render="{}" width="200">
            <template #edit="{ row }">
              <vxe-input v-model="row.spec" type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column
            field="usageName"
            title="用法"
            :edit-render="{ autofocus: '.vxe-input--inner', autoselect: true }"
            width="100"
          >
            <template #edit="{ row }">
              <vxe-pulldown ref="xDown2" transfer>
                <template #default>
                  <vxe-input
                    ref="input2"
                    v-model="row.usageName"
                    @focus="focusEvent2({ row })"
                    @suffix-click="suffixClick2({ row })"
                  ></vxe-input>
                </template>
                <template #dropdown>
                  <div class="my-dropdown4">
                    <vxe-grid
                      ref="usageNameDictTable"
                      width="300"
                      border
                      auto-resize
                      height="300"
                      :row-config="{ isHover: true, isCurrent: true }"
                      :keyboard-config="{ isArrow: true }"
                      :pager-config="tablePage4"
                      :data="usageNameList"
                      :columns="usageNameColumnList"
                      @cell-dblclick="cellClickEvent2"
                      @page-change="pageChangeEvent2"
                      @keydown="usageNameDictTablekeySetEvent($event)"
                    >
                    </vxe-grid>
                  </div>
                </template>
              </vxe-pulldown>
            </template>
          </vxe-column>
          <!--   -->

          <vxe-column
            field="dose"
            title="每次剂量"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
            width="100"
          >
            <template #edit="{ row }">
              <vxe-input v-model="row.dose" type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column
            field="fre"
            title="次/天"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
            width="80"
          >
            <template #edit="{ row }">
              <vxe-input v-model="row.fre" type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column
            field="num"
            title="天数"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
            width="80"
          >
            <template #edit="{ row }">
              <vxe-input
                v-model="row.num"
                type="number"
                placeholder="请输入数值"
              ></vxe-input>
            </template>
          </vxe-column>

          <vxe-column
            field="qty"
            title="总量"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
            width="80"
          >
            <template #edit="{ row }">
              <vxe-input
                v-model="row.qty"
                type="number"
                placeholder="请输入数值"
              ></vxe-input>
            </template>
          </vxe-column>

          <vxe-column
            field="remark"
            title="备注"
            :edit-render="{ autofocus: '.vxe-input--inner' }"
            width="80"
          >
            <template #edit="{ row }">
              <vxe-input
                v-model="row.remark"
                type="text"
                transfer
                @keydown="remarkkeySetEvent($event)"
              ></vxe-input>
            </template>
          </vxe-column>

          <vxe-column title="操作" width="80">
            <template #default="{ row }">
              <vxe-button @click="removeEvent({ row })">删除</vxe-button>
            </template>
          </vxe-column>
        </vxe-table>
      </a-space>
    </a-space>
  </div>
</template>

点赞过100放出JS代码 ，后面的函数可以自行参考文档写辣