- 博客(27)
- 收藏
- 关注
RSS订阅原创 vue设置前端显示的时间格式为yyyy-mm-dd
1、在utils/index.js中设置时间格式import Vue from 'vue'/** * Parse the time to string * @param {(Object|string|number)} time */export function parseTime(time, cFormat) { if (arguments.length === 0 || !time) { return null } const format = cFormat ||
2022-01-05 10:43:42
4240
原创 css从入门到精通
目录1、转义字符2、mete标签3、元素类型1、块元素（block element）和行内元素（inline element）4、css引入方式1、链接式2、行内样式3、内联式5、选择器1、元素选择器2、类选择器3、ID选择器4、属性选择器5、通配选择器选择所有元素6、交集选择器7、并集选择器8、关系选择器9、伪类选择器10、伪元素选择器11、样式的继承6、选择器权重1、样式的冲突2、选择器的权重...
2021-11-15 16:36:39
1655
原创 element 日期选择器 选择时间范围在一个年内
HTML中：<el-date-picker type="daterange" unlink-panels value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>data中：data() { ..
2021-11-12 15:29:50
930
原创 vue下拉框筛选表格数据
html中： //下拉框 <el-form-item label="选择区域"> <el-select v-model="chick" clearable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label"
2021-10-24 14:02:04
7600
1
原创 vue.js 根据条件筛选数据存入数组
接口返回数组： getList(){ //queryparam查询参数 this.queryparam.userId = this.$store.state.user.userid; if (this.queryparam.userId != null) { listPersonIncome(this.queryparam).then((response) => { //查询结果personIncomeList this.
2021-10-24 13:34:24
682
原创 element日期选择器筛选表格数据
当进入页面时可以自动选定当前年月HTML：<template> <div class="app-container"> <el-form > <el-form-item label="选择月份"> <div class="block"> <el-date-picker v-model="selectofearmonth"
2021-10-18 15:00:08
1587
原创 根据时间筛选表格数据
HTML： <el-date-picker v-model="ruleForm.salarydate" type="month" value-format="yyyy-MM" placeholder="选择月" @change="getTableLabel" .
2021-10-13 10:40:23
169
原创 el-table动态列筛选2种（1、普通多选框，2、树形穿梭框筛选）
在用列表展示数据时，出现了很多项信息需要展示导致表格横向特别长，展示就不够明晰，这就需要对列进行动态筛选。HTML：<template> <div style="padding:20px"> <el-popover placement="right" title="列筛选" trigger="click" width="420" style="float: left;"> <el-checkbox-group v-model="ch
2021-10-08 13:58:19
3585
4
原创 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码，设置一个父div类名为boxFather，再设置一个子div类名为box1。html代码如下：<div class="boxFather"> <div class="box1"></div></div>下面使用div盒子里面要有内容撑开，html代码如下：<div class="boxFather"> <div class="box1"> 测
2021-09-26 11:44:21
700
原创 vue中使用ECharts实现折线图和饼图
在开发后台管理项目时，需要统计后台用户数据，以折线图和饼图的形式显示，这边采用apache-echarts来实现需求。1.安装echarts和引入npm install echarts --saveimport * as echarts from 'echarts';2.使用echarts实现pie图<template> <div id="chartPie" class="pie-wrap"></div></template>
2021-09-26 11:32:16
1547
原创 v-for循环遍历方式
1.v-for循环普通数组 item是自定义名称， in后面加的是 list这个普通数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <script src="../js/vue.js"></script> &...
2021-09-26 10:05:08
1601
原创 vue修改密码页面
<template> <el-form class="login-box1" ref="loginForm" :model="loginForm" :rules="rules" label-width="100px" > <h3 class="login-title">修改密码</h3> <el-form-item label="原密码" prop="oldpassword"> .
2021-09-26 09:39:37
4797
原创 vue组件间通信、数据传递（父子组件，同级组件）
一、组件目录结构父组件：app.vue 子组件：page1.vue 子组件：page2.vue父组件 app.vue<template> <div id="app"> <p>请输入单价: <input type="text" v-model="price"></p> <page1 :price="price" @downPrice="downPrice"></page1> <
2021-09-26 09:29:02
413
原创 element下拉框搜索列表数据
<el-form-item label="发薪月份"> <el-date-picker clearable size="small" v-model="queryParams.salarymonth" type="month" value-format="yyyy-MM" placeholder="请选择发薪月份" @change="getList" ...
2021-09-23 11:15:01
218
原创 el-table表头的问号提示
vue: <el-table-column label="请假天数" align="center" prop="atteLeaveDays" :render-header="atteLeavetooltip" />medthods: atteLeavetooltip(h, { column, $index }) { return [ column.label,.
2021-09-18 15:44:41
1118
原创 vue中el-table翻页序号连续+表格合计
遇到问题分页后数据的排序是不连续的解决方式：<el-table-column type="index" align="center" :index="table_index" //这里绑定一个方法，将返回值赋给index,即表格每行数据的下标 ></el-table-column>methods: { table_index(index){ return (this.currentPage-1)
2021-09-09 14:23:36
1432
原创 日历组件签卡
使用element日历组件为基础，实现可以查看每天签卡记录<template> <div class="n-container"> <div style="padding: 40px"> <el-col :span="24"> <div class="title"> <div class="tpadding">我的考勤</div> <
2021-09-07 15:09:48
91
原创 双y轴组件echarts
<template> <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --> <div id="chartLine" class="line-wrap"></div></template><script>import * as echarts from "echarts";require("echarts/theme/shine"); //引入主题export default { data(.
2021-09-07 15:02:48
115
原创 el-table-column 表格数据保留两位小数
methods: { rounding(row,column) { return parseFloat(row[column.property]).toFixed(2) },}, <el-table :data="dept_atteList" > <el-table-column label="序号" type="index" /> <el-table-column label="应出勤天数" ali...
2021-09-05 17:50:26
5491
3
原创 vue时间默认为当前时间年月日
1.html部分<el-form-item label="录入时间：" prop="recordTime"> <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="ruleForm.recordTime" style="width: 100%;"></el-date-picker></el-form-item>2.js部分d
2021-08-31 15:29:24
3669
原创 vue循环渲染element-ui中table内容
当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。相当于是要枚举出所有需要展示的参数，这种情况在参数比较少的情况下是比较方便的，但是在有很多数据或者参数不确定的情况下，这种枚举的方式就不太适合了。<template> <el-table :data="tableData" style="width: 10
2021-08-31 14:55:52
4880
原创 css两个table对齐
1、两个<table>表格宽度不对齐，只要数据有变化就会出现各种不对其的现象。解决方法是将<table>的table-layout样式设置成fixed;，进行固定表格布局，它仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。table-layout样式默认的样式是auto;，列的宽度是由列单元格中没有折行的最宽的内容设定的。<table>标签的css样式：table{ table-layout:fixed;}...
2021-08-28 17:24:03
3124
原创 去除elementUI＜el-table＞表格线
表格去除boder后还是有表格线这就需要其他操作1、表格结构：在表格外层包一层自定义的class，利用三箭头深度修改2、去除表格线.my_table >>> .el-table__row>td{ /* 去除表格线 */ border: none;}结果：3、去除上边框：.my_table >>> .el-table th.is-leaf { /* 去除上边框 */ border: none;}...
2021-08-27 14:34:16
5444
3
原创 elementUI去＜el-input＞边框
1、第一种方法：<style>/* 三种方法选择自己喜欢的一个即可 *//* .el-input--prefix .el-input__inner{ border: none;} *//* .el-input--small .el-input__inner { border: none;} */.el-input__inner{ border: none;}</style>缺点是style不能加scoped，这就改成了全局样式。2、第二
2021-08-25 14:52:07
7836
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人