页面渲染一个表单

下面是使用vxe-grid生成一个table外观.

<vxe-grid
  ref="grid"
  :columns="tableColumn"
  :export-config="{}"
  :loading="loading"
  :proxy-config="tableProxy"
></vxe-grid>

这样只是有了一个table,但是没有数据列,所以接下来要配置,table中的每一列数据.

  //数组形式,field 和对象中的属性名对应
 tableColumn: [
    { type: 'checkbox', width: 40 },
    { field: 'number', title: '编号', width: 120 },
    { field: 'name', title: '名称', minWidth: 160, treeNode: true },
    {
      field: 'state',
      title: '状态',
      width: 80,
      slots: { default: 'available_default' }
    },
    { field: 'remark', title: '备注', minWidth: 160 },
    {
      field: 'action',
      title: '操作',
      width: 160,
      slots: { default: 'action_default' },
      fixed: 'right'
    }
  ]

table有了,但是没有数据是没有用的.所以接下来是获取数据.

获取数据

使用vxe-grid来请求后端接口获得数据,配置tableProxy.ajax属性

tableProxy: {
    ajax: {
      query: () =>
        this.$api.query({ pageNum: 1, pageSize: 100 })
          .then((res) => {
            //your code
          })
    }
  },

在这里需要强调一个比较小的点,就是这里的箭头函数默认携带一个return函数,所以如果你在接口请求之前需要做其他业务逻辑的话必须添加上return关键字

tableProxy: {
    ajax: {
      query: () =>{
        //code before query
        //return 关键字必须,否则table中的数据无法渲染出来
        return this.$api.query({ pageNum: 1, pageSize: 100 })
          .then((res) => {
            //your code
          })
        }
    }
  },

vxe-grid请求后端接口,直接显示表格中

页面渲染一个表单

获取数据