vue
程序媛na
这个作者很懒,什么都没留下…
展开
-
vue中class变换颜色
vue根据接口返回的值切换底图原创 2022-07-01 15:18:34 · 660 阅读 · 1 评论 -
div设置选定状态
div模拟按钮选定状态原创 2022-04-26 16:30:53 · 1191 阅读 · 0 评论 -
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 · 4243 阅读 · 0 评论 -
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 阅读 · 0 评论 -
日历组件签卡
使用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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 1608 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 4815 阅读 · 0 评论 -
双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 阅读 · 0 评论 -
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 · 5499 阅读 · 3 评论 -
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 阅读 · 0 评论 -
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 · 1434 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 1548 阅读 · 0 评论 -
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 · 3592 阅读 · 4 评论 -
根据时间筛选表格数据
HTML: <el-date-picker v-model="ruleForm.salarydate" type="month" value-format="yyyy-MM" placeholder="选择月" @change="getTableLabel" .原创 2021-10-13 10:40:23 · 170 阅读 · 0 评论 -
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 · 1588 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 评论 -
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 · 931 阅读 · 0 评论