vue按钮Button

<template><main-area :title="title"class="fullfill index":buttonArray="buttonArray"><div class="block info-content"><span class="demonstration">查询日期：</span><el-date-picker v-model="value1"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd"></el-date-picker><el-button id="search"class="btnSearch"type="primary"ecols-button@mouseup.native="onBeforeSubmit('search',$event)">查询</el-button></div><div class="info-content1">保险记录(默认为近一年记录)</div><div class="content"><y-table :data="tableData.data":pagination="pagination"><el-table-column type="index"width="100"label="序号"></el-table-column><el-table-column align="center"width=""prop="PREPOLICYID"label="保单号"></el-table-column><el-table-column align="center"width=""prop="INSCORPCHNAME"label="保险公司名称"></el-table-column><el-table-column align="center"width=""prop="INSPRDCHNAME"label="产品名称"></el-table-column><el-table-column align="center"width=""prop="INSPRDKIND"label="交易类型"></el-table-column><el-table-column align="center"width=""prop="AMOUNT"label="交易金额"></el-table-column><el-table-column align="center"width=""prop="UPDATEDATE"label="购买日期"></el-table-column><el-table-column align="center"width=""prop="YBTSERIALNO"label="流水号"></el-table-column></y-table></div></main-area></template><script>import config from '@/config'require('@/styles/stm/index.scss')export default {components: {},data() {return {staticResourcePath: config.staticResourcePath,photoPath: '/img/btn/btn-type3-1.png',tableData: {data: []},pagination: {total: 5,mode: 'page',currentPage: 1,pageSize: 10,//all:一次加载所有数据，前端进行分页控制//page:每次翻页都去后端读取一次数据//cache:前端在翻页过程中，没有数据后才发送查询到后端，后端根据分页情况加载缺失的数据并追加到数据池中（风险，缓存中的数据有变更）},title: '',buttonArray: [{}, {}, {}, {}, {}, {}, {}, {}],value1: [],}},methods: {onBeforeSubmit(id, event) {if ("search" == id) {console.log(this.value1);console.log(this.value1[0])console.log(this.value1[1])parent.MARS.setDataPoolValue("Tran_StartDate", this.value1[0]);//开始日期parent.MARS.setDataPoolValue("Tran_EndDate", this.value1[1]);//结束日期} else {console.log('error submit!!');//页面出现错误阻止事件继续传递，此时平台收不到事件event.stopPropagation();return false;}},_getDataPool() {let tableDataString = parent.MARS.getDataPoolValue("Tran_BuyInfoList");let totNum = parent.MARS.getDataPoolValue("Tran_TotalNumberOfRecords");this.tableData.data = tableDataString == "" ? this.tableData : JSON.parse(tableDataString);this.pagination.total = totNum;this.pagination.mode = "page";this.pagination.currentPage = 1;},//获取最近一年时间getDate() {var today = new Date();var y = today.getFullYear();var m = today.getMonth();var d = today.getDate();var StartDate=y-1 + '-' + m + '-' + d;var EndDate=y + '-' + m + '-' + d;console.log("today=" + today);console.log("StartDate=" + StartDate);console.log("EndDate=" + EndDate);// this.value1=[StartDate,EndDate];this.value1[0]=StartDate;this.value1[1]=EndDate;console.log(this.value1);},},created() {this.getDate();this._getDataPool();let messages = this.$i18n.messages;this.buttonArray = [//F1{},//F2{},//F3{},//F4{show: true,text: {zh: messages.zh.main.btn.exit,en: messages.en.main.btn.exit,}},//F5{},//F6{},//F7{},//F8{show: true,text: {zh: messages.zh.main.btn.returnback,en: messages.en.main.btn.returnback,}}]this.buttonArray = [...this.buttonArray]},mounted() {},watch: {}}
</script><style lang="scss" scoped>.index {.info-content {text-align: center;font-size: 20px;margin-top: 5%;margin-bottom: 3%;font-weight: 500;.demonstration {margin-right: 8px;}/deep/ .el-date-editor {font-size: 20px;margin-right: 15px;.el-range-separator {width: 10%;}}}.info-content1 {text-align: center;font-size: 20px;margin-bottom: 2%;}.content {position: relative;width: 100%;}.btnSearch {min-width: 10vh;line-height: 3.5vh;height: 3.7vh;border-radius: 3vh;font-size: 1.8vh;padding: 0;}}
</style>>

vue按钮Button相关推荐

vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
vue 所有按钮属性.vue Button 所有按钮属性事件.vue a-button 所有按钮属性事件.vue 按钮所有属性事件.vue 1.组件注册 1.按钮类型 2.按钮组合 3.不可用状态 4 ...
vue按钮字体大小设置_用Vue模仿antd的样式造UI组件之button
一.环境的配遇新是直朋能到置 1.新建一个遇新是直朋能到分览文件夹 mkdir eassyui 2.使用npm作为包管理新直能分支调二浏页器朋代说,工具 npm init -y 3件览客需和下于有快都 ...
vue限制点击次数_解决vue 按钮多次点击重复提交数据问题
这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型点击这里我们通过控制isDisable 来设 ...
实现一个基于Vue的Button小组件
概述原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...
vue 按钮权限控制
vue 按钮权限控制前言在日常项目中,会碰到需要根据后台接口返回的数据,来判断当前用户的操作权限.必须当有删除权限时,就显示删除按钮.没有这个权限时,就不显示或者删除这个按钮.通过查找资料,通过 ...
.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
按钮button的常用属性和事件
文章目录 1 按钮button的常用属性和事件 1 按钮button的常用属性 1 按钮button的常用属性和事件 1 按钮button的常用属性 Tag: 我们可以通过tag对按钮增加数据. pr ...
MFC 基础知识：对话框背景添加图片和按钮Button添加图片
很长时间没有接触MFC相关的知识了,我大概是在大二时候学习的MFC相关知识及图像处理,现在由于要帮个朋友完成个基于C++的程序,所以又回顾了下相关知识.的确,任何知识一段时间过后都比较容易忘记,但回顾 ...
winfrom 点击按钮button弹框显示颜色集
1.窗体托一个按钮button: 2.单击事件: 1 private void btnForeColor_Click(object sender, EventArgs e) 2 { 3 using ( ...

vue按钮Button

vue按钮Button相关推荐

最新文章

热门文章