- 博客(17)
- 收藏
- 关注
RSS订阅原创 vue实现父组件调用子组件 Cascader 级联选择器
父组件：定义。把父子组件关联起来，在父组件里通过对 AreaCascader 添加 ref="areaCascader"，然后用 $refs.areaCascader.方法名，可以直接调用子组件中该方法；并通过v-bind（即简写 " ："），将父组件中的regionCode值传递给子组件<AreaCascader ref="areaCascader" :area-id.sync="searchParams.regionCode" />引入子组件import AreaCasc
2022-03-21 17:32:04
1706
原创 ES6 扩展运算符
将字面量对象展开为多个元素getParams() { const { measureRange, ...serch } = this.searchParams const params = { ...serch, ...this.page, } return params},...serch 则是排除选择元素后的
2022-03-21 16:32:53
850
原创 使用多个 class 定义同一标签的css样式
需求描述： 判断 status 的值，正常和异常时使用不同样式<span :class="['status', { 'is-illegal': isIllegal(item.status) }]"> {{ item.statusName }}</span>computed: { // 是否异常 isIllegal() { return function (status) { return status !== 1 } },
2022-03-21 10:20:48
3716
原创 ES6 块级作用域
问题描述： 在做一个有搜索条件的表格列表页时，需要拿到时间字段measureRange进行转换。然后我在if中判断并定义，后面传给后端接口却显示出错。<h-page-search-item label="下发时间" prop="measureRange"> <el-date-picker v-model="measureRange" type="daterange" start-placeholder="开始日期" end-placeholder=
2022-03-18 15:48:35
656
原创 使用git提交代码的命令流程
git的命令有很多，我提交代码一般都是用这样固定的流程规范，用的次数多了就能记住了1. git pull origin dev_test多人协作开发项目，在上传代码时通常先拉取下最新代码，使本地与远程同步更新。2. git status查看更改的文件，方便提交时复制文件名。也可以在源代码管理中查看挂起的更改。3. git add src/pages/.../.../components/xx.vue提交文件。一般vue.config.js配置文件除非有实质性的功能改动不提交，因.
2022-03-17 14:12:51
1532
原创 vue实现带输入建议的 el-autocomplete 远程搜索下拉框
需求描述： 有一个搜索用的输入框(需要绑定value和显示的label不一致的请使用select组件)，激活即列出输入建议，并且输入后下拉框选择项匹配输入建议使用组件<h-page-search-item label="房间"> <el-autocomplete v-model="roomName" :fetch-suggestions="querySearch" :clear-icon-click="clearSearch" :props
2022-03-16 16:33:11
2140
原创 Element Ui 实现 Select选择器 新增或删除下拉选择框功能
需求描述： 点击按钮新增一个Select 选择器，在每个新增的选择器下拉框后面都有删除按钮，并且最后一个下拉框后还有新增按钮。<div> <div style="margin-bottom: 8px">选择区域</div> <el-button v-if="!buildings.length" type="link" @click="handleAdd"> 新增区域 </el-button> <el-fo..
2022-03-15 17:24:41
4642
原创 el-table-column标签内使用v-if判断其显示，出现列错位和列元素渲染异常的问题
问题描述： 根据侧边栏的选择条件，表格项有几项不同，我在el-table-column标签内使用了几个v-if渲染，结果出现列错位，并且该列元素渲染宽度和高度异常，该列元素通过props获取的值也未正确显示。分析原因：vue的风格指南中介绍，默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会导致元素间相互影响，不能正常渲染。总而言之就是v-if不能多次作用..
2022-03-14 16:32:12
11985
原创 el-table-column标签内时间格式化
方法一：<el-table-column prop="configTime" label="配置时间" :formatter="r => formatTime(r.configTime)" min-width="160">方法二：<el-table-column width="160" label="配置时间"> <template slot-scope="scope"> {{ formatTime(scope.row.
2022-03-14 11:12:19
577
原创 Vue使用directives自定义指令实现“点击div以外区域隐藏盒子内容“功能
官方文档介绍：自定义指令主要就是利用vue指令的功能，获取所绑定元素的dom对象dom_A以及传递过来的回调方法fun_A，然后监听浏览器的mousedown和mouseup事件(mousedown作为辅助信息，真正触发传递的回调方法的是mouseup事件)，当前事件中鼠标位置对应的dom对象dom_B不属于dom_A，则代表鼠标点击了dom_A外部，触发clickoutside回调方法。参考：vue自定义指令clickoutside使用以及扩展用法 element ui c...
2022-03-09 16:37:54
1831
原创 map() 方法实现 “对象数组” 和 “由对象数组中的某属性组成的数组” 之间互相转化
需求：有一个带选择框的人员记录表格，我需要将所有被选择的人员的id数组作为参数，去调用接口。Table表格实现多选，手动添加一个el-table-column，设type属性为selection即可。在el-table标签内，添加@selection-change="handleColumnSelect"方法// 选择人员handleColumnSelect(val) { this.selectedPersonList = val }则可以获取到所有被选择的人员数组然
2022-03-03 16:46:07
690
原创 给Table表格单元格数据添加样式
需求：工作中需要做一个检查温度的表格列表页面，发热时status为1-异常，人员的状态和温度一栏呈现红色。于是我先去查看了 el-table 的组件参数说明Table表格选择使用cell-style改变单元格样式。:cell-style="changeCellStyle"直接绑定在el-table标签上,然后在方法中定义row或column的样式。这种做法比较冗余，后来发现可以直接添加slot-scope实现，代码如下：<el-table-column prop="st.
2022-02-25 15:44:32
2344
原创 vue实现搜索框和树形控件功能
input输入框组件参数说明：Input 输入框https://element.eleme.cn/#/zh-CN/component/inputInput 为受控组件，它总会显示 Vue 绑定值。通常情况下，应当处理input事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。 <el-input v-model="keyWord" :clear-icon-click="handleSearch" :on-ico...
2022-02-23 16:52:33
2768
原创 Vue中使用echarts弹窗报错：Error in callback for watcher “visible“: TypeError: Cannot read propert ‘xx‘ of...
前言：相关代码https://blog.csdn.net/KangMino/article/details/123015094问题：在写弹窗watch部分时，原本是这样写的watch: { visible(val) { this.showDialog = val if (val === true) { this.fetchDetail() } }, showDialog(val) { this.$emi
2022-02-21 10:30:11
4923
原创 在Vue中使用echarts弹窗
前言：需要做的效果是，点击一个事件，弹出弹窗，弹窗中显示柱状图。问题：我的做法是在index.vue文件中写点击事件，然后调用子组件./components/ProgressDialog.vue，并且在ProgressDialog中渲染echart。结果发现打开弹窗，图表效果并没有加载出来。原因：点击事件一触发，就会更改弹窗的visible状态为true，而此时弹窗里的内容还没有渲染到dom。解决方法：将echart内容写在一个子组件中，在ProgressDialog中调用，发现
2022-02-19 10:50:35
3476
原创 关于Promise经典面试题
JS的事件循环和任务队列：http://www.ruanyifeng.com/blog/2014/10/event-loop.htmlhttp://www.ruanyifeng.com/blog/2014/10/event-loop.html异步任务里面的微任务和宏任务：https://zhuanlan.zhihu.com/p/364020645https://zhuanlan.zhihu.com/p/364020645问题：setTimeout(() => { cons
2022-02-16 14:01:06
466
原创 本地代理联调配置
工具：Easy Proxy配置：项目名称随便写； 端口号自动生成； "target"是目标地址，地址写演示平台的地址； "headers"是请求头，其中Referer和Host写演示平台的地址，Cookie的JSEEIONED就是演示平台登陆后请求业务api时携带的值。举例：{ // 目标地址 "target": "https://10.10.10.10", // 支持多个目标代理，若没有匹配，则退回到t...
2022-02-16 11:08:12
916
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人