- 博客(13)
- 收藏
- 关注
RSS订阅原创 海创软件组--20200531--统一各个内容高度的表格、element排序表格样式修改，ECharts数据动态更新并控制显示数量，vue修改路由刷新数据
这篇博客主要是来总结这两周的一点小难点。一：统一各个内容高度的表格头两天，做一个毕业生调查问卷的网页，需要的知识点也是挺多的，接下来就说说关于课程评价表格的编写吧。因为表格内容高度不一，所以要想办法统一高度！可点击链接具体参考我写的表格篇吧效果图：想做成这样的就继续看一下，不喜欢的可以直接看下一条。一开始做我是很抵触的，因为我觉得因为课程是遍历显示的，我不知道具体有多少课程，总高度会有多少，那么做左边数学高度居中就有点难度了。最后自己尝试用绝对定位加浮动去一点点改，没想到半个多小时还真让我一点点
2020-05-28 10:07:15
386
原创 element排序表格的自定义（固定表头，修改背景色，悬浮背景色，滚动条）
最近在做一个列表显示交通车流量的表格，采取的是element的排序表格，但其中样式要改很多很多，我大多数都是自己修改样式的，所以弄了很久，如今就贴一下代码出来吧。最终效果图：接下来我们就一部部来吧，对于排序表格的用法，你们打开官网就能直接用了，不多说：一开始的排序表格样子：表格内容居中且固定表头：固定表头只需要添加height就可以了，例如：height="217"内容居中只需要添加两行代码，而后定义对应函数返回样式即可 :cell-style="rowClass" :header-
2020-05-27 11:59:00
1139
原创 ECharts中的折线图动态更新数据并控制缩放只显示最新几条数据
最近在做实时车流量折线图，每个两秒我就请求一次获取最新数据，监听数据变化，重新绘制折线图，但数据多了，都堆积在一起了，后来通过设置dataZoom来进行缩放，但由于start，end值是百分比，一开始我写的是dataZoom ： [ { type: 'inside', realtime: true, start: 50, end:100, }]默认显示从全部数据的50%开始到100%的数据，数据一多，又开始堆积后来想了一个办法，既然是百分比控制显示数量，那
2020-05-26 14:31:07
3079
2
原创 修改当前路由地址栏并实现数据刷新
最近在做电商项目，有个搜索功能，输入商品名跳转到搜索界面显示对应商品信息，这时传参我是采用query传过去的，这方面没什么问题。但在搜索界面再次搜索就有点小问题了，因为路由是一样的，即使修改了query，也只是地址栏变了，而数据并不刷新！解决办法：监听路由！*注：我搜索界面路由名为searchShop，监听路由，看是否改变路由名为当前路由，若是则调用你初始化的方法进行数据刷新而界面不刷新！我初始化的操作都在init函数中，所以就调用它。watch:{ '$route' (to, from
2020-05-21 17:31:10
453
原创 解决做表格行内元素高度不一并使内容高度居中显示
最近在做一个学生评价课程的东西，需要做这么一个表格：一开始我是很抵触的，因为我觉得因为课程是遍历显示的，我不知道具体有多少课程，总高度会有多少，那么做右边数学高度居中就有点难度了。最后自己尝试用绝对定位加浮动去一点点改，没想到半个多小时还真让我一点点做出来了，哈哈。具体做法：子元素随父元素高度变化，用position: absolute;，这会导致右边的元素左移，这时你只需要给两边元素设置宽度，然后给右边来个右浮动，最后父元素清除浮动即可！具体代码实现：html：<div class="k
2020-05-20 01:27:17
413
原创 解决输入框autocomplete=off失效问题
不同的场景，对输入框有不同的需求，例如注册时输入框就不能自动填充浏览器记录的账号密码。这时我们第一个想到的就是给输入框加autocomplete="off"但我打开浏览器一看，输入框还是自动填充了。要解决也很简单，只需要将autocomplete="off"改为autocomplete="new-password"就可以了。效果图：...
2020-05-17 03:05:39
3349
原创 海创软件组--电商项目的总结
最近在做一个电商项目，前台大致功能模块可分为:用户模块：注册，登录，修改个人信息，重置密码商品模块：可按名字查询商品，按商品分类获取商品列表，查看商品详情购物车模块：商品加入购物车，可动态更改购物车的商品数量订单模块：订单预览，创建订单，查询订单列表，未付款的订单可以取消后台：商品分类管理：可修改，新增，删除订单管理：可按订单号进行查询，查看订单详情，已付款未发货可以进行发货操作商品管理：新增商品，商品下架，删除商品，修改商品用户模块：注册：注册分步进行，（1）填写账号和设置
2020-05-16 19:56:41
579
原创 Element树形懒加载表格，数据改变时刷新列表
话就不多说了，我直接上代码吧：首先用个给表格加ref标识<el-table :data="types" style="width: 100%" row-key="id" ref="myTable"每次更新数据后，要刷新列表，就调用loop：this.$set(表格，id，数据)例如：this.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, pare
2020-05-15 13:16:28
2643
原创 Vue使用jsmpeg拉流做视频直播
前端做视频直播有很多方法实现，可以通过video，video-player等等，接下来我就说说vue如何使用jsmpeg吧（前面介绍的都是我遇到的错误，可看可不看，切记看到最后的使用方法）最近用jsmpeg来接收数据做视频直播，一开始是一脸懵逼的，上网搜了一天多，全是直接上html的方法，例如这种：<!DOCTYPE html><html><head> <title>JSMpeg Stream Client</title> <s
2020-05-15 01:39:25
7630
8
原创 Element表格数据为空时自定义显示内容
前言：最近做一个电商项目，在购物车那需要用Element的表格来显示数据，但要是用户一开始购物车并无数据，element表格默认无数据显示是在太丑了，这时就需要我们自定义了…先看一下默认无数据显示吧：我后来自定义：代码实现：其实就是添加：<template slot="empty"> <img src="../../../assets/imgs/shop/car.svg" alt=""> <div class="noCart"> 购物
2020-05-10 12:43:19
13427
1
原创 vue使用Element UI 实现选取省市区三级联动地址
在做电商项目的时候需要添加修改收货地址，如何实现三级联动选取省市区地址困扰了我不少时间。难点：需要通过爬虫获取省市区数据。后来无意发现了element-china-area-data这个组件，哈哈，实现效果还可以呦。效果图：选取地址中：选好地址后显示：好了，各位肯定想知道如何获取数据吧？这就贴上代码吧：下载element-china-area-data：npm install element-china-area-data -S<template> <div
2020-05-09 14:39:35
6605
2
原创 行内元素高度不一时如何实现高度对齐？
我们编码的时候，总会遇到行内嵌套几个元素，要是这几个元素高度一致那就好办了，可要是高度不一致呢？如何使高度对齐使得界面更好看？就像下面该图一样，行内嵌套的span和textarea高度不一样，底部对齐布局就有点难看了，我想实现顶部对齐：那要怎么使他们顶部对齐呢？效果图：实现的方法主要大概有三种吧：absolute（绝对定位）不推荐：给行元素相对定位：position: relative;行内所有元素都开启绝对定位position: relative;并设置距离顶部为0top: 0;缺
2020-05-08 23:33:04
1746
原创 海创软件组-两周小结-video-vue-全屏-hover样式-css变量
写这篇博客来总结一下两周遇到的问题吧。一、视频组件由于往后的日子需要做一个交通管理系统，需要使用到视频播放器，所以花了点时间在视频组件上。视频播放器，我一般都是采用video.js和他的插件vue-video-player两种方式创建的。首先就先说一下如何使用video.js吧1：video.js需求：对于简单的视频播放需求来说，video.js足以胜任了。它可是支持HTML5和Fl...
2020-05-02 03:11:39
708
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人