草庐IT

Vue-Instant

全部标签

前端实现输入框实时搜索,【vue+el-input】

一般搜索都是调后端的接口,绑searchValue字段(也有可能叫其他的字段名),通过后端的接口进行实时搜索如果由前端自己实现搜索过滤的话也简单1、input事件el-inputv-model="queryParams.searchValue"@input="keywordChange($event)"clearablestyle="width:180px"/>2、绑数据源的时候,根据条件判断用过滤数组还是原数组el-tableref="elTable"class="mblclass"border:data="filterList.length?filterList:datalist"styl

Pycharm中开发vue element项目时eslint的安装和使用

在PyCharm中使用ESLint对ElementUI进行语法检查和代码风格检查的配置步骤如下:确保你的项目已经配置了ESLint并且可以正常运行。如果尚未安装ESLint,请先使用npm(或者你的包管理器)在项目中安装ESLint:npminstalleslint--save-dev在项目根目录下创建一个名为.eslintrc.js(或.eslintrc.json)的文件,用于配置ESLint。以下是一个简单的配置示例:module.exports={root:true,env:{node:true,browser:true,},extends:['plugin:vue/essential'

记录-Vue移动端日历设计与实现

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助工作中遇到一个需求是根据日历查看某一天/某一周/某一月的睡眠报告,但是找了好多日历组件都不是很符合需求,只好自己手写一个日历组件,顺便记录一下。先看看UI给的设计图和,需求是有数据的日期做标记,可以查看某一周/某一月的数据,周数据不用自定义,就按照日历上的周数据截取.实现效果1.规划dom部分区块划分2.页面实现选择月份和选择年份与日期做了条件渲染,切换方式是点击顶部时间切换选项{{date.join("/")}}{{item}}{{s.day}}{{k===1?"":"看周报"}}{{i}}月{{i}}代表有睡眠报告取消看月报css

vue-router3.x和vue-router4.x相互影响的问题记录

背景项目中有一个系统使用的微前端,主站使用是vue2实现的,使用的是vue-router3.x。子应用有使用vue3实现的,使用的为vue-router4.x。该子应用中的页面A有通过操作按钮触发跳转到其他子应用页面B的需求,此时使用的是vue-router4.x的编程式导航API。当通过点击主站的Tab切换回B的时候,使用的是主站的vue-router.3.x,到目前为止,都很正常。但再次通过A的按钮触发跳转到B时,就会出现http://xxxxxundefined路径,导致页面空白。分析通过一步步断点,追踪问题。第一次触发跳转时第二次触发跳转时当vue-router4.x进行导航时,会先从

vue uniapp 微信小程序 搜索下拉框 模糊搜索

vueuniapp微信小程序搜索下拉框模糊搜索话不多说直接贴代码template*维修人员{{item.user_name}}*车站编号{{item.station_id}}车站名称{{station_name}}车站地址{{station_address}}*维修内容{{item.name}}*车辆编号*车桩编号*详细描述取消确定scriptimportTarofrom"@tarojs/taro";exportdefault{data(){return{input_list:[{user_name:"acc",id:1,station_id:"1",station_name:"温岭市第1车站

Vue+element-UI实现树形表格(全选、取消功能)

 效果图:代码部分:      ref="multipleTable"   :data="listTreeData"   style="width:100%;margin-bottom:20px"   row-key="id"   border   default-expand-all   :tree-props="{    children:'children'   }"  >            全选           v-model="selecteds"      style="padding-left:10px"      @change="checkAllIn(scope)" 

【WebStorm 启动vue项目报错,错误代码:1080 throw err】

WebStorm启动vue项目报错,错误代码:1080throwerr报错代码解决办法报错代码node:internal/modules/cjs/loader:1080throwerr;^Error:Cannotfindmodule'../package.json'Requirestack:-/Users/mike/WebstormProjects/vue-qms/node_modules/.bin/vue-cli-serviceatModule._resolveFilename(node:internal/modules/cjs/loader:1077:15)atModule._load(n

vue项目打包_以生产环境prod模式打包_vue-cli-service 不是内部或外部命令,也不是可运行的程序---vue工作笔记0025

打开命令行:首先执行npminstall 不执行会报错: npmrunbuild:prod--scripts-prepend-node-path=auto然后再这样执行就是以生产环境模式打包了.

vue3.0 + ts 引入详细步骤及语法校验报错解决办法

一、前言前段时间学习了ts,于是用脚手架搭了个vue3.0+ts的项目,引入详细步骤及语法校验报错解决办法,整理下遇到的问题以及解决办法,分享给大家。二、使用1.引入tsQ:在vue项目中编写tsx函数式组件提示报错。在没有引入ts的项目中,写tsx语法提示报错。无法使用JSX,除非提供了“–jsx”标志。ts(17004)A:先检查是否安装ts,cmd输入tsc-v,显示了版本号即安装了ts;未安装则执行npminstall-gtypescript,全局安装ts;下载依赖包yarnaddtypescript@vue/cli-plugin-typescript;添加tsconfig.json配