初学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.关闭第 ...
随机推荐
- openCV3 Python编译指南
这里主要对openCV官网的<Installation in Linux>文档进行了翻译和解释 原文见:https://docs.opencv.org/3.4.1/doc/tutorial ...
- python3 调用zabbix API实现批量增加删除主机,主机各种监控项------实战
在以前的博客中谈到了利用zabbix接口来对主机进行批量的增删改查 这里在不用环境中实战遇到了不同问题,这里记录下来以便后续review 以下为实战中获取token的代码,在zabbix标准接口文档中 ...
- MySQL配置文件my.cnf中文详解
#BEGIN CONFIG INFO #DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 #TYPE: SYSTEM #END CONFIG INFO # # ...
- Mysql补充部分:SQL逻辑查询语句执行顺序
一 SELECT语句关键字的定义顺序 SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOI ...
- DP问题练习1:数字三角最短路径问题
DP问题练习1:数字三角最短路径问题 问题描述 给定一个数字三角形,找到从顶部到底部的最小路径和.每一步可以移动到下面一行的相邻数字上. 样例: 比如,给出下列数字三角形: 2 3 4 6 5 7 4 ...
- dcoker_ubuntu中安装python2.7
1.apt-get update 2.apt-get install python2.7 或 1.sudo apt-get update 2.sudo apt-get install python2. ...
- 第二天·初识HTML
一·什么是HTML HTML(HyperText Markup Language)是超文本标记语言,"超文本"的意思就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.不仅 ...
- qt5--鼠标操作
#include "mylabel.h" #include <QDebug> #include <QPointF> #include <QPoint& ...
- C# out关键字
在c#中"out"关键字可以通过参数一次返回多个值. using System; namespace ConsoleApplication1 { internal class Pr ...
- Greenplum 日常维护
1. 数据库启动:gpstart 常用可选参数: -a : 直接启动,不提示终端用户输入确认 -m:只启动master 实例,主要在故障处理时使用 2. 数据库停止:gpstop: 常用可选参数:-a ...