vxe-table 工具栏custom

VxeTable 是 Vue 世界里一款功能强大的表格组件，它提供了丰富的定制选项，其中包括工具栏（toolbar）的自定义。在 VxeTable 中，你可以根据需要对工具栏进行个性化配置，例如添加自定义按钮、操作列等。以下是如何定制 VxeTable 的工具栏：

1. **设置全局工具栏**：
在 `vxe-table` 的全局配置中，你可以使用 `toolbar` 属性来配置一个数组，每个元素是一个对象，包含 `label`（显示的文字）、`method`（点击后的处理函数）以及其他的可选属性如 `icon`（图标），`position`（位置，如 'top', 'bottom' 等）。

<template>
  <vxe-table :toolbar="globalToolbar" ...></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      globalToolbar: [
        {
          label: '操作',
          icon: 'el-icon-setting',
          methods: ['action1', 'action2'],
        },
        {
          text: '刷新',
          method: () => this.refreshData(),
        },
      ],
    };
  },
  methods: {
    refreshData() {
      // 你的刷新数据逻辑
    },
    action1() {
      // 你的第一个自定义操作逻辑
    },
    action2() {
      // 你的第二个自定义操作逻辑
    },
  },
};
</script>

2. **局部工具栏**：
如果你想在部分表格内有不同的工具栏配置，可以使用 `toolbar` 或 `row-actions` 选项，它们分别用于行级别的工具栏。

<vxe-table :toolbar="localToolbar" ...>
  <!-- ... -->
</vxe-table>

<template>
  <vxe-table :row-actions="rowActions" ...>
    <!-- ... -->
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      localToolbar: [{ ... }],
      rowActions: [{ ... }],
    };
  },
};
</script>