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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 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
常用的php对象类型判断
2008/08/27 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python采集微信公众号文章
2018/12/20 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python中logging日志库实例详解
2020/02/19 Python
全球度假村:Club Med
2017/11/27 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
客户接待方案
2014/02/26 职场文书
党员剖析材料范文
2014/12/18 职场文书
领导干部失职检讨书
2015/05/05 职场文书
新郎结婚感言
2015/07/31 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
话题作文之学会尊重
2019/12/16 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python