loyd3的博客

然后，因为选中子table的单选框后，把展开的子table收齐再展开时，单选框的选中样式会丢失，这时我想的办法是根据之前选中的选项，调用toggleRowSelection这个方法，再把单选框选中。在上面代码中hasSelections 是判断是否有选中的选项，然后把展开子表格选中的id取出来，根据选中的id调用toggleRowSelection去点击。但这里会产生一个问题，用$set赋值后，页面会重新渲染，展开的table会收回去，我的想法是让展开的table保持展开的状态，

实现的思路是第一个下拉选择在选择了选项后将该选项的信息传递到接口请求下一个选项的内容，依次类推。然后在清除了上一级选择的选项后要将其次级和子孙级的选项都清除（包括选择里的列表内容）

上面代码中renderHeader方法里要注意column 包含的是每一行的内容，给header添加显示省略号的css代码，并且要把header的文字内容包含在el-tooltip里面。

需要注意 getBoundingClientRect()这个方法，正是通过这个方法获取元素位置，从而判断是否出现在可视区域。页面内容太多会导致加载速度过慢，这时可考虑使用滚动加载即还没有出现在可视范围内的内容块先不加载，出现后再加载。基本思路就是判断元素是否出现在浏览器的可视区域，出现了就加载请求接口加载内容。但是要求内容块有最小高度。

下面是将echarts图表的配置都封装在getOption这个方法里面，同时把chartDataFactory生成的数据传入这个方法。nameDataKey和valueDataKey分别对应传入数据的键的名字和值和名字，比如，假如数据是这样。上面方法实现的效果是将json数组转换为一个包含以属性名命名数组的对象，例如传入的数据是这个格式。那图表的横坐标是title对应的值，竖坐标是score对应的值，这个在后面会详细说。将通过generateChartInData生成的数据，传入下面的方法中。

组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。组件的 data 必须是一个函数。Prop 定义应该尽量详细。为 v-for 设置键值 总是用 key 配合 v-for。避免 v-if 和 v-for 用在一起永远不要把 v-if 和 v-for 同时用在同一个元素上。为组件样式设置作用域这条规则只和单文件组件有关。私有 property 名使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 AP

【代码】【vue组件】vue+element ui 实现简单购物车。

使用vue.js实现的留言板组件。

