vue 权限树el-etree设置默认勾选

 1. :default-checked-keys="midPwList"  //给它赋值就会默认勾选中
 <el-table
      :data="tableData"
      border
      :row-class-name="rowClassName"
      ref="multipleTable"
    >
      <el-table-column  label="操作" width="300">
        <template #default="scope">
			<el-button type="text" size="medium" @click="quanxian(scope.row)">权限</el-button>
        </template>
      </el-table-column>
    </el-table>
	  <el-dialog
	      title="权限"
	      v-model="quan_xian"
	      width="30%"
	      :before-close="cancel1"
	      center>
	      <el-tree
	        ref="tree"
	        :data="datalist"
	        show-checkbox   //复选框
	        node-key="id"
	        :default-checked-keys="midPwList"
	        :props="{children: 'children',label: 'menuName',value:'id'}">
	        <template #default="{node,data}">
	            <span class="custom-tree-node" >
	            <span>{{ node.label }}</span>
	            <span>
	                <el-tag closable size="mini" v-for="(item,index) in data.btnBean" @close="cancel(item.id)"  :key="index">{{item.btnname}}</el-tag>
	            </span>
	            </span>
	        </template>
	      </el-tree>
	      <template #footer>
	      <span class="dialog-footer">
	        <el-button @click="cancel1">取 消</el-button>
	        <el-button type="primary" @click="quanxian1" :loading="loading">确 定</el-button>
	      </span>
	      </template>
	    </el-dialog>
    export default{
        data(){
            return{ 
                loading:false,
                quan_xian:false,//权限false 
                datalist: [],    //获取树数据
                midPwList:[],   //设置默认勾选数组
                arrid:[]//id数组集合
            }
        },
         methods:{
           //获取后端返回数据的权限id集合给树默认勾选赋值 
         	quanxian(){
         	     this.quan_xian=true
			      this.$nextTick(()=>{
			        this.midPwList = JSON.parse(JSON.stringify(row.listRole));
			      })
         	},
            //清空所选node
		    clearnode(){
		      let node = this.$refs.tree.getNode(this.datalist[0].id).parent;
		      node.childNodes.map(val=>{
		        val.checked = false;
		        if(val.childNodes&&val.childNodes.length>0){
		          val.childNodes.map(value=>{
		            value.checked = false
		          })
		        }
		      })
		    },
            //取消
            cancel1(){
		      this.quan_xian=false;
		      this.clearnode();
		    },
           //权限修改保存的时候
           quanxian1(){
               //获取选中树的数组id集合 如:[10,11]
              let arr=this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
              this.arrid=arr;
              if(this.arrid.length>0){
	             this.loading=true;
	            this.$http({
		              url: Api.updateAccountMenu.url,
		              method: Api.updateAccountMenu.method,
		              data:{
		                id:this.addform.userid,
		                listRole:this.arrid,
		              }
	                }).then(res=>{
	                this.loading=false;
	                if(res.status==200){
	                  this.quan_xian=false;
	                  this.search();
	                  this.$message({type:'success',message:res.message});
	                }
            })
          }else{
			 this.$message({type:'error',message:'权限菜单不能为空,请选择权限菜单!'});
          }
       }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值