1. 表格每行里都有按钮

    <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) }

  2. 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>
  3. 表单验证规则
    查看文档: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 代码

  4. 计算属性,依赖发生变化时,重新计算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代码

  5. 将内容滚动到指定坐标
     window.scrollTo(xpos,ypos);
  6. 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 中

  7. element表格不设置行宽的时候会自适应显示
  8. 页面一加载的时候执行方法要在created中调用:
    created:function(){
    this.getTableData();/*调用的方法*/
    },
  9. v-if 和v-show区别:
    通俗说:用法一样,意思不一样
    v-if就是动态添加/删除,是真时的渲染,为true时才编译
    v-show就是显示/隐藏,刚开始的时候就编译了,只是被保留下来,改变了css的display属性值
  10. element 表头单击事件
     使用element.ui之后 @click="" 无法对表头等元素添加点击事件,应该是@click.native=""

初学vue 在做项目时遇到的问题与解决办法(使用element组件)(二)的更多相关文章

  1. eclipse创建项目时出现appcompat_v7包及解决办法

    Android开发学习总结(三)--appcompat_v7项目说明 一.appcompat_v7项目说明 今天来说一下appcompat_v7项目的问题,使用eclipse创建Android项目时, ...

  2. vue移动端项目vw适配运行项目时出现"advanced"报错解决办法。

    Module build failed: Error: Cannot load preset "advanced". Please check your configuration ...

  3. vue+ivew-admin开发项目,内存占用过大解决办法

    项目用的ivew+admin ivewUI,直接从github上拉下来用的,配置也没改,我们页面比较多,大该30个页面的样子,一启用,我们的电脑就卡了,然后,看一下,内存占用 1.5G+了,我们电脑4 ...

  4. IDEA使用maven构建时控制台中文乱码的解决办法

    使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...

  5. 【记录】VS2012新建MVC3/MVC4项目时,报:此模板尝试加载组件程序集“NuGet.VisualStudio.Interop...”

    最近电脑装了 VisualStudio "14" CTP,由于把其他版本的 VS 卸掉,由高到低版本安装,当时安装完 VisualStudio "14" CTP ...

  6. c# 项目带皮肤一起打包发布解决办法

    c# 项目带皮肤一起打包发布解决办法 前提:c#语言   winform应用程序  皮肤为IrisSkin2 目标:在打包发布独立应用 程序时,将皮肤也一起打包发布,实现程序在其它机子安装时,皮肤效果 ...

  7. 返回xml过长时被nginx截断的解决办法

    返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...

  8. 爬虫爬数据时,post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

  9. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

随机推荐

  1. openCV3 Python编译指南

    这里主要对openCV官网的<Installation in Linux>文档进行了翻译和解释 原文见:https://docs.opencv.org/3.4.1/doc/tutorial ...

  2. python3 调用zabbix API实现批量增加删除主机,主机各种监控项------实战

    在以前的博客中谈到了利用zabbix接口来对主机进行批量的增删改查 这里在不用环境中实战遇到了不同问题,这里记录下来以便后续review 以下为实战中获取token的代码,在zabbix标准接口文档中 ...

  3. MySQL配置文件my.cnf中文详解

    #BEGIN CONFIG INFO #DESCR: 4GB RAM, 只使用InnoDB, ACID, 少量的连接, 队列负载大 #TYPE: SYSTEM #END CONFIG INFO # # ...

  4. Mysql补充部分:SQL逻辑查询语句执行顺序

    一 SELECT语句关键字的定义顺序 SELECT DISTINCT <select_list> FROM <left_table> <join_type> JOI ...

  5. DP问题练习1:数字三角最短路径问题

    DP问题练习1:数字三角最短路径问题 问题描述 给定一个数字三角形,找到从顶部到底部的最小路径和.每一步可以移动到下面一行的相邻数字上. 样例: 比如,给出下列数字三角形: 2 3 4 6 5 7 4 ...

  6. 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. ...

  7. 第二天·初识HTML

    一·什么是HTML HTML(HyperText Markup Language)是超文本标记语言,"超文本"的意思就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.不仅 ...

  8. qt5--鼠标操作

    #include "mylabel.h" #include <QDebug> #include <QPointF> #include <QPoint& ...

  9. C# out关键字

    在c#中"out"关键字可以通过参数一次返回多个值. using System; namespace ConsoleApplication1 { internal class Pr ...

  10. Greenplum 日常维护

    1. 数据库启动:gpstart 常用可选参数: -a : 直接启动,不提示终端用户输入确认 -m:只启动master 实例,主要在故障处理时使用 2. 数据库停止:gpstop: 常用可选参数:-a ...