常用开发小技巧-CSDN博客

本文链接：https://blog.csdn.net/wdz985721191/article/details/129830445

文章展示了如何在Vue+ElementUI环境中处理视频播放组件，包括播放按钮和弹窗的实现，以及复选框的使用，强调了回显数据类型匹配的重要性。同时，提到了页面跳转传递参数的方法，以及数据导入功能的实现，包括前端文件选择和上传，以及后端Java处理上传的Excel文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE+elementUI 处理视频播放组件

视频播放按钮：
<el-button type="success" plain @click="playVideo(form.video)" ref="btn" size="mini"> 播 放  </el-button>
视频播放弹窗：
<el-dialog title="视频播放" :visible.sync="isPlay" width="30%" @close="closeDialog">
    <video :src="url"  controls autoplay class="video"  width="100%" ></video>
</el-dialog>
事件：
playVideo(url) {
    this.isPlay= true;
    this.videoUrl = url;
},
closeDialog() {
    this.videoUrl = ""; //关闭视频播放
},

VUE+elementUI 复选框点击无效问题

<el-form-item label="会员类型" prop="vipTags">
    <el-checkbox-group v-model="formVipData.vipTags">
        <el-checkbox
              v-for="dict in vips"
              :key="dict.id"
              :label="dict.id">
              {{dict.vipName}}
        </el-checkbox>
    </el-checkbox-group>
</el-form-item>    

#########################
vips 是复选框数组
formVipData.vipTags 是回显数据，回显数据类型(数组中的元素)一定要与key数据类型一致，否则点击无效果

VUE+elementUI页面跳转+参数

主页面:

<router-link :to="{name:'Answer',params:{'id':scope.row.id,'name':scope.row.name}}">
  <el-button size="mini" type="text" icon="el-icon-Link" >
     {{scope.row.questionName}}
  </el-button>
</router-link>

子页面获取数据:

created() {
    this.queryParams.id = this.$route.params.id,
    this.queryParams.name = this.$route.params.name,
    this.getList();
},

VUE+elementUI 数据导入(限于若依框架)

vue:

<el-dialog :title="title" :close-on-click-modal="false" :visible.sync="importOpen" width="700px" append-to-body>
      <el-form ref="importForm"  :model="importForm" :rules="rules" label-width="80px">
        <el-form-item class="col-xs-offset-1" label="选择文件">
          <input type="file"  name="importForm.file" multiple accept="xls,xlsx" @change="importEnv"/>
          <font color="red" class="pull-left mt10">
            提示：仅允许导入“xls”或“xlsx”格式文件！
          </font>
        </el-form-item>
         <el-form-item class="col-xs-offset-1" label="模板">
            <a @click="downloadModel" type="download"  class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 点击下载模板</a>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitImport">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


vue 页面 js:
importEnv(event){
      this.importForm.file = event.target.files[0];
    },
submitImport(){
  this.$refs["importForm"].validate(async (valid) => {
       this.loading = true;
       let formData = new FormData(); // 创建form对象
       formData.append("file", this.importForm.file);
       submitImportFun(formData).then(response=>{
         console.log(response)
       })
  })
}

执行导入:
export function submitImportFun(data) {
  return request({
    url: '/imports',
    method: 'post',
    data:data
  })
}

java 代码:
 @PostMapping("imports")
    public AjaxResult imports(MultipartFile file) {
        System.out.println(file.getOriginalFilename());
        ExcelUtil<Object> info = new ExcelUtil<Object>(Object.class);
        try {
            List<Object> ebikeDeviceInfos = info.importExcel(file.getInputStream());
            ebikeDeviceInfos.forEach(d ->{
                System.out.println(d.toString());
            });
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return success();
    }