人资day9

114 阅读1分钟

人资中删除角色的逻辑

删除角色的逻辑中,弹出确定弹窗之后,只有点击确定才能执行删除操作,此时我们可以在this.$confirm语句之前加上await 当异步执行完毕后才能操作下面的代码,否则不能操作。

image.png

具名插槽的复习

在人资中台案例中,许多界面都要用到一个提示结构,但是每个界面需要显示的东西不一样,因此我们就可以用到封装一个组件,中间包含具名插槽来实现。

组件中的声明:
<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>