Vue多选列表组件深入详解


Posted in Vue.js onMarch 02, 2021

多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素。这是一种常见的设计元素。有时候为了节省空间,我们会将选项折叠于 Combo Box 中。为了方便用户操作,这个组件还将添加 Select All 和 Clear All 两个按钮,允许用户快速选择或清除选择。这个 UI 元素曾被运用于 Correlation Plot App 中。

Vue多选列表组件深入详解

注册组件

注册 Multi-Select 组件,简单来说就是复制粘贴已封装好的代码部分。此处建议注册全局组件。

设计该元素的时候考虑了两种模式:第一种是每次点击新选项将保留旧选项并添加新选项,如上述示例图形。这种是较为常见的一种方式。第二种是每次点击新选项则清除旧选项仅保留新选项。若使用这种方式进行多选,则需要利用Ctrl/Shift键。这种设计能便于用户在每一次的点击中消除旧选项。若使用第二方式,需要替换事件@click.exact="AddToOrDeleteFromSelectedColumns"@click.exact="ClickOnColumnListItem"

<script type="text/x-template" id="multi-select-template">
…
   <tr v-for = "(item,index) in columns" 
     @click.exact="AddToOrDeleteFromSelectedColumns"
     @click.shift.exact="AddMultipleToSelectedColumns"
     @click.ctrl.exact="AddToOrDeleteFromSelectedColumns"
     :title="function(item){if(item.longname){return 'Short Name: ' + item.name + '\n----------------\n' + item.longname}else{return item.name}}(item)"
     class="column-list-entry">
   ...
   </tr>
</script>
<script>
Vue.component("multi-select", {
  template: "#multi-select-template",
…
</script>

调用组件

直接添加自定义标签 调用组件。

<multi-select :legend_name="legend_name"
       :columns="columns"
       :selected_columns="selected_columns"
       @update_selected_columns="onSelectedColumnsChange">
</multi-select>

传递数据

最后还需要对组件传递数据。我们可以利用 v-bind 动态绑定数据到父级组件的数据中。

props 中 legend_name 绑定 Multi-Select 的所需显示的名称,columns 绑定 Multi-Select 的选项, selected_columns 绑定当前的已选项。另外我们还需要在父级实例中定义事件 “onSelectedColumnsChange”,用于刷新 Multi-Select 组件的显示。

data: function(){
   return {
     legend_name: "Input Columns",
     columns: 
     [
       {"name":"A","longname":"Copper"},
       {"name":"B","longname":"Aluminum Aluminum"},
       {"name":"C","longname":"Calcium"},
       {"name":"D","longname":"Calcium"},
   ],
     selected_columns: [],
   }
 },
... 
methods:{ 
   onSelectedColumnsChange:function(new_columns) {
     this.selected_columns = new_columns;
   },
 },
...

到此这篇关于Vue多选列表组件深入详解的文章就介绍到这了,更多相关Vue多选列表组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
VUE递归树形实现多级列表
Jul 15 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 #Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 #Vue.js
vue脚手架项目创建步骤详解
Mar 02 #Vue.js
vue-cli中实现响应式布局的方法
Mar 02 #Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 #Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 #Vue.js
vue实现拖拽进度条
Mar 01 #Vue.js
You might like
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php数组键名技巧小结
2015/02/17 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
微信支付开发交易通知实例
2016/07/12 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
vue组件学习教程
2017/09/09 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
python中将字典转换成其json字符串
2014/07/16 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
python绘制彩虹图
2019/12/16 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
python 调整图片亮度的示例
2020/12/03 Python
自我评价正确写法范文
2013/12/10 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
男方父母证婚词
2014/01/12 职场文书
服务员岗位职责
2014/01/29 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
小学生植树节活动总结
2014/07/04 职场文书
班主任工作实习计划
2015/01/16 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
如何基于python实现单目三维重建详解
2022/06/25 Python