datepicker

前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查， 利用以上技术我们会搭建一个vue案例，效果展示图： 以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json-server搭建，在本次博客中，不会讲解，如果想看的话，在小编的博客中，也有讲解关于脚手架搭建和json-server搭建，如果想学习的话，可以看一下。 1.项目结构展示 左边第一个是前端项目结构，第二个为json-server服务端 2.页面搭建 在本次案例中，小编采用Element-ui快速搭建前端页面，以提高效率。如果不了解的话，可以去官网看一下 　　2.1安装element-ui 　通过npm install element-ui -S 安装前端ul框架，安装完之后，并在main.js引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 　　2.2页面布局UserInfo.vue 　　直接通过element-ui中table布局，把整体建构页面布局完成，

<h2>你们公司的产品是不是还在做一个可编辑表格功能?</h2> <h2>1.前言</h2> <p>咱开发拿到需求大多数是去网上找成型的组件，找不到再看原生的方法能否实现，大牛除外哈，大牛一般喜欢封装组件框架。</p> <h2>2.思路</h2> <p>可编辑表格在后台管理系统还是比较常用的，因为比较流行框架element,iview都没有这个应用,所以考虑了两种方法，下面我简单说哈我的两种方法：<a href="http://www.jqhtml.com/down/7658.html" target="_blank">vue+element实现表格跨行或跨列合并</a></p> <h2>3.方法一:</h2> <p>直接通过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四个参数row, column, cell, event,可以拿这些参数做相应的筛选,然后使用操作dom的方法添加input达到更改值的作用,贴上原生代码:</p> <template> //表格也可以写成原生的table <el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit"> <el-table-column property=

表单中的重置按钮不生效的问题，结合文档对照后，发现是没有为el-form-item设置prop字段 所以，想让resetfields()生效有2个前提： form要设置ref，且ref值要与 this.$refs[formName].resetFields()中的foemName一致 el-form-item上设置prop字段，表单rule验证和resetfields() 清理的都是prop绑定的字段 注：this.$refs[formName].resetFields()只是将查询条件初始化，所以在初始化时绑定什么值就还是什么值，并不是全部置为空。 <el-form label-position="right" label-width="100px" ref="formList" :model="formList"> <el-col :span='8'> <el-form-item label="输入搜索" prop="inputSearch"> <el- input placeholder ='输入关键字' prefix -icon='el-icon-search' v -model='formList.inputSearch' style ="width: 100%;" clearable > </el-input> </el-form-item> </el-col> <el

<h3>一、背景</h3> <p>在Vue项目中使用了第三方的datepicker插件，在选择日期后vue无法检测到datepicker输入框的变化</p> ``` <label class="fl">日期：</label> <div class="input-wrapper fr"> <input class="daterangepicker" ref="datepicker" v-model="dateRange"/> <a href="javascript:;"></a> </div> ``` export default { data() { return { dateRange: '' } }, watch: { dateRange(newVal, oldVal) { console.log(newVal) // 选择日期后无法监听dateRange的改变 } } } <h3>二、分析</h3> <p>查找资料发现：Vue实际上无法监听由第三方插件所引起的数据变化。因此上面的方法是行不通的。但是，Vue给我们提供的一个方法，它可以将任意数据转化为可以被Vue监听到的数据，他就是：vm.$set。</p> <h3>三、解决</h3> <p>以我用到的datepicker为例（jquery-daterangepicker）</p> data() { return { date

　　对象的属性是由属性名name，值key，和其他特性（可读写性 writable，可枚举性enumerable，可配置性configurable）组成的。从ES5开发，提供了getter和setter 可以将属性值的获取和设置分别绑定到方法上，称之为“存取器”。有了getter和setter我们就能够在属性值的变更和获取时实现一些操作。 简单的getter , setter 　　直接在对象中创建属性的getter和setter，并进行测试。 　　注意语法规则，是通过get和set关键字创建的percent属性的getter和setter函数。 get函数是没有参数的，set函数会将等号右边的值作为参数 。当访问percent属性时，会返回_num加%，当设置percent时，会打印日志并将值赋给_num。 使用defineProperty 　　如何在已有的对象上添加getter和setter呢？ Object.defineProperty(obj, prop, descriptor) ，obj为将要操作的对象，prop是将要定义或者修改的属性名，descriptor是将要被修改或者定义的描述符。看实例 　　 　　defineProperty()添加或者修改属性的时候需要注意： 　　　　1、数据描述符configurable标志着该属性能够被改变，能够被删除，默认为false 　　

Spring Boot - JavaFX 2.0应用 很多人对Java开发native程序第一反应还停留在暗灰色单一风格的Java GUI界面，开发方式还停留在AWT或者Swing。本文主要基于SpringBoot和JavaFX开发一个Demo给你展示Java Native应用可以做到什么样的程度。当然JavaFX 2.0没有流行起来也是有原因的，而且目前native的选择很多，前端是个框架都会搞个native... @pdai Spring Boot - JavaFX 2.0应用 技术背景 - Java 8的新特性之JavaFX2.0 全新现代主题：Modena 用于 CSS 结构的公共 API WebView 增强功能 JavaFX Scene Builder 2.0 JavaFX 3D 富文本 TreeTableView 日期控件DatePicker Spring Boot+JavaFX2 Demo介绍 程序加载 - Loader 和WEB一样风格的GUI 对话框 - Popup Web应用嵌入 - Webview 多种主题切换 - Theme 消息及配置悬浮框 - Message/Configuration... 全屏最大化最小化 - FullScreen/Max/Min/Close 示例代码 <span style='color:red;font-size:25px;'