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

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

---

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

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

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

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

前情提要

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

内页大概是长这样：

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

编辑页面长这个样子：

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

代码如下：

代码块1

        

          

            
            {{ item. labelName}}
          
        

动态渲染

下面这一段代码是自己定义的一个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)
          }
        }
      },