arco-design-vue 的table筛选每次选中筛选的内容icon就会变

根据您的描述，我猜测您是指在 arco-design-vue 的 table 组件中，当进行筛选并选中某个筛选条件时，该条件对应的图标会发生变化。如果我的理解是正确的，那么这是 arco-design-vue table 组件的默认行为，旨在提高用户体验。

当您在 arco-design-vue 的 table 组件中进行筛选时，每个筛选条件都会显示一个图标，以帮助用户更好地理解筛选条件的含义。当您选中某个筛选条件时，对应的图标会变为选中状态的图标，以便用户清晰地知道哪些筛选条件当前处于激活状态。

如果您想要自定义这些图标，您可以查看 arco-design-vue table 组件的相关文档，了解如何使用 slot 来自定义筛选条件的图标。

相关问题

\arco-design-vue table每次rowclick,点击某一行的的时候哪一行的颜色变化,默认第一条

在 Arco Design Vue 的 Table 中，点击某一行时，该行的背景颜色会发生变化。要想在 Vue 中使用 Arco Design Vue 的 Table，需要在代码中引入相应的组件和样式，如下所示：

<template>
  <a-table :columns="columns" :data-source="data" :row-key="row => row.id" :row-class-name="getRowClassName" @row-click="handleRowClick"></a-table>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { Table } from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';

export default defineComponent({
  name: 'MyTable',
  components: {
    'a-table': Table,
  },
  setup() {
    const data = ref([
      {
        id: 1,
        name: 'John',
        age: 20,
      },
      {
        id: 2,
        name: 'Mary',
        age: 25,
      },
      {
        id: 3,
        name: 'Peter',
        age: 30,
      },
    ]);

    function handleRowClick(row) {
      selectedRowKeys.value = [row.id];
    }

    const selectedRowKeys = ref([1]);

    function getRowClassName(record, index) {
      if (record.id === selectedRowKeys.value[0]) {
        return 'selected-row';
      }
      return '';
    }

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
      },
      {
        title: 'Name',
        dataIndex: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
    ];

    return {
      data,
      columns,
      handleRowClick,
      getRowClassName,
      selectedRowKeys,
    };
  },
});
</script>

在上述代码中，我们首先引入了 Arco Design Vue 的 Table 组件和样式，然后定义了一个 `MyTable` 组件。在组件中，我们使用 `ref` 来定义了一个 `data` 变量，表示表格中的数据。然后，我们定义了一个 `handleRowClick` 函数，用于处理行的点击事件。每次点击行时，我们都会调用该函数，并将当前行的索引保存到 `selectedRowKeys.value` 中。此外，我们还编写了一个 `getRowClassName` 函数，用于获取每一行的类名。在该函数中，我们根据当前行的索引和选中的行的索引来判断该行是否被选中。如果是，则返回选中状态的类名，否则返回默认的类名。最后，我们将 `getRowClassName` 函数传递给 `row-class-name` 属性，以实现选中行的背景颜色变化。同时，我们使用 `@row-click` 属性来监听行的点击事件，并在事件处理函数中调用 `handleRowClick` 函数。需要注意的是，Arco Design Vue 的 Table 组件要求必须指定 `row-key` 属性，这里我们使用了 `row => row.id` 来指定每一行的唯一标识符。在组件中，我们还定义了 `columns` 变量，表示表格中的列。最后，我们将 `data`、`columns`、`getRowClassName`、`handleRowClick` 四个变量分别绑定到组件的相应属性和事件上。

arco-design-vue

### Arco Design Vue 官方文档及教程

#### 文档概述
Arco Design Vue 是基于 Arco Design 的 Vue.js 3 组件库，提供了丰富的组件和工具来帮助开发者构建现代化的 Web 应用程序[^1]。

#### 获取官方文档
官方文档是学习和使用 Arco Design Vue 的最佳资源。可以通过访问官方网站获取详细的 API 参考、设计指南以及常见问题解答。具体网址如下：

- **官网链接**: [https://arco.design/vue](https://arco.design/vue)

该网站不仅包含了完整的组件列表及其属性说明，还提供了一系列实用的设计模式建议和支持信息。

#### 教程与示例
除了阅读静态文档外，实践操作也是掌握框架的有效途径之一。为此，社区成员编写了一些高质量的教学材料供初学者参考：

- **快速上手指南**：从零开始创建第一个应用实例，了解如何引入并初始化 Arco Design Vue[^2]。

- **高级特性探索**：深入探讨主题定制化、国际化支持等功能模块的应用场景和技术细节。

此外，在 GitHub 上也有许多开源项目可供借鉴，比如 `arco-design-pro-vue` 就是一个面向企业级开发的最佳实践案例集合。

对于那些希望通过实际编码加深理解的学习者来说，这些真实的业务逻辑实现无疑是非常宝贵的参考资料。

// 引入 Arco Design Vue 并注册全局组件
import { createApp } from 'vue';
import App from './App.vue';
import ArcoVue, { ConfigProvider } from '@arco-design/web-vue';

const app = createApp(App);
app.use(ArcoVue);

app.mount('#app');