Vue
Eggsy.Li
人们想改变世界,斯多亚主义者想改变自己!
展开
-
element-ui表格表头提示
1. 前言准备:element-uivue32. 代码实现html代码需要通过render-header进行渲染动态添加提示信息<el-table :data="list" stripe style="width: 100%"> <el-table-column prop="cameraX" label="坐标位置:X" :render-header="renderHeaderMethods"> </el-table-column>原创 2022-05-18 23:31:32 · 956 阅读 · 0 评论 -
element-ui表格编辑
前言:准备:element-uivue3vscode实现步骤:数据标定打开激活编辑保存1. 设定需要编辑的表格单元格是否编辑标识在请求后台表格数据时进行一个二次包装,如果后端已经处理则不需要在进行包装(此处包装是否编辑的标识为了区分显示编辑框和纯内容显示)以上述图片效果为例,需要对三个字段进行标识。标识数据JS代码:// 设备分组列表getList() { queryList().then((res) => { // 获取数据后通过forea原创 2022-05-18 23:14:07 · 19569 阅读 · 1 评论 -
vue-vuecli3.x中sass-loader使用data引入公用sass报错
1. 报错现象2. 首先检测是否未安装sass-loader插件如未安装先安装sass-loader插件/或者版本不合适npm uninstall --save-dev sass-loader // 卸载现有的sass-loadernpm install --save-dev sass-loader@8.0.2 // 安装版本可根据自己需求选择安装3. 修改vue.config.js原配置 // css 相关配置 css: { // 是否使用css分离插件原创 2021-09-08 12:20:14 · 567 阅读 · 0 评论 -
vue-vue4.X降级vue3.X
1.查看当前版本vue -V2. 卸载vue4.Xnpm uninstall -g @vue/cli如下图:测试是否卸载成功:3. 安装指定版本VUEnpm install -g @vue/cli@vue版本号(3.11.0)如下图:测试是否安装成功:原创 2021-09-08 10:49:03 · 1381 阅读 · 0 评论 -
vue-vue3跨域问题梳理
1. 跨域问题现象Access to XMLHttpRequest at 'http://127.0.0.1:9611/login' from origin 'http://localhost:6370' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on原创 2021-08-29 17:26:53 · 336 阅读 · 0 评论 -
vue- element-ui table复选框翻页记忆与清除
1. 前言在进行表格操作时,使用element-ui 表格控件时加入复选框后默认是无法进行翻页记忆的。2. 翻页记忆在进行复选框翻页记忆操作时需要在表格与复选框中分别添加,这个两个参数在翻页复选中必须添加,否则无效。:row-key="getRowKeys" // 获取每行的信息:reserve-selection="true" // 数据更新之后保留之前选中的数据// 获取row的key值的方法getRowKeys(row) { return row.id;},视频效果:原创 2021-04-17 12:10:37 · 12488 阅读 · 2 评论 -
vue-npm加载项目依赖报npm WARN deprecated问题
npm加载项目依赖报npm WARN deprecated问题1. 现象使用npm install命令进行项目依赖下载时报如下警告:2. 解决方式博主采用的是升级npm版本的方式1. 查看当前npm版本npm -v当前版本相对有点低,目前最新为7.9.0了2. 升级npm版本npm install -g npm -- 默认升级为最新版本3. 重新加载项目依赖通过升级npm,成功解决依赖无法下载问题。...原创 2021-04-11 00:03:36 · 98496 阅读 · 7 评论 -
Vue-列表选择样式切换
Vue-列表选择样式切换1.在data变量中添加一个变量用于存储点击的对象值将存储对象的初始参数设置为-1,为了防止动态遍历出来的列表的参数出现重复而被选定问题。data () { return { isChoose: -1, },2.添加列表html代码通过判断当前点击的列表对象获取id值来进行class切换,所以在click事件中的方法中需要传入id值。<div class="wms_info_structures_list" :class="isChoose原创 2020-11-19 10:09:33 · 1599 阅读 · 0 评论 -
vue-websocket的使用
问题描述在vue前端项目开发过程中需要实时显示部分数据,在通过多个处理方式中选择使用websocket来解决这个问题。解决方案vue单页代码export default { // 关闭页面时断开socket连接 beforeDestroy () { this.websocketclose() }, methods: { // 初始化websocket initWebsocket () { // getUrl()访问服务器获取ip地址方法 get原创 2020-05-24 10:22:49 · 1555 阅读 · 0 评论 -
vue-[Vue warn]: data functions should return an object
问题描述在创建相应的vue页面组件时,引入组件后运行测试即出现现象中的报错问题。如下问题时vue页面开发中常见的一个问题现象当前问题是指向headcard.vue组件解决方案在headcard.vue中添加return{}返回值在使用组件化的时候对应的组件中如果没有任何参数,也必须将retur{} 返回值加上。如果不加上则当前组件的数据会变成全局可视,则造成变量污染。加上return则组件数据只能当前组件可视,不会影响到其他组件export default{ data(){ retur原创 2020-05-21 19:17:05 · 13525 阅读 · 0 评论 -
vue-格式化时间
解决方案1.导入moment组件npm install moment save2.在vue页面中引入import moment from ‘moment’3.创建格式化时间的方法methods: { dateFormat: function (row, column) { var date = row[column.property] console.info(date)...原创 2020-04-05 15:06:08 · 346 阅读 · 0 评论 -
vue-element 计数器渲染问题
问题描述在表格中使用element-ui计数器功能时,出现增减按钮无效的情况,无法进行数据变化。后通过网上进行查询并找到解决方式。原因是由于操作后表格数据数组没有进行渲染操作。<el-table-column align="center" prop="levels" label="优先级" width="200"> <template slot-scope="s...原创 2020-04-05 15:03:21 · 1603 阅读 · 0 评论 -
vue-引入Bootswatch
前言:Bootswatch是一套基于bootstrap框架开发的一整套主题样式,刚好用于开发基于vue的个人Bolg的客户端,由于本人为后端开发对前端也是甚是苦恼,刚好可以用来弥补借鉴。(https://bootswatch.com/)引入:一:引入jQuerybootstrap的js插件是基于jQuery,bootswatch同时基于bootstrap所以jQuery必须要引...原创 2019-12-12 18:02:05 · 413 阅读 · 1 评论