vxe-table中vxe-grid(高级表格)的使用方法举例

gridOptions: {
    border:true,   //是否带边框
    stripe: true,   //是否带斑马纹
    round: true,   //边框是否圆角
    showHeaderOverflow: true,   //表头内容过长时是否显示省略号
    showOverflow: true,   //所有内容过长时是否显示省略号
    keepSource: true,   //是否保持原始值状态
    id: 'full_edit_1',   //唯一标识，某些功能会用到，我这里没有用到，可以忽略
    rowConfig: {   //行配置信息
      isHover: true
    },
    columnConfig: {   //列配置信息
      resizable: true
    },
    printConfig: {   //打印配置项，具体的看文档吧，很详细了，注意columns里的field要和实际数据的key对应上
      columns: [
        { field: 'name' },
        { field: 'email' },
        { field: 'nickname' },
        { field: 'age' },
        { field: 'amount' }
      ]
    },
    sortConfig: {   //排序配置项
      trigger: 'cell',
      remote: true
    },
    filterConfig: {   //筛选配置项
      remote: true
    },
    pagerConfig: {   //配置分页
      pageSize: 15,
      pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
      layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']
    },
    formConfig: {   //表单配置项：就是查询条件，items中的field一定要和实体类名称对应上，方便管理。这里只放一个input框和下拉框了，其他的自己探索吧，API里都有
      titleWidth: 100,
      titleAlign: 'right',
      items: [
        {
          field: 'topic',
          title: '项目名称',
          span: 4,
          slots: {
            default: 'product_item'   //这里要和上面动态配置的表单项名称对应
          }
        },
        {
          field: 'status',
          title: '状态',
          span: 4,
          folding: false,
          itemRender: {
            name: '$select',
            options: [
              { label: '待处理', value: '待处理' },
              { label: '处理中', value: '处理中' },
              { label: '已计划', value: '已计划' },
              { label: '已完成', value: '已完成' },
              { label: '已关闭', value: '已关闭' }
            ],
            props: { placeholder: '请选择项目状态' }
          }
        },
        { span: 24, align: 'center', slots: { default: 'operate_item' } }   //查询重置按钮
      ]
    },
    toolbarConfig: {   //工具栏配置项
      // 这种写法是官方文档写法，只会执行API中对应的方法，若想自己实现按钮功能需要自定义插槽，如下
      // buttons: [
      //   { code: 'delete', status: 'danger', name: '直接删除', icon: 'vxe-icon-delete' },
      // ],
      // 自定义插槽
      slots: {
        buttons: ({ row }) => {
          return <el-button-group>
                    <el-button icon="el-icon-plus" type="primary" onClick={() => this.showDialog()}>新建工单</el-button>
                    <el-button icon="el-icon-delete" type="danger" onClick={() => this.$refs.xGrid.commitProxy('delete')} style="margin-left: 10px;">直接删除</el-button>
                 </el-button-group>
        }
      },
      refresh: true,
      import: true,
      export: true,
      print: true,
      zoom: true,
      custom: true
    },
    proxyConfig: {   //数据代理配置项
      seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
      sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
      filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
      form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
      // 对应响应结果 { result: [], page: { total: 100 } }
      props: {
        result: 'result', // 配置响应结果列表字段
        total: 'page.total' // 配置响应结果总页数字段
      },
      // 只接收Promise，具体实现自由发挥
      ajax: {
        // 当点击工具栏查询按钮或者手动提交指令 query或reload 时会被触发
        query: ({ page, sorts, filters, form }) => {
          const queryParams = Object.assign({}, form)
          // 处理排序条件
          const firstSort = sorts[0]
          if (firstSort) {
            queryParams.sort = firstSort.property
            queryParams.order = firstSort.order
          }
          // 处理筛选条件
          filters.forEach(({ property, values }) => {
            queryParams[property] = values.join(',')
          })
          queryParams.page = page.currentPage;
          queryParams.pageSize = page.pageSize;
          //自己在data中定义个baseUrl，用来访问后台
          return XEAjax.post(`${this.baseUrl}/queryOrder`, queryParams)
        },
        // 当点击工具栏删除按钮或者手动提交指令 delete 时会被触发
        delete: ({ body }) => {
          return XEAjax.post(`${this.baseUrl}/deleteOrder`, JSON.stringify(body.removeRecords));
        },
        // 当点击工具栏保存按钮或者手动提交指令 save 时会被触发(用自带的添加按钮的话会用到这个保存事件，我这里已经自定义插槽按钮事件了，故将该处注释掉，而且需要实时保存的话也用不上这个按钮)
        // save: ({ body }) => {
        //   return XEAjax.post(`${this.baseUrl}/updateOrder`, JSON.stringify(body.updateRecords)).then(
        //     res => xxx
        //   );
        // }
      }
    },
    columns: [   //列配置：将在这里显示数据，field要和实体类名称对应上
      { type: 'checkbox', field: 'id', title: '工单序号' },   //多选框
      { field: 'title',  title: '标题' },
      {
        field: 'status',
        title: '状态',
        width: 95,
        slots: {   //该处展示自定义插槽，可以将数据封装到想用的组件里，视觉效果更佳
          default: ( {row} ) => {
            if (row.status == '待处理') {
              return <el-tag type="danger">{row.status}</el-tag>;
            }
            if (row.status == '处理中') {
              return <el-tag type="warning">{row.status}</el-tag>;
            }
            if (row.status == '已计划') {
              return <el-tag type="info">{row.status}</el-tag>;
            }
            if (row.status == '已完成') {
              return <el-tag>{row.status}</el-tag>;
            }
            if (row.status == '已关闭') {
              return <el-tag type="success">{row.status}</el-tag>;
            }
          }
        },
        filters: [   //配置筛选条件，配置后表头对应列会有筛选图标，点开即可操作
          { label: '待处理', value: '待处理' },
          { label: '处理中', value: '处理中' },
          { label: '已计划', value: '已计划' },
          { label: '已完成', value: '已完成' },
          { label: '已关闭', value: '已关闭' }
        ],
        filterMultiple: false,   //筛选是否可多选
        editRender: {   //该处是列可编辑状态下的编辑框，这里是一个静态下拉框，下面有一个动态下拉框也是我踩雷的地方
          name: '$select',
          options: [
            { label: '待处理', value: '待处理' },
            { label: '处理中', value: '处理中' },
            { label: '已计划', value: '已计划' },
            { label: '已完成', value: '已完成' },
            { label: '已关闭', value: '已关闭' }
          ],
          props: { placeholder: '请选择工单状态' }
        }
      },
      {   //该列是获取后台数据动态渲染到页面上的地方，踩雷好几天
        field: 'charger',
        title: '负责人',
        editRender: {
          name: '$select',
          props: {
            value: [],
            options: [],   //用来显示下拉框数据的地方
            optionProps: {   //下拉框option的配置，该处要有，否则点开下拉框选值的时候对应label不会高亮
              value: 'value',
              label: 'label'
            },
            multiple: true,   //可多选
            clearable: true,
            placeholder: '请选择负责人',
            optionConfig: {
              useKey: true
            }
          }
        },
        formatter: this.formatCharger
      },
      {   //自定义插槽可以自定义事件
        slots: {
          default: ({ row }) => {
            return <el-button type="text" onClick={() => this.handleCell(row)}>详情</el-button>
          }
        }
      }
    ],
    importConfig: {   //导入配置项，暂时没用到该功能没深入研究，API上都有
      remote: true,
      importMethod: this.importMethod,
      types: ['xlsx'],
      modes: ['insert']
    },
    exportConfig: {   //导出配置项，暂时没用到该功能没深入研究，API上都有
      remote: true,
      exportMethod: this.exportMethod,
      types: ['xlsx'],
      modes: ['current', 'selected', 'all']
    },
    checkboxConfig: {   //复选框配置项
      labelField: 'id',
      reserve: true,
      highlight: true,
      range: true
    },
    editRules: {   //列编辑规则
      charger: [
        { required: true, message: '负责人不能为空' }
      ]
    },
    editConfig: {   //可编辑配置项
      trigger: 'click',
      mode: 'cell',   //cell（单元格编辑模式）,row（行编辑模式）
      showStatus: true
    }
  }