![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
The dream is near
这个作者很懒,什么都没留下…
展开
-
vue实现父子组件的互相传值及调用方法
1.父级组件调用子组件及传值(1)命名组件命名使用驼峰命名法,如addStudent引用时,用短横线连接,如:<add-student></add-student>2、引用将组件页面import进入当前页面,并在componens里注册组件import addStudent from "./components/addStudent";export default { components: { addStudent },}3、传值父组件通过原创 2021-09-02 10:40:13 · 326 阅读 · 0 评论 -
el-dialog关闭时销毁组件,重置页面
1、关键代码:v-if配合destroy-on-close,当页面关闭再打开,会重新渲染el-dialog<el-dialog title="测试" :visible.sync="isShow" destroy-on-close :before-close="closeDialog" v-if="isShow" > <el-form :inline="true" :model="testForm" ref="testForm">原创 2021-08-31 16:50:41 · 3763 阅读 · 1 评论 -
el-table实现默认选中/置灰不可选
分为两种情景:置灰和选中常用属性::reserve-selection:true //翻页后仍记住表格选项场景1:已经进行操作过的列表,不能再处理,需要置灰。:selectable='checkMaterialStatus'checkMaterialStatus方法:根据已经处理的列表内容(假设为selectList),遍历表格,如果有相同的id(唯一值),则置灰不可选,反正返回true。checkMaterialStatus(row){ if(this.selectList原创 2021-08-31 16:31:31 · 3898 阅读 · 0 评论 -
el-table动态列(表头顺序固定)实现和乱序的列表的映射(含可编辑表格的保存)
关于动态列的遍历方法,可以查看我的上一篇推文:el-table实现指定列作动态列表渲染首先动态列的表头是固定,那么就要有单独的一个list存储表头的内容:myList:{ [name:'动态列1'], [name:'动态列2'], [name:'动态列3'],}后台传过来的数据是不固定的://动态列的顺序不一致exportForm:{ exportData:{ [ //动态列1 readList:{ [name:'动态列2',value:'222'],原创 2021-08-31 11:05:13 · 942 阅读 · 0 评论 -
el-table实现指定列作动态列表渲染
重要代码:myList是动态列的表头名称,readList是需要遍历的动态内容exportForm:{ exportData:{ [ fix_first:"", fix_second:"", readList:{ [name:'动态列1',value:''], [name:'动态列2',value:''] } ] }}myList:{ [name:'动态列1'], [name:'动态列2']}<el-table-column v-for原创 2021-08-30 17:59:17 · 682 阅读 · 0 评论 -
给el-table添加必填校验的*号
参考网址:https://www.cnblogs.com/dreamstartplace/p/13051418.html转载 2021-07-09 10:27:50 · 1040 阅读 · 0 评论 -
el-table根据后台数据映射展示对应数据,如状态
整体代码原创 2021-07-07 10:16:59 · 3459 阅读 · 0 评论 -
实现el-table里表单每一行输入框间的校验比较
自定义校验规则:如:卖出数量不能大于未出售数量let checkNumber = (rule, value, callback) => { //获取当前行的index值 let index = rule.field.split(".")[1]; //value为卖出数量值,unsealedQuantity为未出售的数量 if (parseInt(value) > parseInt(this.orderDetailForm.orderDat原创 2021-07-06 15:31:14 · 615 阅读 · 0 评论 -
el-table实现复选框选中时,才校验表单的数据格式和内容
动态变更rules,判断当前行是否选中通过三元表达式,当选中时赋予校验规则,反之为空:rules="(rows.length && (rows.indexOf(scope.row) !== -1)) ? orderDetailRule.soldNumber: []"1、html: <el-table-column type="selection" width="55" :reserve-selection="true" > </el原创 2021-07-06 12:48:30 · 871 阅读 · 0 评论 -
vue-element实现全局loading效果
main.jsimport ElementUI from 'element-ui'import { Loading } from 'element-ui';//打开加载Vue.prototype.startLoading = (msg) => { // 使用Element loading-start 方法 loading = Loading.service({ lock: true,//锁定屏幕 text: msg, background: 'rgba(0,.原创 2021-06-15 11:02:02 · 523 阅读 · 0 评论 -
后台传了中文字段,vue、小程序要如何读取展示?
1. 小程序1.1 html用 [‘中文字段’] 的形式进行引用<view class="text" wx:if="{{newData['学生信息']['学生名称'] != null}}"> <view class="title">学生名称:</view> <view class="title-text"> <text>{{newData['学生信息']['学生名称']}}</text>原创 2021-03-26 17:44:59 · 409 阅读 · 0 评论 -
vue重新渲染组件但不关闭页面
通过设置key值重新渲染组件如果使用v-if,页面会关闭后再打开,页面显示不友好<template> <mycomponent :key="refreshkey" /></template><script>import mycomponent from "./mycomponent";export default { components: { mycomponent }, data() { return {原创 2021-03-26 16:08:28 · 137 阅读 · 0 评论 -
vue里实现弹窗确定后关闭当前浏览器页面
在alert弹窗内添加callback,当用户点击确定或者关闭时,将关闭浏览器页面this.$alert('当前页面已过期,请重新从门户页打开', '提示', { confirmButtonText: '确定', callback: action => { //关闭浏览器 window.open('','_self').close() }...原创 2021-03-17 15:58:29 · 1417 阅读 · 0 评论 -
设置路由后,页面仍然空白的问题 Cannot read property ‘requestContent‘ of undefined
redirect的地址要另外写一个,不然路由无法跳转过去原创 2021-03-11 15:03:06 · 3372 阅读 · 0 评论 -
vue背景图片底下留白 如何充满全屏
底下留白解决方法:因为我是全局背景都是这张图片,因此直接在app.vue写样式#app{height: 100%;background: url(img/timg.jpg) no-repeat;background-size: 100% 100%;background-attachment:fixed;}原创 2020-09-17 17:29:26 · 982 阅读 · 0 评论 -
vue template报错:Component template should contain exactly one root element
原因:template底下只能有一个元素,多个会报错<template> <button @click="jump">返回</button> <div>公告</div> </template>解决方法:在最外层加一层div即可<template> <div class="notice"...原创 2020-04-16 11:32:44 · 163 阅读 · 0 评论