表格每行里都有按钮
<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>
View Code
单击删除按钮时获取本行的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>
View Code表单验证规则
查看文档：/weixin_4790/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();/*调用的方法*/},
View Codev-if 和v-show区别：
通俗说：用法一样，意思不一样
v-if就是动态添加/删除，是真时的渲染，为true时才编译
v-show就是显示/隐藏，刚开始的时候就编译了，只是被保留下来，改变了css的display属性值
element 表头单击事件
使用element.ui之后 @click="" 无法对表头等元素添加点击事件，应该是@click.native=""
