elementUI点击浏览table所选行数据查看文档
项目场景：
table按照要求特定的数据变成按钮可以点击
解决方案：
<el-table-columnprop="mlname"label="名称"align="center"width="180"><template slot-scope="scope"><el-buttonv-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传到方法中
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文档
