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项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue Element plus使用方法梳理
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
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
使用js 设置url参数
2013/07/08 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
2020/07/19 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python可变参数用法实例分析
2017/04/02 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python实现的建造者模式示例
2018/08/06 Python
python开发游戏的前期准备
2019/05/05 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
linux面试题参考答案(6)
2016/06/23 面试题
培训主管岗位职责
2014/02/01 职场文书
模范家庭事迹材料
2014/02/10 职场文书
成绩单公证书
2014/04/10 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Python合并多张图片成PDF
2021/06/09 Python
深入理解go slice结构
2021/09/15 Golang
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电