2022/2/14

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属性，所以有$emit和$on，在子组件用这个实例，就拥有了实例的方法，$emit可以通过事件传递数值，$on可以监听事件，通过回调函数对数值处理
（后面那个解释更好）

关于回调函数的this问题：回调函数中的this默认是指向window的，因为本质上是在函数内callback,并没有.前的对象调用

输入框获取的值不一定就是string，可以人为设置，比如v-model.number，会将输入值转化为数字，比如v-model.trim，会把输入框的空格自动去掉
也可以v-model.number.trim

触发生命周期是一件很可怕的事情（因为onMounted常常涉及列表渲染）
，v-show是什么值都不会影响，但是v-if会触发生命周期。

非父子组件传值：通过bus 的$emit和$on，$on用来接收参数，$emit用来传递参数。

出现属性，子类组件props引用，bus也是属性。（Vue.prototype.bus = new Vue()).
所以在bus里只要是组件，就可以用它的传值和接收值方式了。
比如通过this.bus.$emit就可以传值。this.bus.$on用于接收值。这个第二个参数是回调函数。

计算属性也叫依赖属性，依赖于使它发生变化的属性，如果属性不变，它也就不变，所以也叫缓存属性。

组件有一些小细节部分。比如某个标签下只允许用某种标签，可以组件不属于，又想让组件能够在里面显示，
就通过is = "xx"的方式来实现。
举例子：

原本是 的 还有

this.$refs.hello

如： 应用一： 是 this.$refs.loginForm.validate

应用二：通过this.$refs.xx删除节点。

const elx = this.$refs.rightPanel elx.remove()

特殊地，如果$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’
}
},