- 博客(55)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 前端面试题（二）
1.vue项目是打包成一个js文件，一个css文件，还是多个文件根据vue-cli脚手架规范，一个js文件，一个cs文件2.简述ajax原理AJAX全称(Async Javascript and XML)，即异步的JavaScript 和XML是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面
2022-05-12 16:28:47
134
原创 前端面试题整理（持续更新）
以下面试题都是我最近遇到的，答案可能不详细，可以自行去搜索理解，我只写出了大概1.vue项目中父子组件怎么传值？ 1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系 2、组件传值-父组件向子组件传值 3、组件传值-父组件把方法传递给子组件 4、组件传值-子组件通过事件调用向父组件传值 5、父子组件之间相互传值2.active-class 是哪个组件的属性？ active-class是vue-router模块的router-link组件中...
2022-03-11 17:19:40
481
原创 vue项目使用ajax
<el-button type="primary" icon="el-icon-plus" size="small" @click="openadd()">新增</el-button> $.extend({//ajax全局调用 jsonAjax: function (options, callbackSuc, callbackErr) { options = $.extend(options, {"_r": Math.random()}); .
2022-02-28 13:57:48
2721
原创 jq点击按钮切换页面(例子用底部导航栏)
<div id="content"></div><footer class="footer1 ft1"> <a data-href="head.html" class="col-xs-3 active"> <div class="icon2"> </div> <span> 首页 </span> </a> <a da.
2022-01-21 14:46:59
588
原创 关于微信小程序的web-view的一些使用
1.web-view：个人类型小程序不支持，因此在小程序>开发管理>开发设置中也不会出现业务域名的配置个人类型的微信小程序不出现2.配置业务域名将下载后的校验文件放置域名根目录，慢的话大概一两个小时，快的话大概几分钟就可以验证成功配置过程中需要注意几个点（踩过几个坑）3.配置好业务域名后就引用web-view（src可以直接写或者通过js方式引入）4.保存后即可看到效果（注：若地址未配置成功或有其他问题，则可通过...
2022-01-17 10:35:40
1676
原创 微信小程序引入vant Weapp
1.微信小程序的内置终端用不了，只能使用外部终端点击微信开发者工具>视图>命令面板（或者Ctrl+Shift+Alt+P）打开外部终端或者直接Ctrl+Shift+C直接打开2.打开命令行后，输入npm init3.输入npm i @vant/weapp -S --production下载完成后，项目中出现4.构建npm出现这个弹窗即为成功构建看vant官方文档还需要加入这一步5.引入vant Weapp（示例引入b...
2022-01-17 10:03:29
592
原创 element-ui表格相关内容及功能
<template> <div class="user_content"> <div class="user_add"> <el-button type="primary" plain @click="dialogFormVisible = true" >新增用户</el-button > </div> <el-table//分页功能必须加的内容 .
2021-11-10 11:26:50
253
1
原创 jq动态加载，滚动表格
<div class="rent f-fl mr0" style="padding: 0px;"> <div class="news-lst alarm-lst task-lst alarm-head"> <ul style="overflow: hidden;"> <li> <a href="javascript:void(0);" class="f-toe"> &.
2021-11-10 10:50:24
120
原创 layui表格：表格渲染，增删改功能
<table id="groupTable" lay-filter="group"></table>//初始化表格initTable() function initTable() { $.ajax({ type: "get", contentType: 'application/json', dataType: "json", url: "json/device.json", async: false, success: func.
2021-11-03 14:01:31
128
原创 echarts出现宽度变成100px的情景及解决方案
1.tab页切换echarts图表时图表变形var charts=new Array();myChart.setOption(option);charts.push(myChart);//普遍的tab切换 $(window).resize(function() { for(var i = 0; i < charts.length; i++) { charts[i].resize(); }
2021-11-02 15:43:52
477
原创 xm-select树形下拉框渲染，取值，赋值
//下拉树渲染<div id="demo3" class="xm-select-demo" style="width: 300px;"></div> <script> var demo3 = xmSelect.render({ el: '#demo3', model: { label: { type: 'text' } }, radio: true, clickClose: t.
2021-11-02 15:23:37
2248
原创 jq&&ztree树形下拉框
//样式自行定义<input id="orgName" class="org-select u-input input5" onclick="showTree()" readonly> <!-- 模拟select点击框 以及option的text值显示--> <i class="trg" style="position: absolute;"></i> <!-- 模拟select右侧倒三角 --> <input id="or.
2021-10-08 14:32:54
648
原创 jq显示隐藏内容
1.更多条件及收起<div><a id="key" style="width: 10%;float: left;color:rgba(161, 205, 255, 0.9);padding:20px"><i class="fa fa-angle-double-down"></i>更多条件</a></div><div class="search_content">kkk</div><s
2021-10-08 14:24:47
28
原创 datatable+bootstrap-multiselect:列的显示隐藏
//列出表格的所有字段<select class="example u-input" multiple="multiple" style="width: 150px;" id="visible"> <option value="0" selected="selected">选择框</option> <option value="1" selected="selected">序号</option> <.
2021-09-23 10:40:46
163
原创 bootstrap-table：列的显示与隐藏以及动态加载列(自定义加载表头)
var head_data = []// 初始化表格 getColumns() function getColumns() { // 加载动态表格 $.ajax({ url: "json/head.json", type: 'get', dataType: "json", async: false, success: function(data) { head_data = data var options = { ...
2021-09-23 10:32:23
1668
原创 js-ip地址池
<div class="ip_spread" style="margin-top: 20px;"> <div> <div style="float: left;"> <span class="gray"></span> <span class="btn_text">未占线</span> </div> <div.
2021-09-23 10:20:02
57
原创 js字符串拼接合成一段话或者一个模板封装
1. 拼接一段话function mean_sum(id,title,state){ var html="" for(var i=0;i<state.length;i++){ sum=state[i].iPActiveCount+state[i].offlineIPCount; percent=(state[i].iPActiveCount/sum*100).toFixed(0)+"%" html=state[i].ips+"共有网段"+state[i].port+"个，其中终端
2021-06-28 14:21:48
194
原创 js表格封装
//资产在线情况表格封装! function(global, factory) { global.Tableone = factory(); //标准模式}(this, function() { return function(json) { /*定义变量，利用json参数引用html定义的值*/ tableId = json.tableId, theader = json.theader, style = json.style, data = json.data;..
2021-06-28 13:56:27
185
原创 echarts饼状图随机颜色
第一种：随机颜色 color: function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; },第二种：在颜色范围内随机itemStyle: { normal: { color: f.
2021-06-15 15:40:31
1628
4
原创 echarts图表切换数据且导出excel
zuizho<script src="js/jquery.table2excel.js"></script>
2021-06-11 11:32:23
199
1
原创 js生成excel表格并下载
<button id="" type="button" class="u-btn normal importBtn" ><i class="fa fa-plus"></i> 导出</button>
2021-05-28 14:22:21
652
4
原创 vue-ip地址池
<div class="ip_spread"> <div v-for="(item, index) in rowData" :key="index" class="row"> <div class="label">{{ item[0] }}</div> <div class="content"> <div v-for="(sitem,
2021-05-18 14:44:08
62
原创 vue3-element-plus项目可能会用到的一些组件封装
1.关于图片+文字的封装<el-col :span="8" v-for="(item, index) in main_title" :key="index" class="main_title" > <img :src="require('../assets/image/icon/' + item.img + '.png')" class="img"
2021-05-13 10:32:29
1090
原创 vue或原生js-动态实时日期
vue<span class="time">{{ date }}</span><script>export default { data() { return { date: "", } } mounted() { this.Timer(); }, methods: { Timer() { var timerID = setInterval(this.updateTime, 1
2021-05-13 09:55:17
49
原创 echarts-3D柱状图
第一种<div id="pie" style=“height:200px”></div> // 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('pie'));var xData = ["UPS", "主机", "存储","网络设备"];var yData = [13,10,9,5];var option = { "grid": {
2021-05-13 09:44:29
455
原创 关于bootstrap和datatable
1.datatable的单个复选框以及bootstrap的模态框按钮是否禁用<button id="move_btn" type="button" class="u-btn normal mr0" style="margin-left:10px;" data-toggle="modal" > <i class="fa fa-edit"></i> 批量移动 </button>只能选中一个
2021-05-10 19:19:08
257
原创 datatable的全选和单个复选框
<table id="device-all-table" class="m-table t-striped table-hide"> <thead> <tr> <th class="" style="width: 5%;"> <label for="checkbox30" class="m-checkbox w
2021-05-10 19:09:36
226
原创 vue表格增删改操作
<el-dialog title="新增IP类型" v-model="dialogFormVisible" width="30%"> <el-form :model="form"> <el-form-item label="类型" :label-width="formLabelWidth"> <el-input v-model="form.type"></el-input> </el-for..
2021-04-30 16:09:49
124
3
原创 ajax动态赋值echarts饼状图
<div class="panel-body " id="edition" style="height: 200px;"></div>var Chartedition = echarts.init(document.getElementById('edition')); var option = { color: ['#0769CB', '#00ABBD','#ffd886'], tooltip: { trigger: 'item', formatter:
2021-04-30 14:59:43
435
1
原创 项目过程中遇到的小问题
1.tab页切换echarts图表时图表变形var charts=new Array();myChart.setOption(option);charts.push(myChart);//普遍的tab切换 $(window).resize(function() { for(var i = 0; i < charts.length; i++) { charts[i].resize(); } }
2021-04-29 10:18:50
58
原创 vue3引入axios和mock获取本地数据
首页在src文件下新建文件axios.js内容import axios from 'axios'// import { ElMessage } from 'element-plus'// import router from '../router'import NProgress from 'nprogress'import 'nprogress/nprogress.css'axios.defaults.baseURL = process.env.NODE_ENV === 'product
2021-04-21 09:37:26
861
原创 uni-app学习笔记（一）
关于底部导航栏在page.json加入"tabBar": { "color": "#C0C4CC", "selectedColor": "rgb(0, 122, 255)", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index", // "iconPath": "static/tab-home.png", // "sele
2021-04-14 11:11:51
230
原创 vue+element的表格分页和多个搜索框功能
结合其他大佬的写法和自己的理解修改的<template> <div> <el-input v-model="tableDataName" placeholder="请输入姓名" ></el-input> <el-input v-model="tableDataPer" placeholder="请输入地址"></el-input> <el-button type="primary" @click="d
2021-03-30 13:46:20
968
原创 vue-element树形控件增删改
<el-button type="primary" icon="el-icon-plus" style="margin: 10px" v-show="treeData.length == 0" @click.enter="addParentLevelNode" >新增</el-button > <el-tree :data=
2021-03-09 11:44:51
786
1
原创 vue-element循环遍历加数据加图片
<el-col :span="4" v-for="(item, index) in main_title" :key="index" class="main_title"> <img :src="item.img" class="img"> <div> <p class="title">{{item.title}}</p> <p c
2021-03-04 11:07:55
806
1
原创 vue-element中表格加分页
<el-table :data=" tableData.slice( (currentPage - 1) * pageSize, currentPage * pageSize ) " style="width: 100%" > <el-table-column type="index" lab
2021-03-04 10:47:58
418
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人