vue中多选框的动态渲染、全选反选功能及数据绑定

应该是第一篇真正意义上的技术博客吧。。。

本篇内容主要是介绍一下遇到如题的需求时博主给出的解决方法，其中还遇到了不少坑（压住了自己企图写DOM操作的双手）

晚上要加班，所以时间不是很多只能匆忙写完2333

目前还是实习生，还请多多指教~~~

前情提要

项目后台的前端需要做一个文档编辑的页内组件，已经到了与后端的api对接的阶段，但是测试服务器还没有上线，所以用mock做了一模一样的接口拦截了ajax

内页大概是长这样：

ui框架使用的是iView，右侧操作栏的按钮使根据表格中状态数据动态渲染出来的。其中“查看”和“编辑”按钮会路由到编辑页面。不同的是“查看”并无编辑权限（通过传递一个boolean值给组件内元素的:disabled属性解决）

编辑页面长这个样子：

路由props传递目标文章的id值，在页内mounted时获取数据并渲染进表单各元素，其中“渠道/门店范围”中的“级别”选项和“区域”选项为动态加载（业务需要）。

代码如下：

代码块1

<ul class="xxx" id="xxx">
<li v-for="item in labelListQuery" :key="item.labelId" class="fl w150">
<input
:value="item.labelId"
class="fl eCheckbox"
type="checkBox"
name="sigleBusiness"
:checked="labelCheck(item.labelId)"
:disabled="!isEnabled"
@click="toggleCheckSingle(item.labelId,$event)"
>
<label class="fl pl7 hand" for="level1">{{ item. labelName}}</label>
</li>
</ul>

动态渲染

下面这一段代码是自己定义的一个axios的方法，发送Id获取该文章的内容和页面勾选信息

代码块2

getAnnounceItem(
// 传公告ID 拿item内容
{
"notifyId": this.notifyId
}
).then(res => {
this.annouceItem = res.data.notify
setTimeout(() => {
this.labelListQuery.forEach(element => {
this.allLabelIds.push(element.labelId)
})
console.log(this.allLabelIds)
}, 1)
this.labelIds = res.data.notify.labelIds
})

这里耍了个小聪明使用了setTimeout方法异步拿到allLabelIds数组，同步拿的话该操作会在ajax操作之前数组会undefined

下面这段代码方法与上面属同类，拿到“级别”选单中的选项名称和id

代码块3

getlabelListQuery(
// 传公告ID 拿标签列表
{
"mchtId": this.notifyId
}
).then(res => {
this.labelListQuery = res.data
})

1.li的v-for从代码块3中拿到labelListQuery，取出其title和id进行DOM渲染
2.代码块1中的:checked需要拿到代码块2中的labelIds，对勾选中的id进行判断， 通过如下方法进行勾选

代码块4

labelCheck(id) {
if(this.labelIds.indexOf(id) !== -1){
return true
} else {
return false
}
}

然后就完成动态渲染啦~~~

全选反选

在这里折腾了很久，最后是这样解决的。

首先需要一个数组将所有的选项的id压进去

代码块5

allLabelIds: [],

然后在全选框点击时做如下操作：
其中isCheckAll通过v-bind绑定为全选框的checked值。这里不能使用v-model双向绑定，因为下面方法的第一行代码会再次修改checked值。
勾选时将allLabelIds值赋值给labelIds ，
未勾选时赋值为空数组

代码块6

toggleCheckAll() {
this.isCheckAll = !this.isCheckAll
if (this.isCheckAll) {
this.labelIds = this.allLabelIds
} else {
this.labelIds = []
}
},

勾选选项时数据绑定

单击选项框时更新labelIds 数组，因为labelIds 数组会在提交时发送给服务器，e为点击的$event事件，做出勾选判断，之后将选中的选项压入labelIds或者将取消选中的选项id用splice删除
代码如下：

代码块7

toggleCheckSingle(id,e) {
if(e.target.checked) {
if(this.labelIds.indexOf(id) === -1) {
this.labelIds.push(id)
}
} else {
if(this.labelIds.indexOf(id) !== -1) {
const thisIndex = this.labelIds.indexOf(id)
this.labelIds.splice(thisIndex,1)
}
}
},