vxe-table 工具栏的内置功能按钮怎么修改顺序以及自定义样式
<p>vxe-table 工具栏的内置功能按钮怎么修改顺序以及自定义样式<br>在开启导入、导出、打印、刷新、全屏、自定义等功能后，那几个按钮是固定在右上角的</p>
<p>查看官网：https://vxetable.cn<br>
gitbub：https://github.com/x-extends/vxe-table<br>
gitee：https://gitee.com/x-extends/vxe-table</p>
<h2 id="默认的效果是">默认的效果是</h2>
<p>那么如何修改位置以及对应的样式呢，方法很简单</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250902162240536-448763260.png"></p>
<h2 id="代码">代码</h2>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="自定义位置后的效果">自定义位置后的效果</h2>
<p>内置按钮的样式和位置都可以随意更换</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202509/3563285-20250902162258684-1560577682.png"></p>
<p>https://gitee.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19070225
頁:
[1]