iview 实现treeSelect

2024-09-08

iView的tree组件实现单选功能

iView中的树组件有复选框可以多选,但是目前还没有提供单选框的模式,不显示复选框可以提供高亮单选的模式,但是再次点击就被取消了,没有实现真正的单选: tree 的属性配置中 multiple 是否支持多选,是在不显示复选框的时候生效的,不能控制复选框支不支持多选: 实现单选功能中用到了: :show-checkbox="true" // 是否显示复选框 :check-strictly="true" // 显示复选框的前提下,是否让父子节点不联动 :check-d

基于 Vue.js 之 iView UI 框架非工程化实践记要

像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引用一下,不需要就删除.故观念使然,尽管 Nuget 和 Maven 用得顺溜,但对 NPM 仍不带感,兴许是周边无人带动的稀薄气氛,也或者是没参加过类似的大型活动,于是在自发性上差了许多.再者,我不用 MVVM 模式,领导也不会扣绩效. 为了快速体验 MVVM 模式,我选择了非工程化方式来起步,并选择使用 Vue.js,以及基于它构建的 iView UI 框架. V

iView的使用【CDN向】

直接粗暴地上html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>iview example</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.

iView的使用【小白向】

首先看这篇:构建Vue本地开发环境(现阶段还不知道怎么用CDN的方式做...) 安装iView(WindowsPowershell或cmd下用cnpm) 编辑上一篇博客创建的Vue工程先到main.js文件中添加对iView的引用: 别忘了这一句也要添加上: Vue.use(iView) 然后在Vue的工程中找到App.vue这个文件,修改template标签的代码这里我用Tabs控件作为演示. cmd或者powershell中就会出现信息刷新,因为这整个工程是要在B/S架构中运行的,直接双

Vue + iView + vuex + vee-validate 完整项目总结

build/*.js config/*.js src/旧代码文件夹部门最近的一个新项目启动,很幸运由我来主导整个前端部分的技术选型和整体架构,项目工作量很大,但是却没有足够的人手,只有三个连CSS都不太会的实习生跟着我一起做,压力山大.两个月以来,虽然遇见了很多问题,但是最终顺利的解决了,项目基本完成,果断写一篇总结,毕竟是第一个真正意义上全权自己负责的大项目 . 一.技术选型. 如果没有接触过新的知识,我可能会像之前的部门的所有项目一样,按部就班的使用Jquery + bootstrap +

vue.js 与iview官网

vue.js https://cn.vuejs.org/v2/guide/instance.html#生命周期图示 iview https://www.iviewui.com/components/tree

Iview的开发之路

采用了Vue-cli的方式. 1.反向代理 devServer: { host: '127.0.0.1', port: 9000, proxy: { '/gonghui/': { target: 'http://127.0.0.1', secure: false, changeOrigin: true, pathRewrite: { '^/gonghui': 'gonghui' } } }, historyApiFallback: { index: url.parse(options.dev ?

vue+iview实现动态路由和权限验证

github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Github地址 iview-dynamicRouter 实现目标客户端从服务端拿到路由和权限数据后,刷新项目的路由和菜单列表,并进行权限控制. 项目基础基础框架: iview组件库官方模板项目 iview-admin 的template分支项目,此项目为iview-admin的基础框架代码.项目地址:

在iview的Table中添加Select（render）

首先对Render进行分析,在iview官方的文档中,找到了table插入Button的例子: { title: 'Action', key: 'action', width: 150, align: 'center', render: (h, params) => { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '5px' }, on: { cl

iview源码解析（1）

概述公司技术栈开始用vue主导开发,但因为公司前端会vue的不多所以在项目中用到vue的技术不是很深,之前出去面试被接连打击,而且本来打算开始为公司vue的项目构建自己的组件库所以去下载了iview 的源码打算研究一番,学习大神的组件封装模式和vue的深层技术的运用,随便写博客系列来记录下自己的心得,因为是个人总结所以可能在认识会有点局限也欢迎各路大神一起讨论学习. iview目录结构 1.assets-图片存放目录 2.build-Webpack配置存放目录 3.dist-打包之后页面存放

vue UI库iview源码解析（2）

上篇问题在上篇<iview源码解析(1)>中的index.js 入口文件的源码中有一段代码有点疑惑: /** * 在浏览器环境下默认加载组件 */ // auto install if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } 在引用 iview 组件的时候需要 Vue.use(iView, { locale }); 注册组件,即使不执行 use 也把组件注册了,这两段代码不是

