Vue 随笔记

CSS 选择器参考手册

记录一下平时编写中用到的小技巧

element-ui 中一些默认带参的方法想传入自定义参数时的解决办法，以@change添加自定义参数为例

//第一个参数是默认的value参数，第二个是我们自己想传入的参数

@change='selectChange($event,scope.row)'

或者使用第二种方法：

@change='(val)=>selectChange(val,scope.row)'

Vue全局组件    ☜点击

element-ui中el-input数字和小数输入

oninput ="value=value.replace(/[^\d]/g,'')"    //只能输入数字

oninput ="value=value.replace(/[^0-9.]/g,'')"  //只能输入数字和小数

<el-input
 v-model='count'
 oninput="value=value.replace(/[^\d]/g,'')"
 maxLength='9'
/>

Vue子组件调用父组件的方法    ☜点击

element-ui 点击行如何获取table的行索引    ☜点击

vue子组件使用v-if父组件调用子组件函数时的问题

当子组件使用了v-if时，父组件想调用子组件的函数就要等子组件的状态改变后才能获得。直接调用将无法获得，需要使用this.$nextTick

methods: {
    getChild(){
        this.showEdit = true;
	this.$nextTick(function(){
            this.$refs.editeven.getNode();
      	})
    }
}

vue 给data 数据的重新初始化

//初始化 data 中的 footData 数据
Object.assign(this.$data.footData, this.$options.data().footData);

//初始化全部的 data数据
Object.assign(this.$data, this.$options.data());

多表单Form验证   ☜点击

element-UI中el-select下拉框，filter-method自定义，可按拼音名称搜索    ☜点击

vue 改变数组里对象key对应value   ☜点击

各地方大小写转换   ☜点击

vue动态绑定class选中当前列表变色的方法示例   ☜点击

css3 flex 详解,可以实现div内容水平垂直居中   ☜点击

element-ui table 单元格可编辑   ☜点击

element-ui tree 节点过滤加载对应子节点   ☜点击

Element-ui form如果只有一个<el-input>输入框回车默认提交，避免提交添加代码：

<el-form @submit.native.prevent >

Element-ui table添加行点击or双击事件之后行内的按钮事件失效，防失效代码：

@click.native.stop='function'

关于滚动条问题：可以给表格添加鼠标滚轮事件，然后在事件中关联滚动条的位置
实现：<el-table @mousewheel.native="handleMouseWheel">
handleMouseWheel(event){
// 在这里处理滚轮事件
// 获取 .false-box 和 .scroll-box 元素
const falseBox = document.querySelector('.false-box');
const scrollBox = document.querySelector('.scroll-box');

// 根据滚轮事件的 deltaY 值调整 .false-box 的滚动位置
falseBox.scrollTop += event.deltaY;

// 计算 .false-box 和 .scroll-box 的滚动位置比例
const scrollTopRatio = falseBox.scrollTop / (falseBox.scrollHeight - falseBox.clientHeight);
const scrollBoxScrollTop = scrollTopRatio * (scrollBox.scrollHeight - scrollBox.clientHeight);

// 设置 .scroll-box 的滚动位置
scrollBox.scrollTop = scrollBoxScrollTop;
}