分享一个 Vue Element-ui 的两级checkbox动态渲染解决方案

最新推荐文章于 2024-09-05 14:17:30 发布

JC. Lin

最新推荐文章于 2024-09-05 14:17:30 发布

阅读量9.6k

点赞数 1

分类专栏：前端文章标签： Vue.js 前端 element-ui

本文链接：https://blog.csdn.net/qq_31803503/article/details/81538517

版权

本文介绍了一个使用Vue和Element-ui实现两级checkbox动态渲染的解决方案，通过数据驱动来控制checkbox的状态，并展示了如何处理不确定状态。文章还提供了一个事件处理方法mycheck和indeterminate的用法，帮助读者理解这一实现方式。

摘要由CSDN通过智能技术生成

以下是实现方案

使用数据控制checkbox的勾选状态，感觉这种方式不同于jquery的直接操作DOM，刚刚开始使用真的搞不懂，思路一时转不过来，遇到同样问题的同学可以参考我这个做法，有疑问的同学可以留言。

<template>
<div class="content">
<div class="power">
<h4>权限设置</h4>
<div v-for="(permissionTop, topIndex) in tableData" :key="topIndex" >
<p class="checkGroup" style="width:99%;">
<el-checkbox :indeterminate="permissionTop.indeterminate" :key="topIndex" v-model="permissionTop.mychecked" :label="permissionTop.permissionId" @change="onChangeTop(topIndex, permissionTop.permissionId, $event)">{
  {permissionTop.permissionName}}</el-checkbox>
</p>
<div style="margin: 15px 0;"></div>
<el-checkbox v-for="permissionSon in permissionTop.childrenList" v-model="permissionSon.mychecked" @change="onChangeSon(topIndex, permissionSon.permissionId, permissionTop.permissionId, $event)" :label="permissionSon.permissionId" :key="permissionSon.permissionId">{
  {permissionSon.permissionName}}</el-checkbox>
</div>
<el-button class="keep" @click="submitOperatorInfo" >保存</el-button>
</div>
</div>
</template>

事件方法：

data(){
        return{
            tableData: [
            {
                "childrenList": [
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15,"permissionId": 21,"permissionKey": "orderForm","permissionName": "订单","permissionPath": "","showFlag": "1"},
                    {"createTime": 1533707273000,"mychecked": false,"indeterminate": false,"parentPermId": 15,"permissionId": 22, "permissionKey": "user","permissionName": "用户","permissionPath": "","show