SOURCE

var Main = {
  data() {
    return {
      idIndex: 100,
      validRules: {
        name: [{
          required: true,
          message: '名称必须填写'
        },
        {
          min: 3,
          max: 50,
          message: '名称长度在 3 到 50 个字符'
        }],
        role: [{
          required: true,
          message: '角色必须填写'
        }]
      },
      tablePages: {
        pageSize: 15
      },
      tableProxy: {
        // index: true, // 启用动态序号代理
        props: {
          result: 'results',
          // 设置后台返回数据所对应的字段名
          total: 'pageVO.sumTotal'
        },
        ajax: {
          // 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax）
          query: (params) => this.doGet(params),
          delete: (params) => this.doDelete(params),
          save: (params) => this.doSave(params)
        }
      },
      tableToolbar: {
        buttons: [{
          code: 'reload',
          name: '刷新'
        },
        {
          code: 'insert_actived',
          name: '新增'
        },
        {
          code: 'mark_cancel',
          name: '标记/取消'
        },
        {
          code: 'save',
          name: '保存'
        },
        {
          code: 'getReserveRecord',
          name: '获取选中'
        }],
        refresh: true,
        setting: true
      },
      tableColumn: [{
        type: 'checkbox',
        width: 50
      },
      {
        type: 'seq',
        title: '序号',
        width: 80
      },
      {
        field: 'id',
        title: 'ID',
        width: 80
      },
      {
        field: 'name',
        title: 'Name',
        editRender: {
          name: 'input'
        }
      },
      {
        field: 'nickname',
        title: 'Nickname',
        editRender: {
          name: 'input'
        }
      },
      {
        field: 'sex',
        title: 'Sex',
        editRender: {
          name: 'select',
          options: []
        }
      },
      {
        field: 'role',
        title: 'Role',
        editRender: {
          name: 'input'
        }
      },
      {
        field: 'address',
        title: 'Address',
        showOverflow: true,
        editRender: {
          name: 'input'
        }
      }]
    }
  },
  methods: {
    doGet(params) {
      // 模拟后台接口
      return new Promise(resolve => {
        setTimeout(() => {
          var list = []
          for (var index = 0; index < 15; index++) {
            list.push({
              id: this.idIndex++,
              checked: false,
              name: 'test' + index,
              nickname: '昵称' + index,
              role: index % 2 === 0 ? '后端': '前端',
              sex: 'Man',
              date: '2019-05-01',
              time: 1556677810888 + index * 500,
              region: 'ShenZhen',
              address: 'address abc' + index
            })
          }
          var rest = {
            results: list,
            pageVO: {
              sumTotal: 1000
            }
          }
          resolve(rest)
        },
        300)
      })
    },
    doDelete(params) {
      // 模拟后台接口
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        },
        300)
      })
    },
    doSave(params) {
      // 模拟后台接口
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        },
        300)
      })
    },
    handleButtonClick({
      code
    }) {
      switch(code) {
        case 'getReserveRecord': {
          console.log('选中记录(翻页保留状态)',this.$refs.xGrid.getCheckboxReserveRecords())
          console.log('选中记录',this.$refs.xGrid.getCheckboxRecords())
          console.log('所有选中记录',[...this.$refs.xGrid.getCheckboxReserveRecords(),...this.$refs.xGrid.getCheckboxRecords()])
          break
        }
      }
    }
  }
};
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>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->

<div id="app">
  <template>
      <vxe-grid
      border
      resizable
      highlight-hover-row
      ref="xGrid"
      height="500"
      :pager-config="tablePages"
      :toolbar="tableToolbar"
      :proxy-config="tableProxy"
      :columns="tableColumn"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      :row-id="'id'"
      :checkbox-config="{checkRowKeys:[101,102,103,113,117,120], reserve:true }"
      @toolbar-button-click="handleButtonClick"
    >
    </vxe-grid>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/index.css");