elementUI点击浏览table所选行数据查看文档

Luffe船长2025-06-06 11:51

项目场景：

table按照要求特定的数据变成按钮可以点击

解决方案：

复制代码

<el-table-column
  prop="mlname"
  label="名称"
  align="center"
  width="180">
  <template slot-scope="scope">
    <el-button
      v-if="scope.row.filecode === '1'"
      type="text"
      @click="handleClick(scope.row)">
      {{ scope.row.mlname }}
    </el-button>
    <span v-else>{{ scope.row.mlname }}</span>
  </template>
</el-table-column>

复制代码

.el-button--text {
  color: #409EFF; /* 链接色 */
  padding: 0;
  font-size: inherit;
}
css样式给按钮添加蓝色链接色

使用

复制代码

template标签获取每一行数据将按钮放入标签内通过if判断数据是否变为按钮展示,当满足条件时获取点击行的数据scope.row传到方法中

javascript 复制代码

    async selectFilepatch(id) {
      const fileResponse = await url.getFilePatch(id);
      try {
        // console.log('Selected file ID:', id);
        const { filepath, filename } = fileResponse.data[0];
        let filepathPDF = '';
        let filenamePDF = '';
        if(filename.substr(filename.lastIndexOf('.')+1) == 'pdf' || filename.substr(filename.lastIndexOf('.') + 1) == 'PDF'){
          filepathPDF = filepath.substr(0,filepath.lastIndexOf('.')) + '.pdf';
          filenamePDF = filename.substr(0,filename.lastIndexOf('.')) + '.pdf';
        }else {
          filepathPDF = filepath.substr(0,filepath.lastIndexOf('.')) + '-pdf' + '.pdf';
          filenamePDF = filename.substr(0,filename.lastIndexOf('.')) + '-pdf' + '.pdf';
        }
        let url = null;
        crudScInstitution.downloadAnnex(filepathPDF,filenamePDF).then(res => {
          url = window.URL.createObjectURL(new Blob([res],{type: 'application/pdf'}));
          this.pdfUrl = encodeURI(url)+"#toolbar=0";
          this.urlVisible = true;
        })
      } catch (error) {
        this.$message.error(`文件处理失败: 该路径下未查询到文档!`);
        // 可选：重试逻辑或错误上报
      }
    },

复制代码

将所选行的id传到后端,后端从数据库查询到文档所在路径返回到前端,前端调用这些工具实现查看文档,我这个只支持查看pdf文档