vx-table可编辑表格父子组件问题

记录一下前端遇到的问题
1vx-table可编辑表格中的单元格嵌套下拉容器
①实现点击单元格，单元格可编辑，同时弹出下拉框
②实现选中下拉框的数据可以同步更新到表格中
③实现单元格支持搜索可以喝下拉框的数据联动
④实现下拉容器解耦，作为一个子组件嵌套进页面中

链接: vxtable官网

官网前端例子

 <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,
          }"
        >
 <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="xxxxx"
                    @focus="focusEvent4({ row })"
                    @suffix-click="suffixClick4({ row })"
                  ></vxe-input>
                </template>
                <template #dropdown>
                  <div class="my-dropdown2">
                    <div class="my-dropdown2">
                    <vxe-grid
                      ref="ChargeItemTable"
                      width="300"
                      border
                      auto-resize
                      height="300"
                      :row-config="{ isHover: true, isCurrent: true }"
                      :keyboard-config="{ isArrow: true }"
                      :pager-config="tablePage4"
                      :data="chargeItemList"
                      :columns="chargeItemColumnList"
                      @cell-dblclick="cellClickEvent2"
                      @page-change="pageChangeEvent2"
                      @keydown="keySetEvent($event)"
                    >
                    </vxe-grid>
                  </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>

注意点

1 可编辑表格的默认绑定和可编辑的绑定可以同时出现

          <template #default="{ row }">
          </template>
          <template #edit="{ row }">
          </template>

2常用的API

@edit-closed
@current-change
@cell-dblclick
@edit-actived

$table.insertAt()新增临时数据
$table.setEditCell()设置单元格可编辑状态
$table.getRecordset()获取临时新增，修改，删除的数据
$table.getCurrentRecord()获取当前高亮行的Row对象
$table.isUpdateByRow() 判断是否被删除

将官网例子改为 父子组件

import ChargeItemDownTable from './ChargeItemDownTable';
//注册子组件
 components: { ChargeItemDownTable },

//使用
<vxe-column field="itemCode" title="代码" minWidth="67":edit-render="{ autofocus: '.vxe-input--inner' }"  >
              <template #edit="{ row }">
                <ChargeItemDownTable
                  v-model="row.itemCode"
                  placeholder="请选择项目"
                  :bindData="row"
                  :params="{ keywordName: 'name' }"
                  @childFn="selectItem"
                >
                  <vxe-column field="name" title="名称" />
                </ChargeItemDownTable>
              </template>
 </vxe-column>

父向子组件传值

//子组件中的props
 props: {
    params: {
      type: Object,
      default: () => ({})
    },
    //绑定对象用于handleOk原路返回
    bindData: {
      type: Object,
    },
  }

子组件向父组件传值

//子组件发送数据   record 是参数
 this.$emit('childFn', record)
 
 //父组件接受
 selectItem (record) {
  var currentRow = $table.getCurrentRecord()
  currentRow.record=record.code
 }

效果图