antdesignvue 父控件操作子控件表格选中第一行

在 Ant Design Vue 的 Table 组件中，可以通过在父组件中使用 ref 获取到子组件 Table 的实例，然后调用其 setSelectedRowKeys 方法来选中第一行。

以下是一个示例代码：

<template>
  <div>
    <a-button type="primary" @click="handleSelectFirstRow">选中第一行</a-button>
    <a-table ref="table" :columns="columns" :dataSource="dataSource" rowKey="id" :rowSelection="rowSelection"></a-table>
  </div>
</template>

<script>
import { Table, Button } from 'ant-design-vue';

export default {
  components: { 'a-table': Table, 'a-button': Button },
  data() {
    return {
      columns: [
        { title: 'ID', dataIndex: 'id' },
        { title: 'Name', dataIndex: 'name' },
        { title: 'Age', dataIndex: 'age' },
      ],
      dataSource: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Bob', age: 30 },
        { id: 3, name: 'Alice', age: 25 },
      ],
      rowSelection: {
        type: 'checkbox',
        selectedRowKeys: [],
        onChange: (selectedRowKeys) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys;
        },
      },
    };
  },
  methods: {
    handleSelectFirstRow() {
      const table = this.$refs.table;
      if (table) {
        const firstRowKey = this.dataSource[0].id;
        table.setSelectedRowKeys([firstRowKey]);
      }
    },
  },
};
</script>

在这个示例代码中，我们定义了一个 Table 组件，并且使用了 rowSelection 属性来设置选中行时的行为。在父组件中，我们使用 ref 获取 Table 组件的实例，并且在 handleSelectFirstRow 方法中调用 setSelectedRowKeys 方法来选中第一行。注意，我们需要先判断 table 是否存在，否则会出现 undefined 错误。