东莞企业网站建设多少钱,湖州seo排名,加盟网网站建设,莆田联客易外贸网站建设推广职位管理前后端接口对接 先把table中的数据展示出来#xff0c;table里面的数据实际上是positions里面的数据#xff0c;就是要给positions:[] 赋上值
可以在methods中定义一个initPosition方法 methods:{//定义一个初始化positions的方法initPositions(){//发送一个get请求…职位管理前后端接口对接 先把table中的数据展示出来table里面的数据实际上是positions里面的数据就是要给positions:[] 赋上值
可以在methods中定义一个initPosition方法 methods:{//定义一个初始化positions的方法initPositions(){//发送一个get请求去获取数据 请求地址是/system/basic/pos/this.getRequest(/system/basic/pos/).then(resp {//判断如果resp存在的话请求成功if (resp){//就把positions的值赋值歌resp就行了this.positionsresp;}})}}定义好之后去看职位管理的页面看有没有渲染出数据。 为什么没数据呢我们可以看到我们定义的initPositions并没有调用我们以前是登录的时候要点击登录的按钮去调用方法但是我们这个不应该点应该是页面一加载就会自动的去执行。那么如果让方法自动去执行呢这时候就要用到vue的生命周期里面的钩子函数 当这个组件初始化的时候会自动执行mounted方法我们在mounted方法里面去调用initPositions就行了 mounted(){this.initPositions();},要在表格的前面加上多选按钮的话呢只需要加上如下一段代码即可 el-table-columntypeselectionwidth55/el-table-column在表格里面添加编辑和删除操作新增代码如下scope.$index:当前操作到第几行 scope.row这一行对应的json对象 el-table-column label操作!--scope.$index:当前操作到第几行 scope.row这一行对应的json对象 --template slot-scopescopeel-buttonsizeminiclickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-buttonsizeminitypedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template
/el-table-column//定义编辑按钮的方法
handleEdit(index,data){},
//定义删除按钮的方法
handleDelete(index,data){},效果如下图所示 如何实现添加方法这个也挺简单在下面html标签里面加上click“addPosition()”
el-button typeprimary iconel-icon-plus sizesmall clickaddPosition()添加/el-button在methods中的定义的添加方法的代码如下首先要判断用户是否输入了名字输入了就去发送添加的请求地址添加成功之后调用initPositions方法刷新数据没有输入则弹出提示框。 添加成功之后调用initPositions方法刷新数据 也可以添加完成之后清空输入框 this.pos.name’ ;
addPosition(){if (this.pos.name){//this.pos 参数是posthis.postRequest(/system/basic/pos/,this.pos).then(resp{if(resp){//添加成功之后需要把表格刷新一下 可以直接用initPositions重新加载数据this.initPositions();this.pos.name;}})} else {this.$message.error(职位名称不可以为空);}},添加按钮已经做完了开始做删除按钮代码如下借助Element UI里面的MessageBox弹框
//定义删除按钮的方法handleDelete(index,data){this.$confirm(此操作将永久删除【data.name】职位, 是否继续?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {this.deleteRequest(/system/basic/pos/data.id).then(resp{if (resp){this.initPositions();}})}).catch(() {this.$message({type: info,message: 已取消删除});});},删除效果如下图
