SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
    data() {
        return {
            tableData: []
        }
    },
    created() {
        var list = []
        for (var index = 0; index < 20; index++) {
            var item = {
                id: index + 10000,
                checked: false,
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            }
            list.push(item)
        }
        this.tableData = list
    },
    methods: {
        editRowEvent(row) {
            this.$refs.xTable.setActiveRow(row)
        },
        saveRowEvent(row, field) {
            let xTable = this.$refs.xTable
            if (xTable.isUpdateByRow(row)) {
                row.loading = true
                this.submitSave(row).then(data => {
                    // 局部保存,并更新本地数据
                    xTable.reloadRow(row, data, field)
                    this.$XModal.message({ message: '保存成功!', status: 'success' })
                    row.loading = false
                })
            } else {
                this.$XModal.message({ message: '数据未改动!', status: 'info' })
            }
        },
        cancelRowEvent(row) {
            let xTable = this.$refs.xTable
            xTable.clearActived().then(() => {
                xTable.revertData(row)
            })
        }
    }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

<div id="app">
  <template>
    <div>
      <vxe-table
          border
          row-id="id"
          :expand-config="{expandRowKeys: ['1']}"
          :data="tableData">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column type="expand" width="60">
            <template v-slot:content="{ row, rowIndex }">
                <vxe-table
                  border
                  ref="xTable"
                  :edit-config="{trigger: 'manual', mode: 'row', autoClear: false}"
                  :data="tableData">
                  <vxe-table-column
                    field="role" title="Role"
                    :edit-render="{name: 'input', attrs: {type: 'text'}}">
                  </vxe-table-column>
                  <vxe-table-column
                    field="age" title="Age"
                    :edit-render="{name: 'input', attrs: {type: 'text'}}">
                  </vxe-table-column>
                  <vxe-table-column title="Action">
                    <template v-slot="{ row }">
                      <template v-if="$refs.xTable.isActiveByRow(row)">
                        <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                        <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
                      </template>
                      <template v-else>
                        <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
                      </template>
                    </template>
                  </vxe-table-column>
                </vxe-table>
              </template>
          </vxe-table-column>
          <vxe-table-column field="name" title="Name"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex"></vxe-table-column>
          <vxe-table-column field="age" title="Age"></vxe-table-column>
        </vxe-table>
    </div>
  </template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css");