兮夏--CSDN博客

日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种：1）通过动态路由方式//路由配置文件中配置动态路由{ path: '/detail/:id', name: 'Detail', component: Detail }//跳转时页面var id = 1;this.$router.push('/detail/' + id) //跳转后页面获取参数this.$route.params.id2）通过query属性传值//路由配置文件中

2022-05-16 16:04:05 2371

原创 element ui 中循环列表的表单怎么校验（v-for动态绑定的数据)

在vue项目中，使用element-ui的表单校验能节省很多时间，简单的对象表单校验，很简单，使用prop属性就可以直接校验。但是，如果表单项里有通过v-for动态生成的数组对象，又该怎么设置验证呢？1、总结：1) v-for要遍历的数组dynamicItem // 字典维护表单 dictMaintainForm: { dynamicItem: [ { typeId: this.$route.query.typeId

2022-04-28 14:45:58 1674

原创 Element table表格设置表头、行、列或者指定单元格背景色

正在上传…重新上传取消

2022-04-28 14:42:47 5938 1

原创 vue element-ui分页删除最后一页的最后一条数据，返回上一页

1.默认当前页为第一页，页容量为10条data(){ return{ current:1, size:10 }}2.再点击删除的时候进行如下配置 // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页（pageSize=1时不生效） let totalPage = Math.ceil((this.total - 1) / this.size) let currentPage =this.

2022-04-28 14:38:33 2629 1

原创 element-ui input只允许输入数字

html:<el-form-item label="用户账号:" prop="loginId"> <el-input type="loginId" v-model.number="ruleForm.loginId" maxlength="11" placeholder="请输入用户账号" autocomplete="off"></el-input></el-form-item>data:data(){ return{　　ruleFor

2022-04-28 14:35:57 747

原创 vue 实现动态表单，点击新增增加一行输入框

功能说明存在一排必填，点击增加后会新增一行，点击每行后面的删除图标则会删除该行，新增按钮只会出现在最后一行动态表单部分 <el-form :model="dictMaintainForm" ref="dictMaintainFormRef" :rules="dictMaintainFormRules" label-width="100px" class="demo-ruleForm" >

2022-04-27 11:38:43 8594 1

原创 element-UI级联选择器(Cascader)获取label值

<el-cascader :options="options" v-model="selectedOptions" :props="props" size="small" ref="cascaderAddr" filterable @change="handleChange" change-on-select placeholder="请选择上级分类"/><script>handleChange(e) {

2022-04-27 11:29:12 3697

原创 vue级联选择框(Cascader)动态渲染数据

<el-cascader v-model="baseForm.selectAdressKeys" ref="cascader" @change="areaHandleChange" :props="props"></el-cascader>在data中定义props props:{ checkStrictly:true, childre...

2022-04-27 11:28:01 1445

原创 vue element-ui 实现el-table表格多选以及回显

<el-table v-loading="roleInfaceLoading" ref="multipleApiTable" :data="data" tooltip-effect="dark" row-key="id" style="width: 100%"..

2022-04-27 11:25:00 2900

原创 vue解决Element-ui中 el-cascader 级联选择器最后一级数据为空显示暂无数据问题

1.出现问题bug: el-cascader控件最后一级出现空白暂无数据2. 问题原因分析经过调试分析出现空级联原因是：由于数据是从后台传递过来的，当后端的哥们使用递归算出菜单，然后转换成json传递到前端的时候。就会出现最底层的子项中的 children 为空数组，这样就会造成，空级联的bug存在。3.解决办法: 使用递归的方式，将最底层中的 children设为undefinedhtml代码 <el-casc

2022-04-13 13:55:48 5945 1

原创深度选择器

less --------> /deep/scss --------> ::v-deppcss ---------> >>>

2022-04-13 13:51:56 62

原创 Vue利用递归的方法，根据id获取对应的字段名(树形数据)

树形数据源 options:[ { id: 1, name: '一级1', children: [ { id: 4, name: '二级1', }, { id: 5,

2022-04-13 13:51:16 6343

原创 Vue常见过度动画

从右向左滑动<transition name="slide"> <router-view></router-view> </transition>.slide-enter-active,.slide-leave-active { transition: all 1s;}.slide-enter,.slide-leave-to { transform: translate3d(100%, 0, 0);}从左向右&

2022-04-13 13:46:04 457

原创解决vue 使用axios发送post请求表单提交时参数传不进去问题

1.qs插件介绍简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。2.qs安装在项目中使用命令行工具输入：npm install qs安装完成后在需要用到的组件中：import qs from 'qs'qs.parse()和qs.stringify()区别:qs.parse()是将URL解析成对象的形式qs.stringify()是将对象序列化成URL的形式，以&进行拼接解决我遇到的问题我使用了qs.stringify()4.axios

2022-04-13 13:44:43 2440

原创 div拼表格

html代码 <div class="table"> <div class="row"> <div class="l">企业名称</div> <div class="r">三门峡XXXXXXXXXXXXXXXX有限责任公司</div> </div> <div class="row"> <d...

2022-04-13 13:42:05 242

原创 css3 word-break 属性

属性定义及使用说明word-break: normal | break-all | keep-all; normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 ...

2022-04-13 13:40:36 480

原创 table表格实现

<!DOCTYPE html><html><head><style>#customers { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%;}#customers td, #customers th { border: 1px solid #ddd; padding: 8px;}#customers...

2022-04-13 13:34:02 269

原创 box-shadow属性值的详细解析

以第一个阴影：box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)为例：这段代码表示阴影的水平位置为右移10px；垂直位置为下移10px；第三个10px代表阴影的模糊程度blur，我们也将它设置成20px；第四个10px是阴影半径的意思；最后一个规定了阴影的颜色为rgba(255,255,0,0.5)。也就是说，我们为class为test的div元素添加了一个偏离框，并且向右距离为10px、向下距离为10px、模糊半径为10px、阴影半径为10px

2022-04-13 07:00:00 3208

空空如也

空空如也