关闭

Vue.js 多选列表(Multi-Select)组件

时间: 2021-03-04阅读: 411标签: 组件

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



注册组件


注册 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;
      },
 },
...


源代码

Github

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/10167

react-native时间轴组件的使用

最近在写公司的项目,因产品设计需求,需要类似如下的效果,像是一个时间轴。本着不重复造轮子的目标,在最喜欢的github上找寻合适的组件

Vue 中,如何将函数作为 props 传递给组件

Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?

Vue组件化开发

学习组件化开发,首先掌握组件化的开发思想,组件的注册方式,组件间的数据交互方式,组件插槽的用法,vue调式工具的用法,组件的方式来实现业务逻辑功能。组件化开发思想,组件注册,组件调式,组件间的数据交互,组件插槽

Vue父子组件双向绑定传值的实现方法

从某方面讲,父组件传值给子组件进行接收,之后在子组件中更改是不允许的。你会发现vue也会直接报错,而在封装一些组件的时候,又希望做到数据的双向绑定,可以更好的控制与使用,在网上找到了两种方法

Vue.js组件切换方式

这里,我用一个注册登录两组件的切换实例来演示:这个方式唯一的缺陷就是只能在两个组件之前切换,当要求需要三个及三个以上的组件切换的时候,这就不行了(原因是 flag 只有 true 和 false 两个值)

编写 Vue.js 组件前需要知道的 10 件事

本文介绍了编写 Vue.js 组件前需要知道的 10 件事,其中包括:组件可以全局或局部加载;延迟加载 / 异步组件;必需的 Props;使用 $emit 触发自定义事件;多 Props 绑定和覆盖等等。

Vue组件的操作:自定义组件,动态组件,递归组件

v-model双向绑定创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。

less组件库主题定制; 给项目设置常用样式common.less

一般组件库的样式编写都会为使用者设计一些主题样式更换方案,我这里根据自己对主流组件库antd和iview的研究,总结出这两类:iview引入主题样式,复写,antd通过less-loader的modifyVars注入主题变量

element-ui 的隐藏滚动组件el-scrollbar

为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用的框架是Vue,然后用的组件库是Element,Element官网也有很多滚动

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!