使用.Net Core+IView+Vue集成上传图片功能

最近的项目里有上传图片的功能,当然这个功能在项目里是必须要有的,那么目前这个项目是使用完全的前后端分离,在选择文件上传的组件中还是选择了全面支持Vue的IView,任何上传图片都是通过HTTP请求,服务端从request中读,那么思路有了,直接创建webapi项目吧. 一般来说,在.net core中静态文件应该放到wwwroot,在其中创建一个文件夹. 再做好跨域的东西,一般都是通过cors包.创建控制器,代码如下: public class IndexController : Control

iview起步

ivew是一套基于vue的高质量的ui组件库.使用它我们可以非常简单的得到非常美观的页面和非常棒的用户体验. 1. 获取源码前往github下载源码,下载地址:https://github.com/iview/iview-admin. 2. 安装模块包 (1)将下载的源码解压,放在D盘,重命名 iview-admin: (2)打开cmd,进入源码目录,执行命令 cd d:/iview-admin: (3)安装模块,执行命令 npm install,等待安装完成. 3. 运行执行命令,npm

elementUi、iview、ant Design源码button结构篇

在看elementUI的button组件的时候,一起和iview.ant Design的button组件比较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功能那些会用到哪些会相对比较好. 我们先来看这三个UI的button对外开放的功能结构: elementUI button: iview button: ant Design button: 可以看出iview和ant Desgin的button的功能很像,而element的button的功能少了个

iview 将table的selection多选变单选方法

相信很多使用iview的朋友,在用到table,都会遇到需要使用selection的场景,但是总会有那么一个产品汪,觉得iview的单选效果不好,非要用selection的来做单选,那么下面这个方法就能解决这个问题:{ title: '选中', align:'center', key: 'checkBox', render:(h,params)=>{ return h('div',[ h('Checkbox',{ props:{ value:params.row.checkBox }, on:{

thinkphp5+vue+iview商城公众号+小程序更新版本

thinkphp5+vue+iview商城加分销源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:demo 密码:crmeb.com

iview 非 template/render 标签转换

在非 template/render情形下使用 iview,发现除了官方的一些需要注意的点外,还有一些其他需要注意的,这里记录下,防踩坑: 官方说明: 在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker. 以下组件,在非 template/render 模式下,需要加前缀 i-: Button: i-button Col: i-col Table: i-table Input: i-input

iView -- TimePicker 自定义修改时间选择器选择时间面板样式

iView官方组件展示效果: 期望的最终效果: 为什么要修改期望效果? 项目需要只选择小时,分钟跟秒的不需要,而官方并没有直接相关的小时组件或者是设置显示成小时或分钟或秒的时间选择器,因为自己直接修改样式. 原生js 代码,如下: <script> window.onload = function() { // change text of the panel left document.querySelector('.ivu-picker-panel-content-left .ivu-ti

iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能

emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面都要做这样的效果,几十个页面的话,每个页面都写就好麻烦了(以后领导突然说要说自己丑的才能看,改几十个页面,就更加蛋疼了). 所以,我做了这样的操作,同样的代码,我就在app.js里加了这行代码,就搞定了,扩展性感觉也还是可以的. 看图: 这样以后改一个文件就行了. 如果还有其他更好的方法,欢迎提出来

iview安装使用

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 安装 cd 项目 cnpm install iview -S 在项目中引入iview 在入口文件main.js中配置 import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iView) 官网示例 <template> <div class="MyIviewDemo"> <h

【Vue】IView之table组件化学习（二）

最基本的绑定table是这样的,需要columns和data两个属性. <template> <Card> <h4>表格栗子</h4> <Table :columns="cols" :data="stuList"></Table> </Card> </template> <script> export default { data(){ return { co

iview 实现treeSelect

热门专题