人资中删除角色的逻辑
删除角色的逻辑中,弹出确定弹窗之后,只有点击确定才能执行删除操作,此时我们可以在this.$confirm语句之前加上await 当异步执行完毕后才能操作下面的代码,否则不能操作。
具名插槽的复习
在人资中台案例中,许多界面都要用到一个提示结构,但是每个界面需要显示的东西不一样,因此我们就可以用到封装一个组件,中间包含具名插槽来实现。
组件中的声明:
<div>
<slot name:xxx/>
</div>
其他模块进行调用
首先进行引入
import name from '@/component/xxx'
然后进行使用,并通过v-slot:name'或者slot='name' 设置插槽内容
<template v-slot:'name'>
中间构写需要显示的内容
</ template>
<button slot='name'>
</button>
在vue中全局注册组件
- 首先创建一个index文件用于提供全局注册入口
- 然后在index文件中用install方法引入vue全局对象注册全局组件
export default{
install(Vue){
VUE.Component('组件名称',组件)
}
}
- 然后在入口处进行注册
import Component from '@/组件注册入口所在路径'
Vue.use(Component)
运用过滤器工具
- 先将过滤器的js文件复制到系统目录中
- 然后在入口文件中引入并且转换为过滤器
import * as filters from '@/filters'
//引入工具类
//注册全局的过滤器
Object.keys(filters).forEach(key=>{
//注册过滤器
Vue.filter(key,filters[key])
//其中key是工具的属性名称,filter[key]是属性值
})
- 然后再创建一个作用域插槽,用于引入时间,并且将时间用过滤器改变格式
<template v-slot='{row}'>
{{ row.timeOfEntry | formatDate }}
</template>