vue实现穿梭框
用vue实现穿梭框,样式自己简单写了一下css,交互功能主要包括选项的单选、多选、反选功能,选项右上角的选中/选项总数展示,最后就是数据左右穿梭啦。实现基本效果如下图:好了,接下来我们开始实现逻辑效果:一、数据左右穿梭的功能,先给左右按钮加上点击事件,将选中的数据取出来追加到右边,在源数据删除掉这些数据,这时别忘把截取移到右边数据的选中状态取消。上代码:二、然后是实现选项的单选、多选、全选功能。点
·
用vue实现穿梭框,样式自己简单写了一下css,交互功能主要包括选项的单选、多选、反选功能,选项右上角的选中/选项总数展示,最后就是数据左右穿梭啦。实现基本效果如下图:
好了,接下来我们开始实现逻辑效果:
一、数据左右穿梭的功能,先给左右按钮加上点击事件,将选中的数据取出来追加到右边,在源数据删除掉这些数据,这时别忘把截取移到右边数据的选中状态取消。
上代码:
二、然后是实现选项的单选、多选、全选功能。
点击全选按钮,将全选checkbox的选中状态值赋给每一个选项,然后在计算属性里根据选项的选中状态来返回全选按钮的值。
三、最后就是右上角的选中/选项总数展示和数据为空时的按钮置灰状态啦,选中数量可以通过计算选中数据的长度表示,这里通过计算属性来做,然后按钮置灰就是通过数据源的长度来作为控制条件。
右上角数据显示:
按钮置灰:
OK,这样基本差不多就完事啦。
更多推荐
已为社区贡献1条内容
所有评论(0)