element plus： 3 篇

2024年2月

router.go()妙用

1 背景#

最近在做动态路由相关的功能实现，涉及到一些页面跳转的功能，我们都知道返回上一页用的是 router.go(-1)，它的意思就是说返回上一个路由地址。

但是，现在有这么一个场景（技术栈：vue3+"vue-router": "^4.1.6"），比如原来我是在路由地址 A，然后我点击了路由 B，我会在前置路由钩子里面先检测当前访问的路由地址 B，如果 B 没有权限访问那么就会默认跳转地址 C（这个是 404 页面），在地址 C 的 404 页面里面有个返回上一页按钮。

我给返回上一页按钮写的事件如下：

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { House } from '@element-plus/icons-vue'

const router = useRouter()

const goIndex = () => {
  router.go(-1)
}
</script>

<template>
  <div class="container">
    <img src="../assets/picture/common/404.png" alt="" class="img" />
    <div class="text">当前页面不存在</div>
    <el-link type="primary" :icon="House" @click="goIndex">回到上一页</el-link>
  </div>
</template>

可是呀，事实情况总是事与愿违，但我执行router.go(-1) 这句话的时候并不能直接返回我原来的路由地址（A 地址），而是返回了那个没有权限访问的 B 地址（尽管页面没有真正跳转到 B 地址，但是路由地址里面会显示），而且再点击一下才会真正返回到想要的上一页路由地址 A 页面。

显然，这不是我想要的，那咋办呢，请看我下面的实现：

2 突发奇想的实现#

我想既然跳转一次不行，那我跳转 2 次呢，实现如下：

const goIndex = () => {
  router.go(-1)
  router.go(-1)
}

哈哈，我运行了上面这段代码，显然不行，于是乎，我又改成了下面这样，

const goIndex = () => {
  router.go(-2)
}

果然，将-1 改成了-2，就可以直接跳转到前两页的位置，竟然就是这么简单！

3 小结#

果然还是得实践。

2024年1月

vue3+element puls upload组件回显图片base64的实现

前端 javascript vue3 element plus

1 背景#

最近遇到个需求，需要基于 vue3+element plus 的 upload 组件回显图片，通常我们是通过后端直接返回的 url 来回显就行了，而且在 element plus 也给出了示例：

不过，o_O，我们下面将要以 base64 的形式来填充，其实也很简单，自己构造一个这样的对象就行了，url 里面放我们 base64 字符串，然后其他的造成即可，下面请看我的实现样例：

2 实现#

构造一个用 base64 字符串填充的文件列表

let fileList = ref([
  {
    // 这是文件名字
    name: '文件名1',
    // 这里是我自己定义的自定义属性，可有可无
    fileId: '1',
    // 这里是base64字符串，咳咳我们后端返回的格式有点特殊，所以我又给转换了一下，成为真正的base64字符串
    url: 'data:image/png;base64,' + new BaseTool().arrayBufferToBase64(temp?.arrayBuffer)
  }
])

将图片列表渲染到组件里

<el-upload action="#" list-type="picture-card" v-model:file-list="fileList" :auto-upload="false">
                <el-icon><Plus /></el-icon>
                <template #file="{ file }">
                  <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <el-icon><zoom-in /></el-icon>
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file, item.dataValue)"
                      >
                        <el-icon><Delete /></el-icon>
                      </span>
                    </span>
                  </div>
                </template>
              </el-upload>

重点就是替换上面 fileList 就可。

3 小结#

ok 啦。

2023年12月

vue3+element plus实现查询条件展开和收起功能

前端 javascript vue3 element plus

1 需求来源#

如图所示，这样一个查询页面，上面的条件太多，使得下面的列表展示的空间就变得很小了。所以，需要有一个东西控制，当条件太多时，就展示一个展开/收起按钮，可以控制查询条件的展开和收起。

2 实现效果图#

我们先直接来看下最终实现的效果图

screenshots

如果这就是你想要的，可以继续看下面的实现关键代码

3 具体实现关键代码#

<script setup lang="ts">
const conditionFold = ref(true)
const conditionInitShowLength = 6
const areConditionFold = () => {
  conditionFold.value = !conditionFold.value
}
</script>

<template>
<div class="header customDiv">
  <el-form ref="formRef" :inline="true" :model="formDataConfig" class="demo-form-inline">
    <el-row>
      <el-col :span="6">
        <el-form-item label="查询逻辑">
          <el-select v-model="filtersLogic" placeholder="默认同时符合">
            <el-option label="同时符合" :value="0" />
            <el-option label="部分符合" :value="1" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="6"
        v-for="(item, index) in formDataConfig.slice(
          0,
          conditionFold ? conditionInitShowLength : formDataConfig.length
        )"
        :key="item.key"
      >
        <el-form-item :label="item.label" :prop="`[${index}]value`">
          <el-date-picker
            v-if="item.type === 'date'"
            v-model="item.value"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
          <el-input
            v-else-if="item.type === 'input' || !item.type"
            v-model="item.value"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="onSubmit(formRef)">查询</el-button>
          <el-button type="primary" @click="resetForm(formRef)">重置</el-button>
          <el-button
            v-if="formDataConfig.length > conditionInitShowLength"
            type="primary"
            link
            @click="areConditionFold"
          >
            {{ conditionFold ? '展开' : '收起' }}
            <el-icon v-if="conditionFold"><ArrowDown /></el-icon>
            <el-icon v-else><ArrowUp /></el-icon>
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</div>
</template>

ok，代码就是上面的代码，可能少了一些变量，但是思路还是挺清晰的，主要就是通过conditionFold来控制按钮是否展示，conditionInitShowLength来控制收起时显示的默认长度。

4 技术小结#

当我们使用“展开/收起”按钮时，需要搭配row、col，列数需要是固定的，不然我们不知道“展开/收起”按钮展示及切换的时机。