前端小蔡姬-CSDN博客

例如：表格模糊查询，实现一边输入，一边过滤数据v-on:input ="searchData"<el-input clearable placeholder="请输入姓名或者员工编码搜索" style="margin-bottom: 10px" size="small" v-on:input ="searchData" //监听 v-model="nameOrcode"> <i slot="prefix" class="el-in

2022-05-27 15:07:55 864

原创 vue 列表分页删除完当前页面数据分页无法自动跳转到上一页刷新数据问题

if (res && res.data && res.data.success) { this.$message.success("数据删除成功"); let newPageing = Math.ceil((this.total - 1) / this.pageSize);//Math.ceil向上取整算出新的分页 let currentPage = this.pageNum > newPageing ? newPageing : this.pag.

2022-05-26 15:10:40 1535 1

原创 elment tree实现树节点只可单选

一行代码：:check-strictly="true"<el-tree :data="treeData" node-key="id" :check-strictly="true" //严格遵循父子不关联 show-checkbox @check-change="handleCheckChange" :props="treeDefaultProps"> <span slot-scope="{ node }">

2022-05-24 15:25:44 1955

原创使用elmentUI里面el-button按钮替换input type=“file“ 默认按钮

先隐藏input的默认按钮，再把el-button的点击事件指向input的点击事件 <form name="formInput"> <input type="file" id="fileDemo" class="input" style="position:absolute; clip:rect(0 0 0 0);" //隐藏样式 @cha

2022-05-11 17:34:58 873

原创 vue 做一个表格的假查询

前端有时候会用假数据暂时支撑页面，并且需要支持模糊查询例：做一个表格的假查询在搜索的点击事件下，assetName为表格里“资产名称”的字段getAchieve(){ let arr = []; this.tableData.filter(item =>{ if(item.assetName.includes(this.keyWord)){

2022-04-25 11:13:35 1878

原创 vue 超出限定字数显示...鼠标移入显示全称

1、效果2、例：超出四个字显示...需要设置的名称后面加入 ellipsis<div class="image_text" :title="item.name">{{ item.name | ellipsis }}</div>3、再使用过滤器filters处理filters: { ellipsis (value) { if (!value) return '' if (value.length > 4) { .

2022-04-13 15:21:14 1797 1

原创 vscode 设置光标动态效果

1.先在扩展商店里安装power mode2.在设置-扩展中找到power mode勾选权限，并在下面choose中选择样式就可

2022-04-12 16:43:40 1792

原创 vue 处理防止按钮重复点击问题

1.在button上绑定动态的disabled<el-button type="primary" size="mini" @click="testCode" :disabled="codeDisabled">发送验证码</el-button>2.在data中定义codeDisabled: false,3.在点击事件里加入定时器，60000为1分钟不能重复点击 testCode() { this.codeDisabled = true

2022-04-11 16:50:26 2700

原创 vue 解决浏览器自动回填输入框问题

使用个别浏览器加载页面时，有些输入框会受浏览器自动记住密码影响，自动回填信息，解决：先把输入框设置为只读状态，当获取焦点时再取消这一属性。加：readonly onfocus="this.removeAttribute('readonly');"例如：<el-input size="mini" placeholder="" readonly onfocus="this.removeAttribute('readonly');" v-model="formPass.testUserC

2022-04-08 09:27:22 3040

原创 vue 手动分割日期

例如：接口返回日期为20220201，要分割为2022年02月01日代码：<span style="margin-right: 10px;font-size: 14px">数据日期：{{formatStr(indTime)}}</span>在data中定义：indTime: '',取到indTime时间值以后在methods里面加入方法：formatStr(str) { if (str) { return `${str.sub

2022-04-02 11:20:29 2056

原创 vue 解决浮动引起其他样式改变问题

方法：在父盒子里面的最下面添加一个空盒子，<div style="clear:both;"></div><div style="clear: both"></div>

2022-03-25 11:43:33 1420

原创 vue 带有判断的动态style

:style="{'background-color': (navTopping == 1) ? dynamicTopBg: dynamicLeftBg}"

2022-03-10 15:46:29 4796

原创 vue 三元表达式

2022-03-02 17:20:36 1202

原创 vue 实现手机号中间四位隐藏，显示*

1、切割法<div style="margin: 15px 0">已将验证码发送绑定手机号码{{userTelephoneNum}}</div>const phone = '17786292509' //后续更换接口返回的电话号码this.userTelephoneNum = phone.substr(0, 3) + '****' + phone.substr(7) 2、正则表达式法const phone = '17786292509' //后

2022-02-25 15:39:18 3070

原创 vue 画一个小圆点

效果图：方法1：<span style="margin: 0 10px;font-size: 36px">•</span>右击右下角输入法，点击表情符号&符号，往下翻，会找到符号中的小圆点，再设置大小，用font-size即可，这种方法较为简单，不需要单独再设置小圆点的垂直居中样式等等。方法二：用css样式画小圆点<span style="margin: 0 10px"><span class="login-cycle"&g..

2022-02-25 10:23:59 3471

原创 v-show 和 v-if的区别，v-show 和 keep-alive 的区别

v-show是 CSS display 控制显示和隐藏v-if 是组件真正的渲染和销毁，而不是显示和隐藏频繁切换显示状态用 v-show，否则用 v-ifkeep-alive 是在vue 框架层级进行的JS 对象渲染一般简单的可用 v-show，复杂一点的一般用 keep-alive，keep-alive 通常用于 tab 的切换...

2022-02-23 11:14:40 1010

原创 vue el-row el-col 的点击事件@click 无效问题

el-col是基于vue封装的组件，不支持原生事件的触发。无效：<el-col :span="4" @click="tagPlatform"> <img class="image_icon" src="@/assets/images/labelTag.png" alt=""/> <div class="image_text">标签平台</div></el-col>修改：<el-col :span=

2022-02-21 15:30:38 2575

原创 vue src图片路径动态拼接

<div v-for="(item,index) in commonFun" :key="index" style="width: 20%" @click="jumpToPage(item.uri)"> <img v-if="item.iconPath" style="border:2px dashed rgb(51 51 51 / 41%)" :src="require(`@/assets/images/sxyhFunIcon/${item.iconPath}.svg`)".

2022-02-17 18:05:02 1134

原创 vue 实现下拉树形选择，支持输入过滤功能

1、效果··2、代码<el-select v-model="organForm.manageId" size="small" placeholder="请选择"> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-option hidden :label="organForm.manageName" :value=..

2022-02-14 10:06:59 1523 2

空空如也

空空如也