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

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

---

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

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

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

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

前情提要

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

内页大概是长这样：

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

编辑页面长这个样子：

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

代码如下：

代码块1

        <ul class&