let data = {
rows: [],
total: 0
}
resolve(data)
listUser(this.queryParams).then(response => {
this.userList = response.rows;
this.total = response.total;
this.loading = false;
});
关于css浮动问题:
先写右浮动。
全局表单校验:
<el-button type=“primary” :disabled="!loginBtnEnabled"
icon=“el-icon-caret-right” size=“large”
style=“width: 100%; font-size: 18px; font-family: ‘Source Han Serif’”
@click=“handleLogin(‘loginForm’)” :loading=“flag”> 登 录
handleLogin(){
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.store.dispatch(“Login”,this.loginForm).then(res => {
this.KaTeX parse error: Expected 'EOF', got '}' at position 57: …}) }̲).catch(err => …store.dispatch(“Login”,this.loginForm).then(res => {
this.$router.push({ path: this.redirect || “/” })
}).catch(err => {
console.log(err);
})
}*/
})
},
关于element 表格 列表 自定义暂无数据的解决方案:https://www.cnblogs.com/moguzi12345/p/14067545.html
在el-table里写进就好
防抖直接用上自定义指令了。https://www.cnblogs.com/gerry2019/p/11962009.html
安装该插件进行解决即可
所有的@click换成v-debounce,注意,如果事件错误,使用v-debounce指令,页面将会消失。
因为bus是vue属性,所以有
e
m
i
t
和
emit和
emit和on,在子组件用这个实例,就拥有了实例的方法,
e
m
i
t
可
以
通
过
事
件
传
递
数
值
,
emit可以通过事件传递数值,
emit可以通过事件传递数值,on可以监听事件,通过回调函数对数值处理
(后面那个解释更好)
关于回调函数的this问题:回调函数中的this默认是指向window的,因为本质上是在函数内callback,并没有.前的对象调用
输入框获取的值不一定就是string,可以人为设置,比如v-model.number,会将输入值转化为数字,比如v-model.trim,会把输入框的空格自动去掉
也可以v-model.number.trim
触发生命周期是一件很可怕的事情(因为onMounted常常涉及列表渲染)
,v-show是什么值都不会影响,但是v-if会触发生命周期。
非父子组件传值:通过bus 的 e m i t 和 emit 和 emit和on, o n 用 来 接 收 参 数 , on用来接收参数, on用来接收参数,emit用来传递参数。
出现属性,子类组件props引用,bus也是属性。(Vue.prototype.bus = new Vue()).
所以在bus里只要是组件,就可以用它的传值和接收值方式了。
比如通过this.bus.
e
m
i
t
就
可
以
传
值
。
t
h
i
s
.
b
u
s
.
emit就可以传值。 this.bus.
emit就可以传值。this.bus.on用于接收值。这个第二个参数是回调函数。
计算属性也叫依赖属性,依赖于使它发生变化的属性,如果属性不变,它也就不变,所以也叫缓存属性。
组件有一些小细节部分。比如某个标签下只允许用某种标签,可以组件不属于,又想让组件能够在里面显示,
就通过is = "xx"的方式来实现。
举例子:
this.$refs.hello
应用二:通过this.$refs.xx删除节点。
特殊地,如果$ref绑定在组件上,它代表的不是该组件,而是该组件的引用。
应用三:通过this.$refs.xx可以拿到组件所有东西(ref 加在子组件上,用this. $ refs.name 获取到的是组件实例,可以使用组件的所有方法)
通过$ref可以实现对组件所以内容的直接操作。
比如父组件可以通过 $ ref来对两个或多个子组件的值进行操作。
例子:
this.total = this. $ refs.one.number + this.$refs.two.number
明天要看分页逻辑。
分页逻辑代码:
<el-table
v-loading=“loading”
:data=“list.slice((pageNum-1)pageSize,pageNumpageSize)”//返回值就是被删除的值。
style=“width: 100%;”
:cell-style=“cellStyle”
highlight-current-row
border
>
slice结果是被删除的字段。它是对对象进行操作。
对表格某一列内容做样式操作: :cell-style=“cellStyle”
/**更改样式操作 */
cellStyle ({ row, column, rowIndex, columnIndex }) {
// 状态列字体颜色
if (row.syn_result === ‘成功’ && columnIndex === 2) {
return ‘background-color: #0CB618;color:#0CB618’
} else if (row.syn_result === ‘失败’ && columnIndex === 2) {
return ‘background-color: red;color:red’
} else {
return ‘color: #1a1a1b’
}
},