vxe-table 工具栏的内置功能按钮怎么修改顺序以及自定义样式

vxe-table 工具栏的内置功能按钮怎么修改顺序以及自定义样式
在开启导入、导出、打印、刷新、全屏、自定义等功能后，那几个按钮是固定在右上角的

查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table

默认的效果是

那么如何修改位置以及对应的样式呢，方法很简单

代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions">
      <template #name_edit="{ row }">
        <vxe-input v-model="row.name"></vxe-input>
      </template>
      <template #nickname_edit="{ row }">
        <vxe-input v-model="row.nickname"></vxe-input>
      </template>
      <template #role_edit="{ row }">
        <vxe-input v-model="row.role"></vxe-input>
      </template>
      <template #address_edit="{ row }">
        <vxe-input v-model="row.address"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  keepSource: true,
  height: 500,
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  columnConfig: {
    resizable: true
  },
  pagerConfig: {
    enabled: true,
    pageSize: 15
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  toolbarConfig: {
    buttons: [
      { name: '新增', code: 'myAdd', status: 'primary' },
      { name: '删除', code: 'myDel', status: 'error' },
      { name: '保存', code: 'mySave', status: 'success' }
    ],
    tools: [
      { code: 'zoom', icon: 'vxe-icon-fullscreen', circle: true },
      { code: 'custom', icon: 'vxe-icon-custom-column', circle: true },
      { code: 'open_import', icon: 'vxe-icon-upload', circle: true },
      { code: 'open_export', icon: 'vxe-icon-download', circle: true },
      { code: 'open_print', icon: 'vxe-icon-print', circle: true },
      { code: 'refresh', icon: 'vxe-icon-repeat', circle: true }
    ]
  },
  columns: [
    { type: 'checkbox', width: 50 },
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', editRender: { autofocus: '.vxe-input--inner' }, slots: { edit: 'name_edit' } },
    { field: 'nickname', title: 'Nickname', editRender: {}, slots: { edit: 'nickname_edit' } },
    { field: 'role', title: 'Role', editRender: {}, slots: { edit: 'role_edit' } },
    { field: 'address', title: 'Address', showOverflow: true, editRender: {}, slots: { edit: 'address_edit' } }
  ]
})
</script>

自定义位置后的效果

内置按钮的样式和位置都可以随意更换

https://gitee.com/x-extends/vxe-table