史莱姆制作蛋糕手机版
207.03MB · 2025-11-29
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>
内置按钮的样式和位置都可以随意更换
