<el-checkbox v-model="checkbox.checkModel" :label="index"
:disabled="checkbox.disabled.indexOf(index) >= 0"
style="padding-left: 10px">
</el-checkbox>
<el-table v-loading="tableQuery.loading" :data="tableData" ref="dataTable" :row-key="(row)=>{ return row.id}" @selection-change="handleSelectionChange">
<el-table-column type="selection" reserve-selection="true" />

<el-table-column label="格式化" :formatter="format" />

<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button icon="el-icon-search" title="查询" size="mini" plain @click="query(scope.row)" />
</template>
</el-table-column>

</el-table>

handleSelectionChange(val) {
this.multipleSelection = val;

}

query(row) {
this.$nextTick(() => {
this.$refs.dataTable.toggleRowSelection(self.tableData[index],true);
});

}

//格式化
format(row) {
let obj = this.arr.find((item) => {
return item.value === row.id;
});
if (typeof obj !== 'undefined'){
return obj.label;
}else {
return row.id;
}
}

mounted() {
window.addEventListener('message', this.handleMessage);
}

handleMessage() {
const data = event.data.data;
if (data.code === "edittable") {
this.parentviewmethods();
}

}

childview(row) {
window.parent.postMessage({
data: {
code: "edittable",
value: row
}
}, '*');
}

//文件上传

<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="上传文件:" prop="file" size = 'small' label-width="80px">
  <el-upload action="#" ref="file" accept="image/*" list-type="picture" :on-change="changFile" :http-request="requestUpload" :file-list="fileList" :auto-upload="false">
    <el-button size="small" type="primary" icon="el-icon-upload">选取文件</el-button>
  </el-upload>
</el-form-item>
</el-form>

// 表单参数
form: {
  file:null
}

//覆盖默认的上传行为
requestUpload() {
},
changFile(file, fileList) {
  this.fileList = fileList
},
removeFile(file, fileList){
  this.fileList = fileList
},
handleExceed(file, fileList) {
  this.$message.warning(`当前限制最多选择 1 个文件`);
},

submitForm() {
  let data = new FormData();
  for (let i = 0; i < this.fileList.length; i++) {
    data.append('file', this.fileList[i].raw);
  }
  for(let key in this.form){
    if (this.form[key] !=null){
      data.append(key,this.form[key]);
    }
  }
  this.$refs["form"].validate(valid => {
});

vue相关组件用法的更多相关文章

  1. vue 模版组件用法

    第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../nod ...

  2. vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)

    第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...

  3. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  4. 使用BootstrapVue相关组件,构建Vue项目界面

    基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了.Bootst ...

  5. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  6. Java成神之路:第一帖---- Vue的组件属性components用法

    Vue的组件属性:components 使用场景 一般在项目的使用过程中,某个需要多次使用的模块,会将整个模块抽取出来,写一个组件,供给其他页面进行调用或者是在一个页面中,多次使用到一个重复的代码样式 ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  9. vue 相关

    1.vue v-for 循环一个数组,key值报错,但是数据是正常显示的 报错: v-for使用key,需要在key前加上:key;srcList是个数组,key值绑定不能是数据类型Object的it ...

  10. VUE(相关简介及初始)

    1.什么是vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层, ...

随机推荐

  1. Seal 0.4 发布:软件供应链安全洞察更上一层楼!

    今天,我们很高兴宣布 Seal 0.4 已正式发布!在上一个版本中,Seal 完成了从单一产品到全链路平台的转变,通过全局视图帮助用户掌握软件开发生命周期各个环节的安全状况. 在 Seal 0.4 中 ...

  2. 如何优化 Vue.js 应用程序

    单页面应用(SPAs)当处理实时.异步数据时,可以提供丰富的.可交互的用户体验.但它们也可能很重,很臃肿,而且性能很差.在这篇文章中,我们将介绍一些前端优化技巧,以保持我们的Vue应用程序相对精简,并 ...

  3. vue+element 返回数组或json数据自定义某列显示的处理--两种方法

    本文是作者开发一个业务需求时,将返回数据列表的其中一个数据长度很长的字段处理成数组,并将其作为子表显示的过程,具体样式如下(数据做了马赛克处理) 返回的过长字段数据处理(用分号分隔的一个长字段): t ...

  4. bat脚本登陆ftp服务器

    用bat脚本登录ftp服务器,下载指定文件. 第一次脚本,有问题,你发现了么? 由于每个">>"重定向符号之前都习惯用空格(python style),导致写道ftp. ...

  5. vue2安装sass 预编译

    步骤一: 安装node-sass.sass-loader.style-loader npm i node-sass sass-loader style-loader --save-dev 步骤二: 打 ...

  6. 学习ASP.NET Core Blazor编程系列二十七——JWT登录(1)

    学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...

  7. .netcore全局异常处理

    一.背景 某天,应用程序进程无缘无故退出,也就是我们通常说的崩溃.通常情况下,windows事件会记录一条消息.但是有时候,我们发现这样的信息,对于查找问题,还是远远不够的,因为它说RunTime报错 ...

  8. net core 依赖注入DI

    控制反转:Inversion Of Control,简称 IOC,是面向对象中的一种设计原则,调用者不自己new实例,而是交给容器去创建,可以减轻代码的耦合度. 依赖注入:Dependency Inj ...

  9. 计网学习笔记二 Link Layer Service

    在上一周的计网学习了network和Internet的总论.在这一周开始的未来几讲将集中在链路层link layer,并且会有相应的计网lab完成.在这一讲中,我们主要关注链路层提供的服务. 课程资料 ...

  10. pat乙级 1017 A除以B 模拟除法

    #include <stdio.h> #define MAX_A 1000 int A[MAX_A]; int B; /* 除数 */ int num; /* A 被除数有多少位 */ v ...