vue实现列表组件,vue 单选

　　本文主要介绍vue的基础组件Vue多选列表组件的详细说明。有需要的同学可以研究一下。

　　多选是一个UI元素，它列出了所有选项，并允许用户使用Ctrl/Shift键进行多项选择。这是一个常见的设计元素。有时，为了节省空间，我们将组合框中的选项折叠起来。为了方便用户，该组件还将添加两个按钮，全选和全清，允许用户快速选择或清除选择。此UI元素已在关联图应用程序中使用。

　　注册组件

　　注册多选组件仅仅意味着复制和粘贴打包的代码部分。这里建议注册全局组件。

　　在设计这个元素的时候，考虑了两种模式：第一种是每次点击一个新的选项，都会保留旧的选项，增加一个新的，如上例图形所示。这是一种常见的方式。第二种是清除旧选项，只在每次点击新选项时保留新选项。如果使用这种方法进行多重选择，则需要使用Ctrl/Shift键。这种设计可以让用户在每次点击时轻松消除旧选项。如果使用第二种方法，则需要将事件@ click . exact= addtoordeletfromselectedcolumns 替换为@ click . exact= clickoncolumlistitem

　　脚本类型=text/x-template id=多选模板

　　…

　　tr v-for=(item，index) in columns

　　@ click . exact= addtoordeletfromselectedcolumns

　　@ click . shift . exact= AddMultipleToSelectedColumns

　　@ click . ctrl . exact= addtoordeletfromselectedcolumns

　　:title= function(item){ if(item . long Name){ return 简称： item . Name \ n-\ n item . long Name } else { return item . Name } }(item)

　　class=列-列表-条目

　　.

　　/tr

　　/脚本

　　脚本

　　Vue.component(多选，{

　　模板： #多选模板，

　　…

　　/脚本

　　调用组件

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

　　多选：legend_name=legend_name

　　:列=“列”

　　:选定的列=选定的列

　　@ update _ selected _ columns= onSelectedColumnsChange

　　/多选

　　传递数据

　　最后，您需要将数据传递给组件。我们可以使用v-bind将数据动态绑定到父组件的数据。

　　在props中，legend_name绑定到所需的多选显示名称，columns绑定到多选选项，selected_columns绑定到当前选择的选项。此外，我们需要在父实例中定义事件“onSelectedColumnsChange”来刷新多选组件的显示。

　　数据：函数(){

　　返回{

　　legend_name:输入列，

　　列：

　　[

　　{ 姓名: A ，长姓名:铜 }，

　　{ 姓名: B ，长姓名:铝铝 }，

　　{ 姓名: C ，长姓名:钙 }，

　　{ 姓名: D ，长姓名:钙 }，

　　],

　　selected_columns: []，

　　}

　　},

　　.

　　方法：{

　　onSelectedColumnsChange:function(new _ columns){

　　this . selected _ columns=new _ columns；

　　},

　　},

　　.

　　本文关于Vue多选列表组件的详细说明到此为止。有关Vue多选列表组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。