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

项目场景:

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文档
相关推荐
emma羊羊1 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
Larry_Yanan3 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿4 小时前
vue项目引入字体
前端·javascript·vue.js
GISer_Jing6 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
奶糖 肥晨7 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
个人看法8 小时前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面制作(2)
前端·javascript·学习·微信小程序·小程序·前端框架·notepad++
jason_yang8 小时前
JavaScript 风格指南 精选版
前端·javascript·代码规范
小高0079 小时前
🔍ECMAScript 2025 有哪些新特性?
前端·javascript
正义的大古9 小时前
OpenLayers地图交互 -- 章节十七:键盘缩放交互详解
javascript·vue.js·openlayers