初学vue 在做项目时遇到的问题与解决办法(使用element组件)(二)
- 表格每行里都有按钮
<el-table-column prop="option" label="操作" align="center" >
<template slot-scope="scope">
<el-button size="mini" plain @click="del(scope.$index,scope.row)">删除</el-button>
<el-button size="mini" plain @click="[edit(scope.$index,scope.row),editVisible =true]">修改</el-button>
</template>
</el-table-column>单击删除按钮时获取本行的id: del(index, row) { alert(row.id) }
element 的表单一行显示多个标签
1). :inline="true"
<el-form :inline="true" :model="seach" :label-width="labelwidth">
2). 使用el-row el-col去分割
<el-form :model="ruleForm" >
<el-row type="flex" class="row-bg">
<el-col :span="12">
<el-form-item label="签约企业名称" prop="ep_name">
<el-input style="width:16em" v-model="ruleForm.ep_name"></el-input>
</el-form-item>
</el-col>
<el-form-item label="签约企业简称" prop="ep_abbreviation">
<el-input style="width:16em" v-model="ruleForm.ep_abbreviation"></el-input>
</el-form-item>
</el-row>
</el-form>- 表单验证规则
查看文档:https://blog.csdn.net/weixin_42018790/article/details/80762149
1). el-form增加
:rules="rules"
2). el-form-item 中的label增加属性
prop="名称"
3). data中定义rules:{}
例子:
<el-form ref="form" :rules="rules" :model="form" label-width="300px">
<el-form-item label="发货人电话" prop="phone">
<el-input class="inp" v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="发货地址:" prop="address">
<el-input class="inp" v-model="form.address" ></el-input>
<el-button type="primary"@click="onSubmit('form')">常用地址</el-button>
</el-form-item>
</el-form>vue html代码
<script>
export default {
data() {
// 此处自定义校验手机号码js逻辑
var phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
var validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('号码不能为空!!'))
}
setTimeout(() => {
if (!phoneReg.test(value)) {
callback(new Error('格式有误'))
} else {
callback()
}
}, 1000)
}
},
return {
form: {
phone:'',
address: '',
},
// 校验规则
rules: {
// 校验手机号码,主要通过validator来指定验证器名称
phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
address: [
{ required: true, //是否必填
message: '地址不能为空', //规则
trigger: 'blur' //何事件触发
},
//可以设置双重验证标准
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', }
]
}
}
} </script>Vue js 代码
计算属性,依赖发生变化时,重新计算computed:
<el-form-item label="单价:" prop="price" >
<el-input v-model="addform.price" type="number" placeholder="请输入单价" auto-complete="off" class="widc" ></el-input>
</el-form-item>
<el-form-item label="数量:" prop="number" >
<el-input v-model="addform.number" type="number" placeholder="请输入数量" auto-complete="off" class="widc" ></el-input>
</el-form-item>
<el-form-item label="总金额:" prop="sum" >
<div v-model="addform.countNum" class="border" ><span style="margin-left: 10%">{{countNum}}</span></div>
</el-form-item>vue html代码
// 计算总金额
computed:{
countNum:function(addform){
let countNum=Number(this.addform.price) * Number(this.addform.number)
return countNum
}
},vue JavaScript代码
- 将内容滚动到指定坐标
window.scrollTo(xpos,ypos);
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间" value-format="yyyy-MM-dd" class="wida" :picker-options="pickerBeginDateBefore" @change="changeTime">
</el-date-picker>
<span class="zhi">至</span>
<el-date-picker v-model="seach.after" type="date" placeholder="结束时间"value-format="yyyy-MM-dd" class="wida" :picker-options="pickerBeginDateAfter">
</el-date-picker>template中
seach:{
before:'',
after:'',
},
// 开始时间不大于结束时间
// 开始时间
pickerBeginDateBefore: {
disabledDate: (time) => {
let beginDateVal = this.seach.after;
if (beginDateVal) {
return time.getTime() > beginDateVal;
}
}
},
// 结束时间
pickerBeginDateAfter: {
disabledDate: (time) => {
let beginDateVal = this.seach.before;
if (beginDateVal) {
return time.getTime() < beginDateVal;
}
}
},return 中
//选择开始时间,清空结束时间
changeTime(date){
// this.seach.before="";
// console.log(this.seach.before)
this.pickerBeginDateAfter={
disabledDate(time) { //开始时间-结束时间
return (time.getTime() < new Date(date).getTime());
}
}
},methods 中
element表格不设置行宽的时候会自适应显示
页面一加载的时候执行方法要在created中调用:
created:function(){
this.getTableData();/*调用的方法*/
},- v-if 和v-show区别:
通俗说:用法一样,意思不一样
v-if就是动态添加/删除,是真时的渲染,为true时才编译
v-show就是显示/隐藏,刚开始的时候就编译了,只是被保留下来,改变了css的display属性值
- element 表头单击事件
使用element.ui之后 @click="" 无法对表头等元素添加点击事件,应该是@click.native=""
初学vue 在做项目时遇到的问题与解决办法(使用element组件)(二)的更多相关文章
- eclipse创建项目时出现appcompat_v7包及解决办法
Android开发学习总结(三)--appcompat_v7项目说明 一.appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题,使用eclipse创建Android项目时, ...
- vue移动端项目vw适配运行项目时出现"advanced"报错解决办法。
Module build failed: Error: Cannot load preset "advanced". Please check your configuration ...
- vue+ivew-admin开发项目,内存占用过大解决办法
项目用的ivew+admin ivewUI,直接从github上拉下来用的,配置也没改,我们页面比较多,大该30个页面的样子,一启用,我们的电脑就卡了,然后,看一下,内存占用 1.5G+了,我们电脑4 ...
- IDEA使用maven构建时控制台中文乱码的解决办法
使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...
- 【记录】VS2012新建MVC3/MVC4项目时,报:此模板尝试加载组件程序集“NuGet.VisualStudio.Interop...”
最近电脑装了 VisualStudio "14" CTP,由于把其他版本的 VS 卸掉,由高到低版本安装,当时安装完 VisualStudio "14" CTP ...
- c# 项目带皮肤一起打包发布解决办法
c# 项目带皮肤一起打包发布解决办法 前提:c#语言 winform应用程序 皮肤为IrisSkin2 目标:在打包发布独立应用 程序时,将皮肤也一起打包发布,实现程序在其它机子安装时,皮肤效果 ...
- 返回xml过长时被nginx截断的解决办法
返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...
- 爬虫爬数据时,post数据乱码解决办法
最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler. F ...
- Bootstrap中关闭第二个模态框时出现的问题和解决办法
Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...
随机推荐
- Spring Boot整合actuator实现监控管理
Spring Boot使用actuator监控管理 1.在pom文件中导入相关的依赖 <dependency> <groupId>org.springframework.boo ...
- Hive分区表创建、分类
一.分区表创建与说明 必须在表定义时创建partition a.单分区建表语句:create table day_table (id int, content string) partitioned ...
- 8.支撑向量机SVM
1.什么是SVM 下面我们就来介绍一些SVM(Support Vector Machine),首先什么是SVM,它是做什么的?SVM,中文名是支撑向量机,既可以解决分类问题,也可以解决回归问题,我们来 ...
- shell 获取结果中的第n列,第n行
ls -l | awk '{print $5}' | sed -n '2p' awk 是很实用的文本处理命令,print 到后带的是你要获取第几列,sed -n 是指定第几行.
- 《Maven 实战》笔记之setting.xml介绍
maven是什么?有什么用? Maven是一个跨平台的项目管理工具,主要服务于Java平台的项目构建,依赖管理和项目信息管理.项目构建包括创建项目框架.清理.编译.测试.到生成报告,再到打包和部署,项 ...
- PAT Basic 1003 我要通过! (20 分)
“答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: ...
- 清除zencart分类页多页后面的&disp_order &sort字符串的方法
在includes\classes\split_page_results.php页面中的function display_links()函数第一行添加如下两行代码即可$parameters=preg_ ...
- 【HDU6635】Nonsense Time
题目大意:给定一个长度为 N 的序列,开始时所有的位置都不可用,每经过一个时间单位,都会有一个位置被激活.现给定激活顺序的序列,求每次激活之后全局的最长上升子序列的长度,保证数据随机. 题解: 引理: ...
- DevExpress ASP.NET Core v19.1版本亮点:数据网格和树列表
行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Core Controls v19.1中新增的一些控件及增强 ...
- DevExpress实现为TextEdit设置水印文字的方法
设置水印与消除水印 public static void SetWatermark(TextEdit textEdit, string watermark) { textEdit.Properties ...