vue相关组件用法
<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相关组件用法的更多相关文章
- vue 模版组件用法
第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../nod ...
- vue第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件)
第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件,了解全局 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- 使用BootstrapVue相关组件,构建Vue项目界面
基于Vue的前端框架有很多,Element算一个,而BootstrapVue也可以非常不错的一个,毕竟Bootstrap也是CSS中的大佬级别的,它和Vue的整合,使得开发起来更加方便了.Bootst ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- Java成神之路:第一帖---- Vue的组件属性components用法
Vue的组件属性:components 使用场景 一般在项目的使用过程中,某个需要多次使用的模块,会将整个模块抽取出来,写一个组件,供给其他页面进行调用或者是在一个页面中,多次使用到一个重复的代码样式 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue 相关
1.vue v-for 循环一个数组,key值报错,但是数据是正常显示的 报错: v-for使用key,需要在key前加上:key;srcList是个数组,key值绑定不能是数据类型Object的it ...
- VUE(相关简介及初始)
1.什么是vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层, ...
随机推荐
- 【Windows】ip地址修改器v5.0.5.4 修改ip更简便
ip地址修改器v5.0.5.4 修改ip更简便 IP地址修改器,一款能够快速的切换IP地址,在几个不同的固定IP之间进行切换,手动输太麻烦,所以可以用到这款IP地址修改器! 下载 ip地址修改器v5. ...
- 【TS】any和void
any类型 any类型,在ts中是一个万能类型,它可以替代所有类型,也就是说定义了any类型,就不用担心ts的类型束缚,但如果所有的类型都使用any那么ts就失去了它的作用,我们使用ts就是为了规范类 ...
- Redux Toolkit 的使用方法
Redux Toolkit 是什么? Redux Toolkit 是 Redux 官方强烈推荐,开箱即用的一个高效的 Redux 开发工具集.它旨在成为标准的 Redux 逻辑开发模式,我们强烈建议你 ...
- 题解 [ZJOI2007]棋盘制作
把悬线法这个坑填了,还是很简单的 qwq. 悬线法一般解决有一定约束条件的最大矩形问题.悬线的定义是从一个点一直往上走直到边界或者不符合条件结束. 炒个例子,在这题里面比如说有这样一个矩形 0 1 0 ...
- 依那西普治疗多关节型和系统型JRA的长期疗效[EULAR2007_SAT0397]
依那西普治疗多关节型和系统型JRA的长期疗效 Giannini EH, Ilowite NT. EULAR2007. Abstract No:SAT0397. 标签: EULAR2007,EULAR文 ...
- 解读C#编程中最容易忽略7种编写习惯!
编程时犯错是必然的,我们来解读一下编程中最容出现的错误 1.拼接字符串 在C#编程中,字符串类型的处理是比较容易出错的地方,在.NET Framework中,字符串是一个不可变的类型,当一个字符串被修 ...
- ModuleNotFoundError: No module named 'flask._compat'
出现 "ModuleNotFoundError: No module named 'flask._compat'" 提示的解决办法: 参考 https://zhuanlan.zhi ...
- angular - 另一个ID为#######的进程当前正在运行ngcc
angular项目启动时报错 首先尝试npm install再次运行,看看它是否可以解决您的问题. 尝试ngcc手动运行. 删除这个文件 node_modules/@angular/compiler- ...
- Vue 插件介绍
功能:用于增强Vue 本质:包含install方法的一个对象,install的第一个参数是Vue,第2个以后的参数是插件使用者传递的数据. 1.定义插件: 对象.install = function( ...
- hashMap的底层数据结构
本节用于记录Java HashMap底层数据结构.方法实现原理等,基于JDK 1.8. # 底层数据结构 Java hashMap 是采用哈希表结构的(数组+链表 /jdk8后加入红黑树)实现,结合了 ...