真真的博客

element分页table回显与更改

获取日期

普通数组转树形数组

目录结构：api>>indiex.ts如下export * from './common'export * from './site-survey'export * from './engine-progress'export * from './project'其余内部文件里面ts为：import { getApi, postApi } from '@/composables/useApi'export const getDetail = async ({ id, nod

router文件下面的index.js:

作用：父组件向子组件传递内容，slot更像是一个出口类型：默认插槽 具名插槽 作用域插槽1.父组件向子组件传递内容index.vue父组件如下：: <children> <p>我是传递的内容</p> </children >children.vue:子组件接收 如下：： <template> <div> <h1>{{msg}}</h1> <slot>&

##再index.html中引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key值&plugin=AMap.MouseTool&plugin=AMap.Geocoder""></script> ##vue.config.js文件内：module.exports = { configureWebpack: (config) =

对象的扩展运算符let bar={a:1,b:2}let baz={...bar}上述方法实际等价于：let bar={a:1,b:2}let baz=Object.assign({},bar)Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。同样，如果

searchKeys(arr) { var str = ""; var list = []; for (var i = 0; i < arr.length; i++) { var hasRead = false; for (var k = 0; k < list.length; k++) { if (list[k] == arr[i]) { hasRead = true; ...

/** * 普通数组转树形数组 * @param {Array} data 需要转化的数组 * @param {String} topid 顶级的id值，一般为null 或'' * @param {String} pidKey 父节点的key值 * @param {String} idKey 子节点的key值 */export function arrayToTree(data, topid, pidKey, idKey) { let res = []; let pId = pidKe

element-UI中card卡片的使用：示例：可以通过template定义slot名称传入对应的dom结构

1.首先在src下面创建pages文件夹，里面新建page1和page2文件夹，page1和page2内新建对应的page1.vue,page1.jspage1.jsimport Vue from 'vue'import App from './page1.vue'// import router from './router'// import store from './store'Vue.config.productionTip = falsenew Vue({ // rout

npm install -g cnpm --registry=https://registry.npm.taobao.org

Vue中常用的数组方法.filter()、.map()、.forEach()、.find()、.findIndex()、.some()、.every().filter().map().forEach().find().findIndex().some().every().filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 是否改变原数组：否 是否对空数组进行检测：否 语法： const arr= [32, 33

main.js文件import Moment from 'moment'Vue.filter('formatDate', function(value) { return Moment(value).format('YYYY-MM-DD HH:mm:ss')})vue使用<span>{{timer|formateDate}}</span>

新建bus.jsimport Vue from 'vue';// 使用 Event Busconst bus = new Vue();export default bus;main.js中引入bus.jsimport bus from '../../utils/bus'Vue.prototype.$bus=bus;a.vue页面使用 this.$bus.$emit('updateOrders')//触发b.vue页面使用 this.$bus.$on('updateOrder

router文件新建router.js index.jsindex.js如下 import Vue from 'vue' import VueRouter from 'vue-router' import {router1,router2} from './routes' Vue.use(VueRouter) export const personCenterRouter = new VueRouter({ routes:router1 }) export const pers

export function getTimeObj(sj){ var now = new Date(sj); var year=now.getFullYear(); var month=now.getMonth()+1; var date=now.getDate(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds();

页面： <i :style="{color: getColor(item.status)}" ></i>数据：data(){ return{ colors: { complated: '#268cf0', danger: '#FEAA00', delay: '#FD4443', undo: '#E4E9EF' },}}方法：methods: getColor(

export default一个js文件只能有一个引用方式：import sevice from seviceexport在js文件可以有多个引用方式：import {getUser,getPro} from project

封装一个axios新建文件serve.jsimport axios from 'axios'import qs from 'qs'const instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: { Authorization:'', Content-Type:'application/x-www-form-urlencoded' }});

vue 普通input监听回车事件<input @keyup.enter="submit">

this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变statethis.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)commit: 同步操作

第一步安装npm install echartsLiquidfill --save第二步引入对应的vue文件：import echartsLiquidfill from 'echarts-liquidfill'<template> <div id='waveEchart' style="width:200px;height:200px;"></div></template><script>import echartsLiquidf

<template> <div style=""> <div> <p class="p1" v-if="chkValue!='0-0'">投产倒计时</p> </div> <ul class="ul1" v-if="chkValue!='0-0'"> <li> <span class="count"> <im

<template> <div>{{nowDate}}</div></template><script>export default {data() { return { nowDate: "", // 当前日期 }; }, mounted() { this.currentTime(); },methods: { currentTime() { setInterval(th

<template> <div> <i :class="{'rotate360':showAnimate}" @animationend="reset" class="icon-iconfontshuaxin"></i> </div></template><script>export default { data() { return { showAnimate:

object上方悬浮div并实现拖拽，云台控制等操作<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=10"/> <meta name="viewport" content="width=device-width,initial-scale=1"> <title&g

注意：1.在static目录下创建video.html2.必须安装2.2.1-win32版本的vlc插件3.vlc安装文件：链接：https://pan.baidu.com/s/1yQJ9SDh0YWw84yhXkLrMjQ提取码：zq9kcamera.vue页面： <template> <div> <a href="javascript:;" @click="yulan(record.videoUrl)">预览</a> </di

安装：npm install --save vue-video-player npm install --save videojs-flash<template> <section class="video-box"> <videoPlayer ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :play

option = { series: [ { type: "gauge", center: ["50%", "45%"], // 仪表位置 radius: "80%", //仪表大小 startAngle: 200, //开始角度 endAngle: -20, //结束角度

config下面的index.js文件内：主要修改assetsPublicPath build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../d...

npm install axios --savenpm install ant-design-vue --save//引入组件npm install moment --save//引入日期格式**## main.js**// The Vue build version to load with the `import` command// (runtime-only or st...

npm install axios --save**新建http.js**import axios from 'axios';// import qs from 'qs'// import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL ='http://114.1...

1.安装：npm install ant-design-vue --save2.在main.js中　　a.全部引入import ant from 'ant-design-vue'import 'ant-design-vue/dist/antd.less'Vue.use(ant)

package.json文件："scripts": { "dev": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js", "start": ...

html<!--收货地址列表--> <ul> <li v-for="(item,index) in addList" id="item.id" :class="{ active:index==current}" @click="choose_addr(index)" :key="index"> &l...

<input placeholder="请填写准确的手机号码" "if(value.length>11)value=value.slice(0,11)" ref="tel" type="text" value="">

<template> <div class="Goods"> <div class="hed"></div> <div class="main"> <ul> <li v-for="(item,index) in list" :key="item.id"> ...