尤新宇-CSDN博客

原创 vuex（下）

六.四个map方法的使用1.mapState方法：用于帮助我们映射state中的数据为计算属性。computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum',

2022-05-18 11:16:38 199

原创 vuex（上）

VueX：1.概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。2.何时使用：多个组件需要共享数据时...

2022-05-11 12:35:48 290

原创 vue路由（下）

九.编程式路由导航作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活具体编码：//$router的两个APIthis.$router.push({ name:'xiangqing', params:{ id:xxx, title:xxx }})this.$router.replace({ name:'xiangqing', params:{ id:xxx, title:xxx }})this.$route

2022-04-25 17:50:46 1479

原创 vue路由（上）

路由：1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。2.前端路由：key是路径，value是组件。1.基本使用1.安装vue-router，命令：npm i vue-router//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//引入VueRouterimport VueRouter from 'vue-router'//引入路由器impo

2022-04-25 14:22:57 1323

原创 vue2的watch监听属性

监听属性：1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在，才能进行监视！！（在data里或者computed里）3.深度监视：(1).Vue中的watch默认不监测对象内部值的改变（一层）。(2).配置deep:true可以监测对象内部值改变（多层）。备注：(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！(2).使用watch时根据数据的具体结构，决定是否采用深度监视。以下代码：watch:{ isHot:{ im

2022-04-07 19:14:11 10488

原创 vue2的computed计算属性

计算属性：1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行？(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。5.备注：1.计算属性最终会出现在vm上，直接读取使用即可。2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发

2022-04-07 10:56:48 1752

原创 vue2的数据代理及Object.defineProperty方法

数据代理必须知道Object.defineProperty方法，在vue的底层很多都用到了它，比如数据代理、数据劫持、计算属性let person = { name:'张三', sex:'男'}需求：现在往张三添加添加一个age：18//传三个参数，第一个参数对象（person），第二个参数属性名age，第三个参数配置项{}（最常用的是value）Object.defineProperty(person,'age',{ value:18})console.log(person)

2022-04-06 17:02:59 560

原创 elementui 封装 vue-element-admin的分页

以下代码：下面是调用分页组件的地方<template> <div class="app-container"> <div class="filter-container"> <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search"> 查询 </el-button> </d

2022-03-31 14:18:15 1340

原创 element ui select选择获取对象

当使用element ui 的select选择器选择一个选项时，使用@change事件时只能得到一个Id,想要得到Id对应的对象用到filter进行过滤取到才可以以下代码：<el-select v-model="dataForm.varietyIds" multiple placeholder="请选择试验品种" style="width:300px" @change="changeVarietyIds"> <el-option v-for="item in varie

2022-02-21 13:17:14 1627 1

原创 element ui 新增动态表单

以下代码：<div v-for="(item, index) in addForm.domains" :key="index"> <el-form-item label="联系人" :prop="'domains.' + index + '.contactss'" :rules="{ required: true, message: '联系人不能为空', trigger: 'blur' }" > <el-input.

2022-01-19 10:47:59 2267

原创 element ui 表格状态展示

以下代码：第一种：<el-table-column prop="status" label="状态" width="150px" align="center"> <template slot-scope="scope"> {{ statusbtn(scope.row.status) }} </template></el-table-column>statusOptions: [{ id: 1, n.

2022-01-19 10:28:51 2654

转载 element ui 表格的序号

以下是代码：<el-table-column label="序号" width="50px" align="center"> <template slot-scope="scope"> {{ scope.$index + (pager.page - 1) * pager.pagerow + 1 }} </template></el-table-column>pager: { page: 1, // 当前页 pagerow: 10 .

2022-01-19 10:00:03 2845 1

原创 element ui 表格中说明内容过长hover展示

以下是代码：<el-table-column prop="remark" label="说明" align="center" > <template slot-scope="scope"> <el-popover :content="scope.row.remark" placement="top-start" title="说明" width="400" trigger="hover"> <span slot="re.

2022-01-19 09:49:44 259

原创 element ui前端做模糊查询

项目场景和解决方案：使用Element 组件的时候前端页面做模糊查询逻辑：当数据量过多时，使用分页分解数据用的还是上篇的使用Element 组件的时候 Pagination 分页文章的表格onSubmit() { let _this = this this.tableDatass = this.tableDatas.filter(item=> item.userName.includes(_this.formInline.user))

2020-12-14 14:07:01 850

转载 vscode 打开新文件覆盖窗口，始终显示一个窗口

问题描述：提示：vscode 打开新文件覆盖窗口，始终显示一个窗口例如：使用vscode 编辑器，可以同时打开多个文件，而且是多窗口展示的，以tabs的类型展示![哈哈哈](https://img-blog.csdnimg.cn/20201127113338318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTk4N

2020-11-27 11:35:20 3838

原创 1js引入方式+变量+数据变量

系列文章目录文章目录系列文章目录js引入方式变量数据类型js引入方式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // jsonp跨域屏幕适配 </script> </head> <body>

2020-10-16 09:32:26 851

weixin_49986131的博客