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文档
相关推荐
灵感__idea13 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8504 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的6 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀6 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce7 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript
JSON_L8 小时前
Vue 电影导航组件
前端·javascript·vue.js
xptwop9 小时前
05-ES6
前端·javascript·es6
Heo9 小时前
调用通义千问大模型实现流式对话
前端·javascript·后端