antd vue 中 table列表中实现点击预览xlsx文件

在Antd Vue中，你可以使用Table组件来展示数据列表，并且通过设置Slot自定义列的内容，实现点击预览xlsx文件的功能。以下是一个示例代码：

<template>
  <div>
    <a-table :columns="columns" :dataSource="data">
      <template slot="file">
        <a :href="previewUrl" target="_blank">预览</a>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          name: '文件1',
          fileUrl: 'http://example.com/file1.xlsx'
        },
        {
          id: 2,
          name: '文件2',
          fileUrl: 'http://example.com/file2.xlsx'
        }
      ],
      previewUrl: ''
    };
  },
  methods: {
    handlePreview(fileUrl) {
      this.previewUrl = fileUrl;
    }
  },
  computed: {
    columns() {
      return [
        {
          title: '文件名',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '操作',
          key: 'file',
          scopedSlots: {
            customRender: 'file'
          },
          onCell: record => ({
            onClick: () => {
              this.handlePreview(record.fileUrl);
            }
          })
        }
      ];
    }
  }
};
</script>

在这个示例代码中，我们首先定义了一个数据列表data，其中包含了每个文件的id、name和fileUrl属性。然后在Table组件中，我们通过设置Slot自定义了“操作”列的内容，并且在onCell事件中实现了点击预览文件的逻辑。点击“预览”链接时，会调用handlePreview方法，将当前文件的fileUrl赋值给previewUrl属性。最后，在“操作”列中，我们通过设置scopedSlots.customRender来指定使用自定义的Slot，然后在Slot中展示了“预览”链接，链接的href属性绑定到了previewUrl。当previewUrl改变时，页面会自动刷新，展示新的预览文件。