标签: vue

背景

正在做一个考核管理系统，需要用到附件的上传以及回显。项目有 vue 做的 pc 端，以及 uniapp 做的 H5 移动端，做的时候发现二者的回显稍有不同，记录一下。因为附件只牵扯到 pdf 和图片，所以只写了这两种的回显。

1、vue 项目中回显

function reviewFile (file) {
  let fileType = ''
  if (file.fileName.indexOf('.pdf') != -1) {
    fileType = 'application/pdf'
  } else {
    fileType = 'image/png'
  }
  axios({
    url: process.env.VUE_APP_BASE_URL + '/file/download/' + file.file,
    method: 'get',
    responseType: 'blob', // 一定要设置响应类型为 blob
    headers: { token: token } // 对于有鉴权的接口，需要添加token
  }).then(res => {
    // 创建用于作为附件预览源的Blob
    const blob = new Blob([res.data], { type: fileType });
    // 创建用于作为PDF预览源的Blob的URL
    let url = URL.createObjectURL(blob);
    window.open(url)
  })
},

CodeAsk...大约 1 分钟

vue3 + elementPlus el-table 树形数据懒加载，子节点删除或者修改，表格不更新的问题

背景

使用 vue3 + elementPlus 做了一个树形表格，数据是懒加载的，发现删除子节点，页面不刷新。即使重新获取表格数据，一层一层展开，子节点还是存在，怀疑是缓存的问题。

网上查询后，发现有一个属性，可以获取树形表格缓存的数据，打印看一下。

CodeAsk...大约 1 分钟

vue 项目中，keep-alive 不生效

背景

给一个旧的后台管理项目，增加一个从详情页返回，不刷新页面的功能。使用 vue 的 keep-alive 组件 include 属性，但是发现不生效，页面刷新了。网上查了下，这个 include，是根据组件的 name 属性来匹配的，需要把组件的 name 属性加上去改成与 include 中的一致。顺便再复习下 keep-alive 的用法。

一、作用

keep-alive 是 Vue 提供的一个内置组件，用于缓存组件的状态，避免组件在切换时重新渲染。它通常用于路由组件的缓存，以提升用户体验。

CodeAsk...大约 2 分钟

el-table 中给表头加上必填星号（红色*）

背景

做后台管理项目的时候，有时候会遇到可编辑表格的需求。还有一种需求，是在可编辑的表格表头上，加上 ElementUI 中表示必填的红色*。

1. 在需要加必填星号的 el-table-column 上添加 render-header 属性。

   <el-table-column
          :render-header="addRedStar"
          prop="supportFund"
          label="经费额（万元）"
          align="center"
          :render-header="addStar"
        >
  </el-table-column>

CodeAsk...小于 1 分钟

ElementUI 中的使用 v-for 循环出的表单，进行表单验证的方法

正常情况下

在 ElementUI 中，表单验证使用 async-validator（异步校验）实现，正常的使用方法如下：

el-form 标记对的 rules 属性在数据区绑定为一个对象型数据。
rules 对象的键名必须与表单元素利用 v-model 绑定的变量名一致。
rules 对象的键名取值为一个数组，数组元素是表单元素的多个验证规则。
也可以直接在 el-form-item 上对表单中的单个元素做验证，多用于动态判断是否给该 item 设置验证条件的情景。
el-form-item 标记对使用 prop 属性来为表单元素设置需要满足的验证规则。

CodeAsk...大约 2 分钟

VUE2 中数组和对象，哪种情况下不是响应式

背景

昨天旁边同事在做一个功能，从接口获取数组数据，前端页面进行遍历展示。默认只展示每条数据上的部分字段，当点击该条数据旁边的展开按钮后，该条数据下边会展开一个面板展示该条数据的完整字段。

我给他出的主意是，在拿到接口数据的时候，可以先遍历一次接口数据，并且给每条数据中增加一个字段，用来控制该条数据是否展开。并且这个动作要在赋值给页面中遍历的那个对象之前完成。因为赋值之后再增加的属性，默认就不是响应式的啦。（PS: 通过官方提供的$set 方法倒是可以）

CodeAsk...大约 2 分钟

安卓手机 H5 预览 PDF 文件，自动直接下载的问题

背景

有一个需求，vue 开发 pc 端，uniapp 写 h5 移动端，两个页面都有个 PDF 预览的功能。之前的做法是直接在新标签打开附件地址，现在浏览器也都支持 PDF 直接打开功能，并且上边一般都会有下载、放大缩小等按钮。

现在要求预览 PDF 的时候，不能有下载按钮。pc 端比较好搞，可以使用 #toolbar=0 来拼接到附件链接尾部，这样浏览器就会隐藏掉顶部的操作按钮。

CodeAsk...大约 2 分钟

elementUi 或 elementPlus 中 el-table 表格动态合并单元格

背景

el-table 中，对于表格单元格的合并，文档中有介绍。原理就是通过设置span-method方法，返回一个二维数组，数组中的每一项表示一行中每个单元格的合并情况。

但是这种方法针对已知表格中的某些单元格需要合并的情况，如果需要合并的单元格位置是动态的，那么这种方法就需要改造下了。

1、合并静态单元格（已知某几行、或某几列需要合并）

<template>
  <div>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" label="Amount 1" />
      <el-table-column prop="amount2" label="Amount 2" />
      <el-table-column prop="amount3" label="Amount 3" />
    </el-table>
  </div>
</template>

<script setup>
//重点就是这个方法，返回一个数组，用来描述每行每个单元格的合并情况
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}

const tableData = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
]
</script>

CodeAsk...大约 3 分钟