vue获取tr内td里面所有内容_vue 项目学习

首先页面的整体内容结构以及package.json 里面的内容

843c246917e64a9f4d4dcfd6ceb355d1.png

029a8b891cc69067632cc34317add4b6.png
package.json
router.js   路由功能import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/login';Vue.use(Router)
let router = new Router({routes: [{path: '/',redirect: {name: 'Login'},},{path: '/Login',name: 'Login',mode: ['登陆'],component: Login,},{path: '/LightBox',name: 'LightBox',component: () =>import('@/LightBox'),children: [{path: 'LightOverview',name: 'LightOverview',mode: ['总览信息'],component: () =>import('@/LightOverview'),}, {path: 'LightSet',name: 'LightSet',mode: ['xx设置'],component: () =>import('@/LightSet'),}]},{path: '/*',name: 'error-404',meta: {title: '404-页面不存在'},component: () => import('@/components/error-page/404'),}]
});router.beforeEach((to, from, next) => {let menuTree = JSON.parse(sessionStorage.getItem('menuTree'));// console.log(from)// console.log(to)if (from.name == null || to.name == "Login") {next();} else {if (menuTree != null) {console.log(from)// if (from.meta[0] && from.meta[0] == 0) {next();// }else{// }} else {console.log('menuTree = null')next({path: '/Login'})}}
})export default router;reset.css/*** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)* http://cssreset.com*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {margin: 0;padding: 0;border: 0;font-size: 100%;font-weight: normal;vertical-align: baseline;box-sizing: border-box;
}/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {display: block;
}body {line-height: 1;
}blockquote,
q {quotes: none;
}blockquote:before,
blockquote:after,
q:before,
q:after {content: none;
}table {border-collapse: collapse;border-spacing: 0;
}/* custom */
a {color: #7e8c8d;text-decoration: none;-webkit-backface-visibility: hidden;
}li {list-style: none;
}button,
select {outline: none;border: none;
}::-webkit-scrollbar {width: 5px;height: 5px;
}::-webkit-scrollbar-track-piece {background-color: rgba(0, 0, 0, 0.2);-webkit-border-radius: 6px;
}::-webkit-scrollbar-thumb:vertical {height: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;
}::-webkit-scrollbar-thumb:horizontal {width: 5px;background-color: rgba(125, 125, 125, 0.7);-webkit-border-radius: 6px;
}html,
body {width: 100%;height: 100%;font-size: 12px;
}body {-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

封装axios 请求

reques.js

import axios from 'axios'// 创建axios实例
const service = axios.create({baseURL: '',timeout: 25000 // 请求超时时间
});
if (process.env.NODE_ENV === 'development') {service.baseURL = ''
} else {// 测试环境if (process.env.type === 'test') {console.log('测试环境')} else {}
}
// respone拦截器
service.interceptors.response.use(response => {/*** code为非200是抛错 可结合自己业务进行修改*/const res = response.data;return res},error => {return Promise.reject(error)}
)export default service

axiosFn.js (封装的ajax 请求)

import axios from './request.js'
import qs from 'qs';export function getAjax(url) {return new Promise((reslove, reject) => {axios.get(url).then(res => {reslove(res);}).catch(err => {reject(err)})})
}export function postAjax(url, params = {}) {return new Promise((reslove, reject) => {axios.post(url, qs.stringify(params), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {reslove(res);}).catch(err => {reject(err)})})
}
export function http(url, type, params = {}) {return new Promise((reslove, reject) => {axios({method: type,url: url,data: params}).then(res => {reslove(res)}).catch(err => {reject(err)})})
}

main.js中的内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill'
import Vue from 'vue'
// import Vuex from 'vuex'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/styles/common.scss'
import moment from "moment"
import $ from 'jquery'
import Echarts from 'echarts'
import Highcharts from 'highcharts';Vue.prototype.echarts = Echarts
Vue.prototype.Highcharts = Highcharts
Vue.use(Echarts)
Vue.use(Highcharts)// import store from './store/store'
import {getAjax,postAjax,http
} from './axios/axiosFn.js'Vue.config.productionTip = false
Vue.use(ElementUI);
// Vue.use(Vuex);
Vue.prototype.$moment = moment;
Vue.prototype.$gAjax = getAjax;
Vue.prototype.$pAjax = postAjax;
Vue.prototype.$http = http;/* eslint-disable no-new */
new Vue({el: '#app',router,// store,components: {App},template: '<App/>'
})

在其他页面调用封装的请求函数

this.$gAjax(`../static/getSysCustom.json`).then(res => {if (res.status == 1) {console.log('kkkkk)}})["catch"](() => {console.log('dddd')});

//备注:(1) moment .js 处理时间格式化

使用方法  _this.$moment(time).format("YYYY-MM-DD HH:mm:ss")

(2)、qs 的使用

ajax请求的get请求是通过URL传参的(以?和&符连接),而post大多是通过json传参的。

qs是一个库。里面的stringify方法可以将一个json对象直接转为(以?和&符连接的形式)。

在开发中,发送请求的入参大多是一个对象。在发送时,如果该请求为get请求,就需要对参数进行转化。使用该库,就可以自动转化,而不需要手动去拼接

(3)、vue 需要在行内引入背景图

<div class="isUse" :style="{background:'url(' + require('../assets/img/timeManage/'+(scope.row.tag==0?'off':'on')+'.png') + ') 52% 24% '}"></div>

下面这个文章都很不错 可以阅读

vue,elementUI,less,axios,qs的安装及打包

vue中使用axios发送请求 - 海大导航 - 博客园

vue,elementUI,less,axios,qs的安装及打包​www.jianshu.comvue中使用axios发送请求 - 海大导航 - 博客园​www.cnblogs.com
dec78d66ee4e10c59f09cb80e6f0919a.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ubuntu中解压rar文件遇到乱码的解决方法

如上图所示&#xff0c;在用ubuntu的时候经常会遇见rar压缩文件打开出现乱码&#xff0c;解压的时候也会出现无效的编码等错误。 解决方法是用 sudo apt-get remove rar 卸载rar 然后用 sudo apt-get instal unrar 安装unrar 然后就可以解决这个问题了。 个人理解rar是用来压缩…

kmeans中的k的含义_硬质合金中P、M、K、N、S、H六大字母含义详解

数控技术在线订单 | 技术 | 干货 | 社群关注可加入机械行业群&#xff01;关注P类:硬质合金中&#xff0c;P类产品的切削范围是指碳钢&#xff0c;铸钢&#xff0c;包括0.25-0.25%C淬火和调质&#xff0c;易切钢包含退火与淬火调质&#xff0c;低碳合金钢含金元素少于5%的范围&…

gitlab集成ldap用户后,禁用原来的账户体系进行拉取代码

gitlab在集成ldao用户后&#xff0c;经过测试&#xff0c;用户可以还可以通过原来的账号体系进行项目代码的拉取&#xff0c;需要把原来的账号体系的拉取功能关闭&#xff0c;使用ldap的账号体系进行工作开展。 方法如下&#xff1a; 在管理员-设置-通用-登录限制里把 Allow…

ffmpeg 分辨率 压缩_用GPU加速FFmpeg中的超分辨率功能

1. 简要回顾首先简单复述一下FFmpeg中对深度学习的支持情况&#xff0c;如上图所示&#xff0c;FFmpeg在libavfilter中支持基于深度学习的filter&#xff0c;目前已经支持sr, derain和dnn_processing等filter&#xff0c;其中&#xff0c;dnn_processing是一个通用的filter&…

mysql存储过程输入参数拆分_一文看懂mysql数据库存储过程、函数、视图、触发器、表...

概述抽空总结一下mysql的一些概念性内容&#xff0c;涉及存储过程、函数、视图、触发器等。一、查看存储过程、函数、视图、触发器、表1、存储过程select * from mysql.proc where typePROCEDURE;show procedure status; show create procedure proc_name; //存储过程定义2、函…

oracle vm发现无效设置_Oracle数据库编译失效对象相关命令总结大全,值得收藏

概述在日常数据库维护过程中&#xff0c;我们会发现数据库中一些对象(包Package、存储过程Procedure、函数Function、视图View、同义词.....)会失效,呈现无效状态(INVALID)。有时候需要定期检查数据库中存在哪些失效对象&#xff0c;对于存在异常的对象需要重新编译&#xff0c…

WCF-001:WCF的发布

随着“云”时代的到来&#xff0c;“云”已经无处不在了。什么是“云”&#xff0c;无非就是利用互联网强大的功能建立多个服务器&#xff0c;然后再利用互联网的传输数据的特点将数据从某个服务器中读取出来或者将你的数据上传上去。当然这个服务器不是一定就是传统意义的服务…

在线编辑_水墨-在线 Markdown 编辑器

水墨-在线 Markdown 编辑器基于 Spring-boot、FreeMarker、layui、Vditor 构建的一款在线 所见即所得的 Markdown 编辑器。水墨-在线 Markdown 编辑器。本人使用 Vditor 编辑器时日已久&#xff0c;眼看着其功能日益强大&#xff0c;特此基于 Vditor 构建一款 Web 编辑器&#…

退出出库复核是什么意思_细思极恐!为什么是黄晓明退出而不是李菲儿?因为女方是芒果艺人...

本文转载自&#xff1a;娱评人吴清功序言&#xff1a;《乘风破浪的姐姐》第二季即将接档《姐姐的爱乐之程》&#xff0c;于每周五晚上十点档播出。2021年1月5日&#xff0c;《乘风破浪的姐姐2》第一次公演举行&#xff0c;选手李菲儿和发起人黄晓明有亲密互动&#xff0c;李菲儿…

ie6 ie7下使用clear不能将浮动的元素换行问题

在主流浏览器中使用clear方法可以轻松完成浮动元素的换行。 例如&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.o…

传值类型_Java内存管理:Stackoverflow问答-Java是传值还是传引用(十一)

勿在流沙筑高台&#xff0c;出来混迟早要还的。做一个积极的人编码、改bug、提升自己我有一个乐园&#xff0c;面向编程&#xff0c;春暖花开&#xff01;本文导图&#xff1a;一、由一个提问引发的思考在Stack Overflow 看到这样一个问题&#xff1a;Is Java “pass-by-refere…

java位运算(转)

位移动运算符: <<表示左移, 左移一位表示原来的值乘2. 例如&#xff1a;3 <<2(3为int型) 1&#xff09;把3转换为二进制数字0000 0000 0000 0000 0000 0000 0000 0011&#xff0c; 2&#xff09;把该数字高位(左侧)的两个零移出&#xff0c;其他的数字都朝左平移2位…

可以批量转modis投影_SNAP批量处理Sentinel2数据

Sentinel-2数据以其高时空分辨率获得了越来越多的应用&#xff0c;然而由于Sentinel-2数据空间分辨率高&#xff0c;光谱分辨率高&#xff0c;数据量也较Landsat数据大幅上升。好在ESA SNAP软件批处理功能也很强大&#xff0c;可以支撑起大数据量的应用。下面就介绍一下如何使用…

struts2整合uploadify插件怎样传参数

关于uploadify3.1&#xff0c;先看下帮助文档中的有些知识。 其中有个onUploadStart方法&#xff0c;我们可以使用这个向后台传参。 下面举个例子&#xff0c; js&#xff1a; <script type"text/javascript">$(function () {$(#actpic).uploadify({debug: fal…

对齐方式有那些_Excel基础:开始菜单之对齐方式,那些被遗忘的实用功能

今天小编要分享的Excel基础系列文章是"第三区块-对齐方式"。对齐方式主要是出来文字的排版问题&#xff0c;对齐方式包含的所有功能下面思维导图已经列出来。大多数功能都是我们常用的&#xff0c;也是比较简单的&#xff0c;这些功能小编就不说了&#xff0c;小编来…

来自Java空间的传送门

变量是程序中存储数据的基本单元&#xff0c;在该存储空间中&#xff0c;存储的数据值可以改变。 通过变量名可以简单快速地找到它存储的数据 使用Java的过程中我们需要注意一些细节&#xff0c;那就是Java语言的规范性了&#xff0c;比如Java的变量命名&#xff1a; 1.标识符…

来及Java空间的传送门2

上一篇文章我们学习了Java的4种基本数据类型&#xff0c;今天我们就继续学习Java中的2种结构类型&#xff0c;分别是单分支结构&#xff0c;双分支结构和多重if结构 单分支结构&#xff1a;条件表达式的值必须为boolean类型 条件为true时执行if内的代码 双分支结构&#xff1…

redis value最大值_Redis 的 maxmemory 和 dbnum 默认值都是多少?对于最大值会有限制吗?...

一、Redis 的默认配置了解 Redis 的都知道&#xff0c;Redis 服务器状态有很多可配置的默认值。例如&#xff1a;数据库数量&#xff0c;最大可用内存&#xff0c;AOF 持久化相关配置和 RDB 持久化相关配置等等。我相信&#xff0c;关于 AOF 持久化和 RDB 持久化的配置大家都很…

实现页面适配_微信公众号文章页面适配深色模式

最近安卓微信7.0.10正式版发布&#xff0c;更新过后&#xff0c;很多用户发现&#xff0c;之前在测试版中对系统深色模式的适配功能被取消了&#xff0c;小伙伴们对此很是不满&#xff0c;好在Android 10系统手机用户占比很少&#xff0c;影响范围还不是很大&#xff0c;并且也…

iframe悬浮在html上_HTML Iframe

HTML Iframeiframe 用于在网页内显示网页。添加 iframe 的语法URL 指向隔离页面的位置。Iframe - 设置高度和宽度height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素&#xff0c;但也可以用百分比来设定(比如 "80%")。实例&#xff1a;html&…