vue.js + elementUI实现动态渲染折叠面板,以及里面的CheckBox全选

JavaScript022

vue.js + elementUI实现动态渲染折叠面板,以及里面的CheckBox全选,第1张

1、折叠面板动态生成,通过positionID的唯一标识将不同的折叠数据进行输出,name值为positionID,方便控制折叠面板的展开和折叠;

2、折叠面板内容的动态生成【全选按钮,CheckBox组】,相互不冲突。通过positionID:XXX这种数据格式存放数据,XXX为CheckBox的数据;

3、控制其中一个折叠面板有数据选中时,其他面板进行折叠不可用;无选中数据时,所有面板展开可用;这里点击单个CheckBox的时候或者全选按钮的时候动态开始匹配,获取当前操作面板的positionID,如果有选中数据就将其他的折叠设为不可用,若无选中则将所有面板设为展示可用;

4、全选按钮,设置三个状态,全选、取消全选、未选中,不同状态对应不同的图标,点击操作时开始进行图标以及相应功能的切换,点击单个checkbox时,获取当前选中的组进行匹配,更新全选按钮的状态。

1、CheckBox的key值设置为key-positionID,保证每次click或者change都能找到当前操作的面板,保证唯一性,保存时再通过split('-')进行处理;

2、通过positionID的唯一性,标识不同面板关联的数据;

你可以声明一个变量tmp

<a v-for="(index, item) in tmp" href="{{item.href}}" class="swiper-slide item">{{ index }}</a>

然后在点击事件中改变tmp为a或b。