vxe-table中vue-toolbar中如何获取工具栏中勾选的表头列表

在Vue-element-admin (vxe-table) 中，`vue-toolbar` 是一个用于展示表头操作栏的组件，它通常包含列的选择、排序等选项。如果你想获取勾选的表头列表，你需要监听 `selection-change` 事件，这个事件会在用户选择或取消选择表头的时候触发。

首先，在你的 toolbar 组件模板上添加一个 ref 属性，例如：

<template>
  <x-header :columns="columns" ref="toolbarRef">
    <!-- ... -->
  </x-header>
</template>

<script setup>
import { onMounted } from 'vue';
import { useTable } from 'element-ui-vue-x-editable';

const { props } = useTable();
const columns = props.columns; // 获取列数组

onMounted(() => {
  const selectedHeaders = [];
  const toolbarRef = ref(null); // 使用ref来存储toolbar实例

  // 当 selection-change 事件触发时，更新selectedHeaders
  toolbarRef.value.$on('selection-change', (selected) => {
    selectedHeaders.length = 0;
    selected.forEach((header) => {
      if (header.selected) {
        selectedHeaders.push(columns.find(column => column.field === header.column.field));
      }
    });
    // ...你可以在这里处理selectedHeaders数据
  });
});
</script>

在这个例子中，`toolbarRef.value.$on` 注册了一个监听器，每当表头选择状态变化时，会找到并更新 `selectedHeaders` 列表，其中包含所有被选中的表头项。