vantUI通过二级选择器控制一级的选中状态
上一篇我们已经利用van-checkbox成功实现一级选择器控制二级全选的功能，点击此链接>>查看。接下来需要实现当取消任意一个二级选择器的选中状态（即取消全选状态时），一级选择器也同步取消。首先给二级选择器添加click事件，同样，不要给复选框组添加change事件，避免一级选择器选中状态变化时change事件会一直触发。复选框组通过 v-model 数组绑定复选框的勾选状态，通过name控制数...
elementui 基于el-tree 实现同步状态修改
上一篇我们实现了el-tree中子节点的选择与添加，此外，我们还需要实现点击右侧删除按钮的时候，左侧选择器的选中状态同步改变，checkList数组和checkIdList数组对应的数据能够同步删除。由于左侧与右侧绑定的是同一数组，只需要删除时传入item，将checkList中的item删除，左侧选择器的选中状态就可同步改变。如图：此时还需要删除checkIdList数组中对应的id。可先循环后...
Vue中的表单内容监听，当表单内容发生变化时，触发一些事件
首先解释一下什么是表单内容监听，我这里是将表单数据全部储存到list变量中，当用户填写了内容之后，将用户填写的内容更新到list变量中，说是监听表单内容实际上是监听变量中的数据内容。监听数据变化可以用watch方法，它是Vue组件中的一个功能，可以监听数据变化，并在数据变化时执行一些操作。watch方法使用起来比较简单，只需要传两个参数就可以，第一个参数是需要监听的变量数据，第二个参数则是当监听的...
elementui 基于el-tree树形选择向后台传输数据
之前已经基于el-tree实现了人员选择功能。点击此链接>>查看。但由于后续操作，我们还需要把选中数据的id值传给后台，所以现在还应想办法获取每条数据的id值。给el-checkbox添加change事件，当监听到选中值时执行如下方法，有则删除，没有则添加：现在checkIdList数组中存的是选中数据的id值,由于后端接收的参数是字符串列表，id由，分割所以直接将数组join一下就得到了例如：1...
elementui 基于el-tree树形选择器实现人员选择功能
之前已经基于el-tree实现了一个只有最后一级子节点可选择的层级选择器。点击此链接>>查看。现在希望实现选中之后，右边能同步展示已选择的内容。如图：后台数据如图所示，将获取到的数据绑定到el-tree上，现在checkList数组中存的是每一条数据的label值。想实现右边同步展示已选择的内容，只需要为其绑定checkList数组即可，如图所示：Ps：右边使用的是vuedragger拖拽，有关拖...
利用vantUI中的van-checkbox实现层级选择器（一）
翻了一下vantUI官网，发现没有可以直接使用的树形控件或层级选择器的组件，所以尝试用checkbox实现。我们想实现的是如图所示的功能，当选中一级选择器后，其所属的二级选择器能够被全选；当取消二级选择器的全选状态时，一级选择器也同时取消选中状态；最外层还有一个全选按钮控制所有选择器的全选。DOM结构如图所示：首先实现一级选择器控制二级全选的功能。van-checkbox有提供toggleAll方...
