vxe-table 行內編輯

<vxe-table

      ref="xTable"

      :edit-rules="validRules"

      keep-source

      height="100%"

      :data="tableData"

      :edit-config="{trigger: 'manual', mode: 'row',autoClear:false}"

    >

      <vxe-table-column field="InspectTypeId" title="檢驗類型" :edit-render="{name: '$select', options: typeDropdown,optionProps: {value: 'Id', label: 'Name'}}" />

      <!-- 測試插入自定義下拉框 -->

      <vxe-table-column field="IpProcessOrGroupId" title="工序" :edit-render="{autofocus: '.custom-input'}">

        <template v-slot:edit="{ row }">

          <el-select

            v-model="row.IpProcessOrGroupId"

            filterable

            clearable

          >

            <el-option v-for="item in processDropdown" :key="item.Id" :value="item.Id" :label="item.Name" />

          </el-select>

        </template>

      </vxe-table-column>

      <vxe-table-column field="PlanCount" title="數量" :edit-render="{name: '$input', props: {type: 'number',min:0}}" />

      <vxe-table-column field="Remark" title="備注" :edit-render="{name: 'input', immediate: true, attrs: {type: 'text'}}" />

      <vxe-table-column title="操作" width="180">

        <template v-slot="{ row }">

          <template v-if="$refs.xTable.isActiveByRow(row)">

            <el-button type="primary" size="mini" plain class="el-icon-check" @click="saveRowEvent(row)">保存</el-button>

            <el-button type="primary" size="mini" plain class="el-icon-close" @click="cancelRowEvent(row)">取消</el-button>

          </template>

          <template v-else>

            <el-button type="primary" size="mini" plain class="el-icon-edit" @click="editRowEvent(row)">編輯</el-button>

          </template>

        </template>

      </vxe-table-column>

    </vxe-table>

    // 插入新空行
    async insertEvent(row) {
      const record = {}
      const { row: newRow } = await this.$refs.xTable.insertAt(record, row)
      await this.$refs.xTable.setActiveRow(newRow)
    },
    // 點擊‘修改’行
    editRowEvent(row) {
          this.$refs.xTable.setActiveRow(row)
    },
    // 點擊行‘取消’
    cancelRowEvent(row) {
      const xTable = this.$refs.xTable
      const insertRecords = xTable.getInsertRecords()
      if (insertRecords.length > 0) {
        xTable.remove(insertRecords)
      }
      xTable.clearActived().then(() => {
        // 還原行數據
        xTable.revertData(row)
      })
    },