Ant Design Vue

ant-design-vue Date range控制日期的选择功能 <a-range-picker :format="dateFormat" :disabled-date="disabledDate" @change="onChange" v-model="tbdate"/> import moment from 'moment' data(){return {dateFormat: 'YYYY-MM-DD',tbdate:undefined}} methods: { moment, disabledDate (current) { return (current < moment().subtract(90, "days")) || (current > moment().startOf('day')) // return current && current < moment().endOf(‘day’);！！！！！当天之前的不可选，包括当天 // return current < moment().subtract(1, ‘day’) ！！！！！当天之前的不可选，不包括当天 //(current > moment().subtract(0, "day")) //当天之后的日期不可选，包括当天 （已测） }, onChange (date, dateString) {

我认为现在是写最这篇文章最好的时刻了。 写在前面 有输入，有沉淀，才有分享。 在过去的四个月中，我全身心投入到一个综合平台的前端开发上，该项目采用的是我搭建的 vue3 基础代码框架(说实话，一开始我也怕到处都是坑...)，而这个基础代码库 （仓库地址） 现在在github上已经收获了 100+ star 了，得到了一些伙伴的肯定与帮助；另外，基于此代码框架的一个中等业务量的综合平台以及后台系统都已经稳定运行在测试环境中，即将发布正式环境(可算是没白摸鱼...)；加上我自身间接性的拖延厌恶症(游戏耍腻了)，于是便想记录一下这段时间的感想，因此，我认为现在是写这篇文章最好的时刻了。 当然，我的表述中也许还有不足和错误，烦请指出。 vue3 现状 vue3 相对于vue2的好处不再介绍，更好的响应式、函数式、模版编译优化等等...但是大多数还未上手或者处于观望状态的伙伴多是有以下的疑问——vue3 现在哪个版本了？坑还多吗？周边生态支持得怎么样？TypeScript支持度以及使用丝滑度怎样？存在浏览器兼容问题吗？Options Api 和 Composition Api 又如何抉择？ 就以上问题，根据个人这段时间开发感受而言，可以简略回答为：距离vue3第一个正式版本One Piece发布将近四个月了，这中间差不多每个月有一次bug修复的小版本更新（极少的功能新增），api 已经稳定

Ant Design of Vue 这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。 特性 # 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Vue 组件。 共享 Ant Design of React 设计工具体系。 支持环境 # 现代浏览器和 IE9 及以上（需要 polyfills ）。 支持服务端渲染。 版本 # 稳定版： 你可以订阅：https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。 安装 # 使用 npm 或 yarn 安装 # 我们推荐使用 npm 或 yarn 的方式进行开发 ，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 $ npm install ant-design-vue --save 来源： https://vue.ant.design/docs/vue/introduce-cn/ 生态 # 来源： https://github.com/vueComponent/ant-design-vue/blob/master/README-zh_CN.md Project Description vue-ref 您可以使用回调来获取组件的引用，类似react ant

蚂蚁金服的design Vue表格 动态合并代码详情! 你好！我们本次合并表格是实现的列 合并 rowSpan 在上代码 之前 我们先讲一下表格 Ui框架： 1、Vue 2、Ant design Vue 表格： 1、行是 colSpan 2、列是 rowSpan design 表格的title 是不计算 索引的 ！ 我们开始贴图上代码，全部代码在文章末尾！ 完成效果： 举例：我们以红框选中列做相同数据合并 1、Vue 展示 Ant table 代码 2、展示 data 数据 3、vue 导出代码 4、methods 方法里面实现 rowSpan 1、 注意 这里 key 是传值 声明方法的时候可以后写 2、使用的时候 在 mounted 里面调用即可 5、customRender 实现合并 代码部分： < template > < a-table :columns = "columns" :data-source = "data" bordered > < template slot = "name" slot-scope = "text" > < a > { { text } } < /a > < /template > < /a-table > < /template > < script > const data = [ { key: "1" , name: "张三" ,

1. 如何自定义表格列头： < a-table :columns ="columns" :dataSource ="dataSource" > < span slot ="customTitle" >< a-icon type ="smile-o" /> Name </ span > </ a-table > const columns = [　　 {　 dataIndex: 'name' ,　　　　// 自定义列表头，则不能设置title属性 align: 'left' , slots: { title: 'customTitle' } 　　// 在这里定义一个slots属性，并设置一个title属性 } ] 页面将会渲染为如下： 2.如何设置自定义单行样式 < a-table :columns ="columns" :dataSource ="dataSource" > < span slot ="action" slot-scope ="record, index" > 　// 这里传入的值分别是：record：当前行的原始数据，index：当前行的索引 < a @click ="handleEdit(record.key)" > 编辑 </ a > </ span > </ a-table > const columns = [ { title: '菜单名称'

我的需求： select下拉联动，选择模板配置后，字段配置重新获取，此时要清空之前已选的字段 代码: <template> <div> <a-form class="dataForm" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" @submit ="handleCancel"> <a-form-item label="模板配置" v-model="osType"> <a-row :gutter="16"> <a-col class="gutter-row" :span="22"> <a- select placeholder ="请选择" style ="width: 100%" v -decorator="['osType',rules.osType]" @change ="changeOsType" > <a-select-option v- for ="(item,index ) in modeListArr" :key="index" :value="item.key"> {{ item.value }} </a-select-option> </a-select> </a-col> <a-col class="gutter-row" :span="2"> <a-icon type=

在使用ant design vue 的ve-ring组件时要实现在中间显示文字的效果 效果图： 实现原理，显示环形图标题，并将标题位置设置到图形中间 实现方法： 1. 首先引入组件标题 import "echarts/lib/component/title"; 网上各种资料查很多都未提到这一步，重要的放前面！！！！ 2. 设置title属性 const title = { show: true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '54',//主标题文本，'\n'指定换行 link: '',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） subtext: '2020-07-20',//副标题文本，'\n'指定换行 sublink: '',//副标题文本超链接 subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） x: 'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） y: '30%',//垂直安放位置，默认为top

2017年的时候用过codemirror,当时用的是jQuery库、codemirror、beautify插件。主要实现代码的编辑功能、插入一些变量功能、beautify插件主要用来格式化代码，实现代码美化效果。不过这两年做项目都是用vue了，需要用到代码编辑器，于是我又找到了代码编辑器vue-codemirror，感觉组件再变，其原理、底层还是没多大变化，用vu e-codemirror,codemirror的方法，配置参数都是通用的，今天我就来分享一下我今天研究的vue-codemirror用法及一些坑的填法。我需要声明一点是我们项目用到的是框架ant-design-vue,所以弹窗我也直接拿来用了，有不懂的童鞋，可以参考 www.antdv.com/components/… 。 1. 需要实现codemirror编辑器功能，主要是json数据的编辑 codemirror基本的编辑代码功能 插入变量功能 codemirror验证功能：主要验证代码格式，语法等，给出相应的提示 代码格式化（由于主要是json数据，所以暂时没引用其他组件，如果需要建议引用 js-beautify ，因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法） 大致如下图： 2. 写功能前需要安装的一些组件及用法简单说明，vue的就不说了，就光说这个编辑器需要的 2.1

.NET Core前后端分离快速开发框架(Core.3.1+AntdVue) 引言 简介 环境搭建 开发环境要求： 基础数据库构建： 数据库设计规范 运行 使用教程 系统配置 快速开发 管理员登录 系统用户管理 系统角色管理 权限管理 接口秘钥管理 系统日志 操作日志 事务使用 读写分离分库分表 常见疑问 如何进行联表查询 如何切换数据库类型 如何使用多个数据库 结语 引言 时间真快，转眼今年又要过去了。回想今年，依次开源发布了 Colder.Fx.Net.AdminLTE(254Star) 、 Colder.Fx.Core.AdminLTE(335Star) 、 DotNettySocket(82Star) 、 IdHelper(47Star) ，这些框架及组件都是本着以实际出发，实事求是的态度，力求提高开发效率（我自己都是第一个使用者），目前来看反响不错。但是随着前端和后端技术的不断变革，尤其是前端，目前大环境已经是前后端完全分离为主的开发模式，在这样的大环境和必然趋势之下，传统的MVC就显得有些落伍了。在这样的背景下，一款前后端分离的.NET开发框架就显得尤为必要，由此便定了框架的升级目标： 前后端分离 。 首先后端技术的选择，从目前的数据来看，.NET Core的发展远远快于.NET Framework，最简单的分析就是Colder.Fx.Core

在使用日历组件时默认为英文 要实现中文显示需要进行国际化设置，在引用moment时进行设置 ``` import moment from 'moment' //日期框国际化 import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'; moment.locale('zh-cn'); ``` 设置完成后效果图 来源： oschina 链接： https://my.oschina.net/u/4324616/blog/4407142