2019年08月_qq_36437172

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月 01月

转载 input 实现 rate 评分组件

像rate评分组件一般都用javascript写，所以这次将是一个全新的尝试，用css实现一个rate评分 ❗ 核心代码也就三行一、效果图二、原理主要是借助radio单选框，梳理如下：去找个好看的iconfont；借用5个radio单选框，把默认样式都去掉，显示默认的星星；用checked伪类监听用户选中✅，由默认的星星变成高亮的星星；然...

2019-08-29 00:11:47 777

原创 input checkbox 实现开关样式

<input type="checkbox" class="tt-switch" checked>去除 input 选择框默认样式：/* 去掉webkit内核里默认的样式 */-webkit-appearance: none;/* 去掉webkit内核里默认的点击效果 */-webkit-tap-highlight-color: rgba(0, 0, 0, 0);...

2019-08-28 23:52:17 822

原创基于ant-design-vue table 组件的使用

需求分析：这里主要介绍表格的字段渲染（筛选和排序），分页设置，选择功能设置等功能。1.表格渲染（筛选和排序）<a-table ref="TableInfo" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading" :rowSelection="...

2019-08-28 23:45:12 7238

原创 element UI 中 el-form 表单包含多个 el-input 时的校验方法

需求场景：当一个Form-Item 下有多个输入框或者一个选择框时，同时该 Form-Item 为必填项，我们应该如何验证其下的各个输入框/选择框呢？方案一：<div class="flex-row"> <el-form-item label="加班标准" required> <div class="flex-row"> &...

2019-08-28 23:36:38 15089 3

原创 vue element-ui 循环表单

需求场景：表单中有用户基本信息，同时用户可以具有0个或多个项目经验，由此分析项目经验应该是数组的，那么我们应该如何制作这个循环表单呢？<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <div class="item-title">工作案例-其他工作案例</div>...

2019-08-28 23:34:39 3775

转载 element-ui el-tree 获取当前选中数据（含半选中的父节点）之进阶版

问题描述：官方提供了获取半选节点的API,但是回显会有一些没有选中的节点都勾选上了，那怎么办呢？重新回到设置 check-strictly 为 true 时，父子级不互相关联，挨个点击用户体验不好的问题，同时也避免了出现半选的情况。我们简化用户的操作：1、当点击勾选复选框时候，若状态为选中1.1、其所有父节点（父节点、父节点的父节点以此类推）全部统一跟随当前节点变化为选中 ...

2019-08-28 23:31:17 30283 3

原创 JS 递归树结构数据查找所有叶子节点

JS 递归树结构数据查找所有叶子节点export function getAllLeaf (data) { let result = [] function getLeaf (data) { data.forEach(item => { if (!item.children) { result.push(item.path) } ...

2019-08-25 13:48:31 6996

原创 element-ui tree控件获取当前选中数据（含半选中的父节点）

问题描述: 当我们制作一个系统的角色菜单控制的问题时，设置勾选子节点的时候，父节点也应相应选中。如果设置 check-strictly为 true时，则父子级不互相关联，则需要我们手动挨个点击（用户体验不好），我们设置父子级互相关联时，又应该怎样获取到半选的父节点呢？首先我们来看看官网为我们提供的API，getHalfCheckedKeys通过使用 getHalfCheckedKey...

2019-08-24 18:17:58 7422

原创基于vant 使用 ImagePreview 预览图片

1.首先引入ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。import { ImagePreview } from 'vant';2.在图片中添加click事件<div class="img_box" v-for='(item2,index) of images' :key='index'> <img :sr...

2019-08-24 14:36:57 10553 7

原创基于element-ui 使用 upload 预览图片（含删除功能）

我们都知道 upload 是上传文件的组件，但同时可以对上传文件进行预览，这里我才用 upload 预览图片。首先介绍的是list-type：文件列表的类型，可选值：text | picture | picture-card ，默认值为 text.file-list：上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/x...

2019-08-23 12:11:32 24392 5

转载 vue 过滤器(filter)的使用

| 符号前面是过滤器的传参，后面是过滤器的返回值。使用方式：<div>{{ message | formatDate }}</div> <div v-bind:id="rawId | formatDate"></div>很多时候，后...

2019-08-10 20:17:26 673

原创 element-ui form 验证表单输入空格问题

element-ui中自带的表单必填项校验不能去除空格，此时若输入空格，required: true验证还是可以通过。若想正确校验需要去除字符两边的空格。在v-model加上.trim就可以解决。<el-form :rules="rules"> <el-form-item label="名称" prop="name"> <el-input size=...

2019-08-10 19:58:05 8875 5

原创 element-ui form 日期选择器限制选择范围

使用场景：当我们的开始时间和结束时间被要求分开输入时，我们如何让开始时间一定在结束时间的时间前面呢？刚开始我的想法只是通过JS 判断日期的时间戳大小来决定，我就是那个例子，下面我想做的是在用户端限制用户的选择时间。element-ui 中，提供 picker-options 对当前时间日期选择器特有的选项配置。这里主要使用 disabledDate，其返回值为 Boolean类型。这里...

2019-08-10 19:39:32 2789

原创 element-ui table之选择框禁止选中

需求场景：当我们对列表中一下数据选中后，调用接口处理数据中的状态，而对于已经处理了的数据，则不能再次进行处理。可能你首先想到的通过选中的数据，将其中的已处理数据过滤掉。这里我们通过已处理的数据，我们将禁止选中，那怎样才能实现呢？首先我们实现多选: 手动添加一个el-table-column，设type属性为selection即可；然后设置 selectable 属性来决定该行数据是否选中。...

2019-08-10 19:27:38 26931 2