el-table点击下载对应行所有信息

在Element UI库中的`el-table`组件中，如果你想要实现点击某一行下载该行的所有信息，通常会配合`el-button`和`@click`事件处理。你可以设置一个按钮列，当用户点击这个按钮时，触发一个函数去获取这一行的数据，并将其导出为CSV或其他适合的文件格式。

这里是一个简单的示例：

<template>
  <el-table :data="tableData">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列... -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="downloadRowData(scope.$index, scope.row)">下载</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 表格数据...
      ],
      fileName: 'data.csv', // 文件名
    };
  },
  methods: {
    downloadRowData(index, row) {
      const rowData = Object.values(row); // 获取当前行数据
      this.downloadFile(rowData, `(${this.fileName})_${index}.csv`);
    },
    downloadFile(data, filename) {
      // 使用fetch、axios 或者 window.URL.createObjectURL 等方法将数据转换成Blob对象
      // 然后创建a标签模拟点击，触发浏览器下载
      // 这里只是一个简化版的示例，实际操作需要处理兼容性和错误
      let blob = new Blob([JSON.stringify(data)], { type: "text/csv;charset=utf-8" });
      let url = window.URL.createObjectURL(blob);
      let aLink = document.createElement("a");
      aLink.href = url;
      aLink.download = filename;
      aLink.click();
      window.URL.revokeObjectURL(url); // 及时释放资源
    },
  },
};
</script>

当你点击“下载”按钮时，`downloadRowData`方法会被调用，它会获取当前行的数据并使用自定义的`downloadFile`方法将其导出。