SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {
  data() {
    return {
      validRules: {
        name: [
          { required: true, message: '名称必须填写' },
          { min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
        ],
        role: [
          { required: true, message: '角色必须填写' }
        ]
      },
      tableProxy: {
        // index: true, // 启用动态序号代理
        props: {
          result: 'result', // 设置后台返回数据所对应的字段名
          total: 'page.total'
        },
        ajax: {
          // 任何支持 Promise API 的库都可以对接(fetch、jquery、axios、xe-ajax)
          query: ({ page }) => this.doGet(`/api/user/page/list/${page.pageSize}/${page.currentPage}`),
          delete: ({ body }) => this.doDelete('/api/user/save', body),
          save: ({ body }) => this.doSave('/api/user/save', body)
        }
      },
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'index', title: '序号', width: 180 },
        { field: 'name', title: 'Name', editRender: { name: 'input' },width: 180 },
        { field: 'nickname', title: 'Nickname', editRender: { name: 'input' },width: 180 },
        { field: 'sex', title: 'Sex', editRender: { name: 'select', options: [] },width: 180 },
        {
          field: 'role',
          title: 'Role',
          //remoteSort: true, //是否服务器排序
          filters: [
            { label: '前端', value: '前端' },
            { label: '后端', value: '后端' }
          ],
            width: 180,
          //filterMultiple: false,//是否允许多选
          editRender: { name: 'input' }
        },
        { field: 'address', title: 'Address', fixed:'right', showOverflow: true, editRender: { name: 'input' },minWidth:'120' }
      ]
    }
  },
  methods: {
    roload(){
       var list = []
          for(var index = 0; index < 3; index++){
            list.push({
              id: index + 10000,
              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
            })
          
           
    }
     this.$refs.xGrid.reloadData(list)
    },
    doGet () {
      // 模拟后台接口
      return new Promise(resolve => {
        setTimeout(() => {
          var list = []
          for(var index = 0; index < 100; index++){
            list.push({
              id: index + 10000,
              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 = {
            result: list,
            page: {
              total: 1000
            }
          }
          resolve(rest)
        }, 300)
      })
    },
    doDelete () {
      // 模拟后台接口
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 300)
      })
    },
    doSave () {
      // 模拟后台接口
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 300)
      })
    },
		toolbarButtonClickEvent ({ code }, event) {
      console.log(code,111)
      switch (code) {
        case 'insert':
          this.$XModal.alert(code)
          break
        case 'save':
          this.$XModal.alert(code)
          break
      }
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/xe-utils"></script>
<script src="//unpkg.com/vxe-table"></script>

<div id="app">
  <template>
     <button @click='roload'>重载数据</button>
      <vxe-grid
      border
      resizable
      highlight-hover-row
      ref="xGrid"
      max-height="500"
      :pager-config="{pageSize: 15}"
      :proxy-config="tableProxy"
      :columns="tableColumn"
      :checkbox-config="{reserve: true}"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
    </vxe-grid>
  </template>
</div>
@import url("//unpkg.com/vxe-table/lib/index.css");