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

查看官网:
gitbub:
gitee:

默认的效果是

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

代码

<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>

自定义位置后的效果

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

本站提供的所有下载资源均来自互联网,仅提供学习交流使用,版权归原作者所有。如需商业使用,请联系原作者获得授权。 如您发现有涉嫌侵权的内容,请联系我们 邮箱:[email protected]