新增公司管理页 配置路由
分页设置
在api新建settings.js中定义接口函数
在settings.vue中 定义函数 发送请求
// Query ==>查询字符串 地址路径'/sys/role?name=' ==>params
// 路径参数 `sys/role/{id}`
// 请求体 =>post,普通,delete =>data
表格的渲染数据
分页功能的实现
current-page修改当前页
// 控制每页条数
handleSizeChange(val) {
// 每次刷新后页码值显示在第一页
this.pageParams.page = 1
this.pageParams.pagesize = val
// 刷新信息
this.loadRoles()
console.log(`每页 ${val} 条`)
},
// 控制每页显示个数
handleCurrentChange(val) {
this.pageParams.page = val
this.loadRoles()
console.log(`当前页: ${val}`)
},
删除功能
在setting.js定义接口函数deleteRole 参数为路径(路径 在路径后传`/${id}`)
在setting.vue文件中 按需导入接口函数 通过插槽#default="{row}传数据"
删除按钮绑定点击事件 询问框
新增的对话框设置
新增功能
给确定按钮绑定hSubmit
兜底校验
定义接口函数 调用接口函数
关闭弹层
重新加载页面
实现数据的回填
定义接口函数 根据当前id获取数据 保存到表单 中
新增功能的bug解决
新增角色不能跳转到指定的页码
设置计算属性最大页码值maxPage和当前页的值个数pageFull
实现新增后将当前页码值改为最大页码值
判断当前页个数是否能够被整除 如果能 page++ total++
数据回填
设置编辑和新增控制按钮
isEdit为true时是编辑 false时是新增
表单校验时判断是否为编辑状态 是 doEdit() 否 doAdd()
完成编辑
通过:title控制编辑和新增
实现编辑
定义接口函数
定义函数 发送请求 关闭弹层 刷新数据
新建组件
在src/components
下面补充创建/PageTools/index.vue
,
全局注册Vue.component('组件名',组件对象)
具名插槽 子组件 <slot name=" abc"></slot>
父组件 <子组件标签 #abc></子组件标签>
全局注册方法二
封装插件 模块化处理
获取公司员工数据渲染
在 employee.js中 定义接口函数
sortable 实现表格的数据降序排列