element-ui—— el-upload 自定义上传文件显示列表及固定标签的添加

最新推荐文章于 2024-10-09 18:31:58 发布

dbt@L

最新推荐文章于 2024-10-09 18:31:58 发布

阅读量5.3k

点赞数

分类专栏： Element UI

本文链接：https://blog.csdn.net/qq_43201350/article/details/116566235

版权

本文介绍了如何在Element UI的el-upload组件中自定义上传文件的显示列表，并详细讲解了如何添加固定的标签，以增强文件上传功能的用户体验和交互性。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-upload class="avatar-uploader" ref="upload" :limit="10" multiple :on-exceed="handleExceed"
      :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handlePreview"
      :file-list="fileList" :on-remove="handlePreview" :auto-upload="false">
      <i class="el-icon-upload" slot="trigger"></i>
    </el-upload>
    <div v-if="fileList.length != 0" class="label_remarks">
      <div style="font-size: 12px;color:#bbb;">标签可用空格分隔, 批量添加, 每个图片/视频最多不超过4个标签</div>
      <!-- 固定标签 -->
      <div>
        <span v-for="(item, index) in fixedLabelOptions" :key="index" @click="selectFixedLabel(item.labelName)"><a
            href="#" class="hoverClass">+{
  {item.labelName}}&nbsp;&nbsp;</a></span>
      </div>
    </div>
    <!--  自定义已上传文件列表 -->
    <div class="label_tags">
      <ul class="el-upload-list el-upload-list--text">
        <li tabindex="0" class="el-upload-list__item is-ready&