使用vuetify v-combox组件实现快速数据源添加

效果如下图：

当有数据的时候，下拉到下拉框的尾部，会出现快捷的点击添加按钮。当快捷搜索，没有匹配项的，出现点击添加按钮：

使用append-item跟no-data 插槽，当有数据的时候展现append-item插槽，当没有数据的时候，显示no-data插槽。

代码如下：

<template v-slot:append-item v-if='!isNoData'><v-list-item>                <v-list-item-content><div class="new-item" @click="newHandler"><v-icon>mdi-plus</v-icon> Click to create</div></v-list-item-content></v-list-item></template>          <template v-slot:no-data ><v-list-item>                <v-list-item-content><div class="new-item no-data" @click="newHandler"><v-icon>mdi-plus</v-icon> Click to create</div></v-list-item-content></v-list-item></template>

使用vuetify v-combox组件实现快速数据源添加相关推荐

微信小程序组件化快速实现可用模态窗
纵观现代前端框架中(不论ng react vue ) 基本四架马车声明式渲染路由组件化状态管理. 反观小程序开发环境缺失蛮多特性的好在 11月初微信团队,发布了官方的component 化 ...
通过SSIS的“查找”组件进行不同数据源之间数据的合并操作
通过SSIS的"查找"组件进行不同数据源之间数据的合并操作原文:通过SSIS的"查找"组件进行不同数据源之间数据的合并操作为了协助开发还原生产环境中的某些b ...
Stark 组件：快速开发神器 —— 锦上添花
Stark 组件:快速开发神器 -- 锦上添花一.分页二.排序三.搜索 1.关键字搜索 2.组合搜索四.批量操作经过前面几个篇章,我们的 Stark 组件已经能够批量生成 URL,快速实现增 ...
Stark 组件：快速开发神器 —— 页面显示
说道 Stark 你是不是不会想到他--Tony Stark,超级英雄钢铁侠,这也是我的偶像. 不过我们今天要开发的 Stark 组件,倒是跟他的人工智能助手 JARVIS 有些类似,是帮助我们快速开 ...
Stark 组件：快速开发神器 —— 模板设计
说道 Stark 你是不是不会想到他--Tony Stark,超级英雄钢铁侠,这也是我的偶像. 不过我们今天要开发的 Stark 组件,倒是跟他的人工智能助手 JARVIS 有些类似,是帮助我们快速开 ...
Stark 组件：快速开发神器 —— 自动生成 URL
说道 Stark 你是不是不会想到他--Tony Stark,超级英雄钢铁侠,这也是我的偶像. 不过我们今天要开发的 Stark 组件,倒是跟他的人工智能助手 JARVIS 有些类似,是帮助我们快速开 ...
atomikosdatasourcebean mysql_SpringBoot2整合JTA组件实现多数据源事务管理
一.JTA组件简介 1.JTA基本概念 JTA即Java-Transaction-API,JTA允许应用程序执行分布式事务处理,即在两个或多个网络计算机资源上访问并且更新数据.JDBC驱动程序对JTA ...
vb6.0 listview隐藏水平方向滚动条_为Vuetify的UI组件添加滚动条
前言有必要说明,这其实是一个很简单的功能,用原生实现也非常简单: #preview-zone {overflow-y: auto;overflow-x: hidden;height: 90%;wid ...
Vue框架常用组件的快速构建项目Ctrl+c Ctrl+a Ctrl+v第十四课)
不管前方的路有多苦,只要走的方向正确,不管多么崎岖不平,都比站在原地更接近幸福. 在学习技术的道路上:落后又要被挨打.这是现实常用到的组件库:下面的网站在自己空闲时间去看看下面的资源只需要ctrl ...

使用vuetify v-combox组件实现快速数据源添加

使用vuetify v-combox组件实现快速数据源添加相关推荐

最新文章

热门文章