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. Spring Boot整合actuator实现监控管理

    Spring Boot使用actuator监控管理 1.在pom文件中导入相关的依赖 <dependency> <groupId>org.springframework.boo ...

  2. Hive分区表创建、分类

    一.分区表创建与说明 必须在表定义时创建partition a.单分区建表语句:create table day_table (id int, content string) partitioned ...

  3. 8.支撑向量机SVM

    1.什么是SVM 下面我们就来介绍一些SVM(Support Vector Machine),首先什么是SVM,它是做什么的?SVM,中文名是支撑向量机,既可以解决分类问题,也可以解决回归问题,我们来 ...

  4. shell 获取结果中的第n列,第n行

    ls -l | awk '{print $5}' | sed -n '2p' awk 是很实用的文本处理命令,print 到后带的是你要获取第几列,sed -n 是指定第几行.

  5. 《Maven 实战》笔记之setting.xml介绍

    maven是什么?有什么用? Maven是一个跨平台的项目管理工具,主要服务于Java平台的项目构建,依赖管理和项目信息管理.项目构建包括创建项目框架.清理.编译.测试.到生成报告,再到打包和部署,项 ...

  6. PAT Basic 1003 我要通过! (20 分)

    “答案正确”是自动判题系统给出的最令人欢喜的回复.本题属于 PAT 的“答案正确”大派送 —— 只要读入的字符串满足下列条件,系统就输出“答案正确”,否则输出“答案错误”. 得到“答案正确”的条件是: ...

  7. 清除zencart分类页多页后面的&disp_order &sort字符串的方法

    在includes\classes\split_page_results.php页面中的function display_links()函数第一行添加如下两行代码即可$parameters=preg_ ...

  8. 【HDU6635】Nonsense Time

    题目大意:给定一个长度为 N 的序列,开始时所有的位置都不可用,每经过一个时间单位,都会有一个位置被激活.现给定激活顺序的序列,求每次激活之后全局的最长上升子序列的长度,保证数据随机. 题解: 引理: ...

  9. DevExpress ASP.NET Core v19.1版本亮点:数据网格和树列表

    行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Core Controls v19.1中新增的一些控件及增强 ...

  10. DevExpress实现为TextEdit设置水印文字的方法

    设置水印与消除水印 public static void SetWatermark(TextEdit textEdit, string watermark) { textEdit.Properties ...