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的mixin策略
Nov 19 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue实现todo应用的示例
Feb 20 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue特效之翻牌动画
Apr 20 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学习 变量使用总结
2011/03/24 PHP
php把session写入数据库示例
2014/02/26 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
微信支付开发维权通知实例
2016/07/12 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
客户端静态页面玩分页
2006/06/26 Javascript
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
2016/08/31 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
python之import机制详解
2014/07/03 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python安装selenium包详细过程
2019/07/23 Python
使用Pycharm分段执行代码
2020/04/15 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
python批量修改文件名的示例
2020/09/27 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
先进集体获奖感言
2014/02/13 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
家长会后的感想
2015/08/11 职场文书
2016小学新学期寄语
2015/12/04 职场文书