getDirListForFile() { dirList().then((res) => { let list = []; res.data.forEach((item) => { let str = "|--"; if (item.parentId == "0") { item.name= str + item.name; list.push(item);

vue项目 设置配置使其能再Chrome浏览器中进行调试只需要在文件vue.config.js的configureWebpack对象中加一个元素 devtool:‘source-map’如下图：

通过js代码添加水印，注意一些设置的参数function watermark(settings) { debugger; //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:20,//水印行数 watermark_

vue 不使用el-tab而是使用el-button实现点击按钮 按钮是选中状态列表内容进行切换例子如下：注意第一个el-button有id 意即这个button是默认选中的<div class="zls-page-title"> <el-button type="primary" plain id="zls-button-active" @click="checkByDocAuthority('all')" >全部文档&

一般 el-select通过v-model同步传值（一般是传id）有时需要选择后同时保存id和name这时可以通过**@change**方法来实现，代码如下：<el-select v-model="id" placeholder="请选择所属分类" class="form-input" @change="handleDirChange($event)" > <el-option :label="item.dirName" :value

el-upload 上传校验文件，格式和大小下面例子的情况是一个上传按钮，点击直接弹出选择文件<el-upload ref="upload" class="zls-upload-demo" :action="actionurl" :on-change="handleChange" :show-file-list="false" :file-list="fileListUpload" :on-success="uploadSuccess"

在的多选列中添加：:selectable=“selectable” <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" > //type为selection的这一列 <el-table-column type="selectio

添加文件，文件名为enum.js文件内容：//使用方法/** * 获取枚举值：STATUSMAP.SH * 获取枚举描述：STATUSMAP.getDesc('SH') * 通过枚举值获取描述：STATUSMAP.getDescFromValue('TG') */let STATUSMAP = createEnum({ SH: [0, '审核中'], TG: [1, '审核通过'],});function createEnum(definition) { const va

refAge: { type: Number, default: 0},refName: { type: String, default: ''},hotDataLoading: { type: Boolean, default: false},特别注意数组，函数和对象hotData: { type: Array, default: () => { return [] }},getParams: { type: Function, default: ()

官网地址：https://www.npmjs.com/package/vue-json-viewer安装npm:npm install vue-json-viewer --saveyarn:yarn add vue-json-viewer在页面中引入import Vue from 'vue'import JsonViewer from 'vue-json-viewer'// 以插件的形式引入Vue.use(JsonViewer)// 或者注册组件// components: {

ElementUI是怎么做表单验证的？在循环里对每个input验证怎么做呢？model绑定表单数据,通过prop取表单数值，根据rule取form-item rules 或则rules[prop]校验你有二次封装过ElementUI组件吗？有啊! 类似于分页, 表格, 毕竟每个项目的这些东西, 比如pageSize, size, 这些在每个项目基本都是统一的,设置起来会有四五个参数prop是固定的, 我不可能每次使用的时候都设置一次ElementUI怎么修改组件的默认样式？方法一：/deep/

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

你有写过vuex中store的插件吗？Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数：const myPlugin = store => { // 当 store 初始化后调用 store.subscribe((mutation, state) => { // 每次 mutation 之后调用 // mutation 的格式为 { type, payloa

ajax、fetch、axios这三都有什么区别？ajax是最早出现发送后端请求的技术，属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话，容易产生回调地狱。fetch号称可以代替ajax的技术，是基于es6中的Promise对象设计的，参数和jQuery中的ajax类似，它并不是对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。axios不是原生js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在请求和相应阶段进行拦截

vue怎么实现强制刷新组件？v-ifthis.$forceUpdate():keyvue自定义事件中父组件怎么接收子组件的多个参数？this.$emit("eventName",data) data为一个对象 父组件那边用解构赋值取vue给组件绑定自定义事件无效怎么解决1、组件外部加修饰符.navtive2、组件内部声明$emit('自定义事件')vue如果想扩展某个现有的组件时，怎么做呢？1.使用Vue.extend直接扩展2.使用Vue.mixin全局混入3.HOC封装4.加

跟keep-alive有关的生命周期是哪些？描述下这些生命周期（keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。）activated和deactivatedkeep-alive的生命周期1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated2.deactivated: 页面退出的时候会触发deactiv

你知道v-model的原理吗？说说看原生input其实只是一个语法糖，:bind="value"与@change="value = $event.target.value"的结合。自定义组件的时候的v-model默认监听change事件和绑定value 的prop。vue2.0不再支持v-html中使用过滤器了怎么办？使用过滤器 Vue.filter在method中定义方法htmlFilter(htmlString){return htmlString.replace(/+s/g,

从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织vue-cli实际上已经很成熟了，目录除了脚手架默认的，1、一般会额外创建views，components，api，utils，stores等；2、下载重要插件，比如axios，dayjs（moment太大），其他的会根据项目需求补充；3、封装axios，统一api调用风格和基本配置；4、如果有国际化需求，配置国际化；5、开发，测试和正式环境配置，一般不同环境API接口基础路径会不一样；额外创建views, co

router 退出回到首页清空数据this.$router.replace({path: '/login'});location.reload();

基于vue+element分页列表进行全选或选择，点击下一页全选，再回到第一页，数据有重复可用这个方法去重const newArr = [];this.checkedDataList.map( (item) => newArr.findIndex( ({id}) => id === item.id ) === -1 && newArr.push(item) );this.checkedDa

在实际情况中遇到的问题：角色管理 编辑权限如果只选择子权限，此时父权限是半选择，保存后再去编辑，发现父权限变成选中，且此父权限下的所有子权限都选中，但接口查询出的数据是对的解决思路，对后端返回的树的数据进行过滤，有子节点的父节点选中状态设置成false代码如下： <Tree :data="permissions | filterPer" show-checkbox @on-check-change="fixTreeArray" ref="tree" ></Tree> f

v-bind缩写： :动态更新html元素的属性<!-- 绑定一个 attribute --><img v-bind:src="imageSrc"><!-- 缩写 --><img :src="imageSrc"><!-- 动态 attribute 名缩写 (2.6.0+) --><button :[key]="value"></button><!-- class 绑定 --><di

组件注册全局注册Vue.component('my-component-name', { // ... 选项 ...})注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。局部注册使用components可以局部注册组件，注册后的组件只有在该实例作用域下有效在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var C

单元素/组件的过渡使用transition 的封装组件，实现过渡效果，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点例子：<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">h

什么是slot当需要让组件组合使用，混合父组件的内容与子组件的模板时，就回用到slot，这个过程叫内容分发props传递数据，events触发事件和slot内容分发构成了vue组件的3个api来源如下例：<child-component> {{message}}</child-component>这里的message就是一个slot，但是它绑定的是父组件的数据，而不是<child-component>的数据父组件模板的内容是在父组件作用域内编译，子组件

重复渲染多个组件（或元素）的方法<div id="app"> <ele></ele></div><script> //局部声明组件 var Child = { render: function (createElement) { return createElement('p', 'text'); } }; Vue.component('ele',{ render: function (createElement)

webpack安装安装最新版的Node.js和NPM创建一个目录，使用NPM初始化配置： npm init ; 完成后会在demo目录生成一个package.json在本地局部安装webpack: npm install webpack webpack-cli --save-dev安装webpack-dev-server：npm install webpack-dev-server --save-devwebpack配置在目录DEMO下创建一个js文件，文件名为webpack.config