使用ivew 做一个按钮, 点击这个按钮后查询一张表 在此表中我可以选中一行数据'

你好！以下是使用 iview 做一个按钮，点击后查询一张表，且可以选中一行数据的示例代码。

<template>
  <div>
    <Button @click="handleSearch">查询表格</Button>
    <Table :columns="columns" :data="tableData" @on-row-click="handleSelect"></Table>
  </div>
</template>

<script>
import { Button, Table } from 'iview';

export default {
  data() {
    return {
      columns: [  // 表格列配置
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        },
        {
          title: '性别',
          key: 'gender'
        }
      ],
      tableData: []  // 表格数据
    };
  },
  methods: {
    handleSearch() {  // 查询表格数据
      // 示例数据，实际应该从接口获取
      this.tableData = [
        {
          name: '张三',
          age: 20,
          gender: '男'
        },
        {
          name: '李四',
          age: 25,
          gender: '女'
        },
        {
          name: '王五',
          age: 30,
          gender: '男'
        }
      ];
    },
    handleSelect(row) {  // 选中表格行
      console.log('选中了行：', row);
      // 可以将选中的数据存入 data 中，以便提交到后台等操作
    }
  },
  components: {
    Button,
    Table
  }
};
</script>

在这个示例代码中，我们使用了 iview 的 Button 和 Table 组件。Button 组件用于触发查询操作，Table 组件用于展示表格数据。在点击查询按钮后，我们设置了表格数据，然后在表格中选择了一行数据，通过 @on-row-click 事件回调函数 handleSelect 可以获取到选中的数据行。该示例仅供参考，实际业务中应根据需要进行更改。