移除

{{Edit}}

import UserEditfrom "./UserEdit-dialog.vue";

import updatefrom ‘./Update.vue‘exportdefault{

methods: {

deleteRow(index, rows) {

rows.splice(index,1);

}

},

data() {return{

Edit:"编辑",

pagesize:5, //每页的数据条数

currentPage: 1, //默认开始页面

show: false,

shows:false,

mydata:{},

SkipCount:5,

MaxResultCount:10,

actions: [

[

{

id:"New",

type:"primary",

text:"New",

icon:"fa fa-plus"},

{

id:"Refresh",

type:"success",

text:"Refresh",

icon:"fa fa-refresh"}

]

],

tableData4: []

};

},

components: {

UserEdit,

datatablepaging,

update

},

methods: {

open() {this.show = true;

},

opens(){this.shows = true;

},

created: function() {this.total = this.tableData4.length;

},

current_change: function(currentPage) {this.currentPage =currentPage;

},

handleClick(id) {switch(id) {case "New":this.AddUser();break;case "Refresh":this.Refresh();break;default:break;

}

},

AddUser() {this.open();

},

Refresh() {this.getuser();

},

getuser() {this.$http

.get("/api/services/app/Userinfro/GetUserinofor?MaxResultCount=" +

this.MaxResultCount

)

.then(result=>{this.tableData4 =result.data.result.items;//console.log(result.data.result.items);

})

.catch(err =>{

console.log(err);

});

},

sexTypes(row, column) {if (row.sexType == 1) {return "男";

}else{return "女";

}

},

Getlevel(row, column) {if (row.integral >= 300 && row.integral < 600) {return "白银";

}if (row.integral >= 600 && row.integral < 900) {return "黄金";

}if (row.integral >= 900 && row.integral < 1200) {return "铂金";

}if (row.integral >= 1200) {return "钻石";

}

},

deleteRow(row) {this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {

confirmButtonText:"确定",

cancelButtonText:"取消",

type:"warning"}).then(()=>{

console.log(row.id);this.$http

.delete("/api/services/app/Userinfro/DeleteUserByid?Id=" +row.id)

.then(result=>{this.$message({

type:"success",

message:"删除成功!"});this.getuser();

})

.catch(err =>{

console.log(err);

});

});

},

EditClick(data) {this.opens();//console.log(data)

this.mydata=data;

},

handleSizeChange(size){this.pagesize=size;

},

handleCurrentChange(currentPage)

{this.currentPage=currentPage;

}

},

created() {this.getuser();

}

};

padding-top: 12px;

}

vue 封装dialog_element-dialog封装成子组件相关推荐

  1. vue中el-dialog弹窗关闭,子组件控制父组件

    1.父组件页面中的点击事件控制子组件的弹窗出现 2.子组件页面有个叉叉,点了之后关闭当前页面 <div class="databtn" @click="record ...

  2. 【Vue开发实战课后题】子组件为何不可以修改父组件传递的props?

    在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的. 一.为何不可以修改伏组件传递的Prop? 因为Vue是单向数据流,为了保证数据的单 ...

  3. 如何在vue页面中引入其他的子组件?(局部引入/全局引入)

    在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...

  4. vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...

  5. vue父组件调用子组件方法

    vue父组件调用子组件方法 比如,父组件有一个弹窗组件,在子组件里定义自己的显示隐藏效果,父组件调用. 通过ref调用子组件的方法 父组件代码 <template><div>/ ...

  6. vue 父组件调子组件方法_vue父组件调用子组件有哪些方法

    这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...

  7. vue子组件methods中获取props的值

    最近用vue练习项目,想在子组件中使用props中的值,但是在mounted中没有办法拿,最后终于搞明白了 这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据). 父组件中: <te ...

  8. Vue项目中使用props传递数据并允许子组件修改的方案

    在项目中遇到了一个相关需求: 一个页面中为了能够使代码更加简洁和易于查看,将其分成了多个功能模块.此时多个功能模块都需要使用共同的一组数据进行展现或对其进行修改.此时考虑到Vue项目中的数据通信方式: ...

  9. Vue学习笔记(2)(组件化开发)

    Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 组件化 1. 什么是组件化? 组件化是Vue.js中的重要思想 它提 ...

最新文章

  1. 屏幕的遮挡层,js得到屏幕宽高、页面宽高 (window.screen.availHeight)等--
  2. java语言程序设计答案_《java语言程序设计》练习题及答案
  3. 响应式Web设计——最佳指南
  4. 反弹式木马原理_汽车避震器的原理与改装问题
  5. 无需一行代码,完成模型训练和部署,这个AI工具开始公测
  6. DeepMindVGG提出基于集合的人脸识别算法GhostVLAD,精度远超IJB-B数据集state-of-the-art...
  7. 蓝桥杯 ALGO-145 算法训练 4-1打印下述图形
  8. pyQT指定窗口截图
  9. MybatisX代码自动生成
  10. 初入门-游戏设计思路拆解
  11. python wxpython常用控件实例
  12. 理解Iass Pass SasS三种云服务区别
  13. python游戏设计毕业论文_游戏设计游戏策划毕业论文
  14. (黑科技)超链接记录贴
  15. 【FPGA】05_按键消抖
  16. 115怎么利用sha1下载东西_如何不登陆115网盘也能使用迅雷下载其文件?教你手动解析115网盘文件真实的直接下载地址【转】...
  17. Filebeat is unable to load the Ingest Node pipelines for the configured modules
  18. 红到发紫的人工智能,2019运势如何?
  19. 如何用python实现电商订单接口API
  20. linux命令查看raid5,Linux中RAID5搭建与测试

热门文章

  1. LeetCode简单题之删除一个元素使数组严格递增
  2. CodeGen编写自定义表达式标记
  3. CentOs7中安装python3.7.6
  4. 报错Failed to initialize JPA EntityManagerFactory: Unable to create requested service解决方法
  5. php连接mysql页面空白_求大神: php注册页面跳转出现空白页
  6. Java 数值大小比较
  7. C# 视频多人脸识别的实现过程
  8. .Net Core快速创建Windows服务
  9. 2022-2028年中国网络出版产业投资分析及前景预测报告
  10. [LeetCode] 130. Surrounded Regions Java