vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> <el-col :xs="24" :sm="11" :md="7" :lg="5" class="startTime"> <el-form-item prop="start_time&…

一.在components文件中新建 弹框组件 <template> <div> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="handleClose"> <span>这是一段信息</span> <span slot="footer" class…

Tag 标签组件 <script> export default { name: 'ElTag', props: { text: String, closable: Boolean, //是否可关闭 type: String, //主题 hit: Boolean, //是否有边框描边 disableTransitions: Boolean, //是否禁用渐变动画 color: String, //背景色 size: String //尺寸 }, methods: { handleClose(e…

今天使用element中的Dialog组件时发现一个问题:当Dialog内容过多时会出现滚动条,而当你滚动到一定位置后关闭Dialog,然后再次打开时滚动条仍然保持在上一次关闭前的位置而没有回到顶部. 通常遇到这样的问题解决方法就是在某个钩子事件中将组件的scrollTop值重新设为0,在element2.4.8的文档中,Dialog组件提供的事件一共有四个:open.opened.close.closed,我的想法是在opened事件中等到组件渲染完后将组件的scrollTop值设为0,当时调…

前段时间有朋友私信我 Vue + TypeScript 的问题,然后就打算写一篇 Vue + TypeScript 封装组件的文章 正好公司项目中需要封装一个表头查询组件,就拿出来分享一下~ 组件的整体思路是通过一个 config 数组生成列表的头部表单: PS:配合<Vue 爬坑之路(九)—— 用正确的姿势封装组件>食用更佳 一.组件设计 这个组件由两部分组成:输入组件和按钮 其中输入组件可以通过 v-for 循环渲染,并通过 v-if 来切换输入框 input 和下拉框 select 每个…

给表头添加一个底部分割线 固定表格的内容高度 添加底部按钮 <template> <div> <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button> <el-dialog title="添加成员" :visible.sync="dialogTableVisible&quo…

需求:在页面的代码太多,想把弹窗代码提取为子组件,复用也方便.   这里涉及到弹窗el-dialog的一个属性show-close: show-close="false"是设置不显示关闭按钮,因为弹窗显示状态值(:visible.sync)是从父组件传递的参数,如果使用自带的关闭按钮,会报出一个错误: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p…

我们前端做项目时,难免会遇到地址输入,多数情况下,我们都是提供一个省市三级联动,加上具体地址输入的Input输入框给用户,用以获取用户需要输入的真实地址.在需要对用户输入的数据进行校验的时候,我们会单独针对省市的三级联动和具体地址栏单独校验.也基本上能够完成项目需求. 然而当我们转向vue+element做项目时,会产生一个比较尴尬的问题.在element组件库当中,对需要校验的字段是通过在el-form-item这一组件标签名上添加prop属性来校验的,如果依然按照以前的方法对省市联动和地址栏…

<template> <section class="ces-table-page"> <!-- 表格操作按钮 --> <section class="ces-handle" v-if='isHandle'> <el-button v-for='item in tableHandles' :key='item.label' :size="size || item.size" :type=&qu…

//关于封装的el-table行数据更新后如何局部更新row row.status=status; this.$set(this.$refs.elTable.$data.tableData,index,row): //这样就无需刷新整个elTable   //以下是el-table写法 amendList(index,row){ this.amend=true; this.tableRow=row; this.tableIndex=index var result={}; for (var ke…