- 博客(33)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 表格排序sortable
在 Vue Element UI 的表格中，如果你想要对等级（或其他非数字字段）进行排序，并且这些等级是以字符串形式存储的（如 “A”, “B”, “C” 等），那么默认的排序可能不会按照你期望的等级顺序来执行。当用户点击列标题进行排序时，你可以向服务器发送一个包含排序字段和排序方向的请求，然后服务器会返回排序后的数据。对于自定义在这里插入代码片的等级排序，你需要手动处理排序逻辑。你可以为 el-table-column 添加一个 sort-method 属性，这个属性接收一个函数，用于定义你的排序逻辑。
2024-09-05 17:02:16
701
原创 js如何通过数组中相同的元素12来将原始数组[‘12‘,‘13‘,‘12‘,‘14‘, ‘12‘,‘23‘,‘24‘]返回以相同元素12开头的3个新数组[‘12‘, ‘13‘], [‘12‘, ‘14
在reduce方法的回调函数中，我们检查当前元素是否以12开头，如果是，则将其添加到当前子数组中；如果不是，则将当前子数组添加到最终结果数组中，并创建一个新的子数组来存储下一个以12开头的元素。方法来实现这个功能。这个方法可以将数组中的元素逐个处理，并根据需要将它们放入一个新的数组中。，我们返回存储结果的数组，即包含以相同元素12开头的子数组的数组。方法遍历原始数组，将相同元素12开头的子数组放入新数组中。，我们将这些子数组放入一个新的数组中，以便返回结果。，我们需要创建一个空数组来存储最终的结果。
2024-03-01 14:49:29
461
原创 Vue Element表单中的label文字均匀占满显示
在Vue组件中，设置label-width属性为一个较大的值，以确保label的宽度足够容纳文字。这样，label文字将会均匀分布在整个label宽度内，实现文字占满显示的效果。在CSS样式中，使用text-align: justify来实现文字均匀分布。要让Vue Element表单中的label文字均匀占满显示。如果要全局应用这个样式，将上面的css代码复制到。
2023-11-22 17:00:24
791
原创 vue中的echarts对象绑定click事件无法调用vue的实例对象
点击事件获取不到refName?方案一：function改为箭头函数方案二：var that = this;this代表的是当前对象,var that=this就是将当前的this对象复制一份到that变量中。当this对象改变的时候，that指向的还是当时的对象。echarts事件与行为...
2022-07-04 10:39:17
1045
原创 vue Elementui Timeline 时间线(右)
<el-timeline :reverse="reverse"> <el-timeline-item v-for="(item, index) in warnList" :key="index"> <div class="photo"></div> <div class="timestamp"> <span class="message-label">时间：
2022-06-30 11:30:51
1185
原创 timeline(左右结构)
<el-timeline> <el-timeline-item v-for="(item, i) in timeLineFilterData" :key="i" :timestamp="item.createdTime" placement="top">
2022-06-30 11:28:29
1759
原创 vue Swiper(附例子)
安装依赖npm install swiper@6 --save-devnpm i vue-awesome-swiper@3.1.3 -Spackage.json查看确认main.js全局引入//swiperimport VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/swiper-bundle.css'Vue.use(VueAwesomeSwiper)页面运用点击左右按钮切换<div class="ce
2022-03-04 11:22:38
649
原创 大屏左右下载入的动画
@keyframes leftAnimation { 0% { transform: translate(-100%, 0); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; }}@keyframes rightAnimation { 0% { transform: translate(100%, 0);
2022-02-28 15:12:28
116
原创 vue中使用lang = “scss“报错
①npm install sass-loader@7.3.1 --save-dev②npm install node-sass --save安装node-sass报错安装不了，使用淘宝镜像安装cnpm install node-sass --save③npm install style-loader --save④在build/webpack.base.config.js中添加：{ test: /\.scss$/, loaders: ['style', 'css',
2021-12-15 10:28:13
1006
1
原创 隔行变色的echarts图
var xdata = ['2020-1-2', '2020-1-2', '2020-1-2', '2020-1-2', '2020-1-2', '2020-1-2', '2020-1-2'] var data = [70, 60, 80, 70, 60, 80, 50] option = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示...
2021-12-13 09:55:24
829
原创 大屏右上角的年月日时分秒
methods：{currentTime() { setInterval(this.formatDate, 500) }, formatDate() { const date = new Date() const year = date.getFullYear() // 年 const month = date.getMonth() + 1 // 月 const day = date.getDate() // 日 c
2021-11-25 10:36:30
790
原创 按设计稿一比一开发且自适应屏幕
①安装less loadercnpm install less less-loader --save-dev在build目录下的webpack.base.conf.js 下配置loader{ test: /\.less$/, loader: "style-loader!css-loader!less-loader",}②安装lib-flexible插件cnpm i lib-flexible --savemain.js 里 引入 lib-flexible对flexibl
2021-11-12 14:43:32
330
原创 echarts图表动态显示数据
<script> var xData = (function () { var data = ['ZBFX', '治安重点', '人口重点', '刑释解教', '信访人员'] return data })() var ydata1 = [], ydata2 = [], ydata3 = [] var zdrykl = echarts.i
2021-10-27 09:57:02
677
原创 webstorm编辑less文件自动保存生成css文件
一：//全局安装less npm install -g less二：点击“file(文件)”> “settings（设置）……” 弹出设置界面，在左侧导航找到“tool（工具）">“file Watchers” 点击“+”号按钮找到less文件选项点击添加。（点击确认后稍等一会儿，等他应用）三：最后随便编辑一个less文件，会自动生成以下...
2021-10-12 09:14:21
1066
原创 仪表盘echarts图（附图与代码）
var datas = { value: 82, title: "任务完成占比", type: 1, radiusType: 1};let startAngle=180,endAngle=0;var fontColor = "#00f6f7";var seriesName = "";let noramlSize = 16;let state = "";let center = ["50%", "55%"];let wqradius = 0, nqra
2021-10-12 08:40:06
1524
1
原创 HTML滚动条样式修改
.newsPart::-webkit-scrollbar { /*滚动条整体样式*/ width : 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.newsPart::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 10px; background-color: rgba(3 ,91 ,203 ,0.5); background-image: -web
2021-09-23 08:37:20
898
原创 elementui（el-date-picker）日期选择器的日历样式修改
/日历样式----------------------------------------------------------/.selfDate {background-color: #08294c !important;color: #61b7ff;border: 1px solid #85e9fc;.el-picker-panel__sidebar { background-color: #08294c !important; border: 1px solid #85e9fc;
2021-09-03 14:05:11
1454
原创 elementUI的form表单样式
/*form表单的样式*/ /deep/ .demo-form-inline { height: 30px; line-height: 30px; margin-left: 43px; //label样式 .el-form-item__label { color: #D0E9FF; font-size: 14px; line-height: 30px; } //输入框样式 .el-input__inne
2021-09-03 14:05:00
1799
原创 弹窗嵌套表格（表格可点击展开收起）
<template> <div> <el-dialog :visible.sync="dialogDetailInfo.show" width="48%" class="setDialog" :destroy-on-close="true" :modal-append-to-body="false" @close="closeDialog" > <div clas
2021-09-03 14:04:49
519
原创 vue实现展开收起
<template> <div class="select-box"> <div class="select-box-top"> <label>项目名称</label> <span v-if="isShowNameType" @click="handleIsShowNameType">展开</span> <span v-if="!isShowNameType" @clic
2021-09-03 14:04:26
248
原创 前端学习问题整理
1.vue插件eslint报错解决：找到build->webpack.base.config.js。注释或者去掉对eslint-loader的引用。2.实现禁止选中文字解决： div{ -moz-user-select:none; -webkit-user-select:none; user-select:none; } 3.Vue项目封装请求数据的接口总结一、配置url（能够放在一个js中）前端1.引入axios：import axios from “axi
2021-07-18 13:50:09
377
原创 前端学习笔记
uniapp横向滚动<template> <view class="content"> <scroll-view scroll-x="true" class="scroll"> <view class="box"> <image src="http://b-ssl.duitang.com/uploads/item/201703/01/20170301163305_...
2021-07-18 13:16:44
83
原创 win7电脑一开机就弹出“便筏已损坏”的解决办法
1.按照百度上的办法解决，先在磁盘右上角搜索InkObj.dll2.将InkObj.dll复制粘贴到C:\Windows\System32\文件夹下3.以管理员身份运行cmd,并执行命令regsvr32 C:\Windows\System32\inkobj.dll，回车Enter会弹出一个对话框到此问题应该就解决了。。。。but,如果你和我一样出现了问题或是你根本就搜不到inkobj.dll这个东西，你就可以看接下来我的解决办法我是在最后一步出现的问题，我..
2021-04-11 19:06:19
2822
原创 前端学习笔记
自学期间遇到的问题：1.在运行Vue项目时报错error 'scope' is defined but never used vue/no-unused-varsslot-scope="scope"改为slot-scope ="{}"2.搜索栏和表格绑定<el-tablestripestyle="width:100%":data="tableData.filter(data=>!search||data.bm.toLowerCase().inclu...
2021-04-11 12:44:17
222
原创 JavaScript学习笔记
JavaScript代码段的三种书写位置1.行内式（代码段在body内）<input style="button" value="点我" onclick="alert('hello js!')">2.内嵌（代码在head内）<script>alert("hello js!");</script>3.外部（代码在head内）首先新建一个以js为后缀的eg.js文件，并在其内部写下代码alert('hello js!')然后在HTML
2021-03-20 22:57:48
130
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人