2021-09-07 树形控件设置

树形控件设置

 <el-form-item label="角色权限" :label-width="formLabelWidth">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-checked-keys="dafaultKey"    
          :props="defaultProps"
          ref="tree"
        >
        </el-tree>
      </el-form-item>
       <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" v-if="info.isAdd" @click="confirm">确 定</el-button>
      <el-button type="primary"  v-else>添加</el-button>
    </div>

    props:['info'],
  data(){
      return{
          form:{
              rolename:'',
              menus:'',
              status:1,
              
          },
          formLabelWidth:"120px", 
          defaultProps: {
          children: 'children',
          label: 'title'
        },
        dafaultKey:[ ]   //默认选中的key值
      }
  },


方法：
  cancel(){
          this.info.show = false;
          this.form = {
            rolename:'',
            menus:'',
            status:1
          };
          // 让选中的key值清空   setCheckedKeys()是设置节点key值
          this.dafaultKey = this.$refs.tree.setCheckedKeys([])
      },
      confirm(){
        // getCheckedKeys()是获取节点key值
        this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());   //将数组转化为字符串形式的数组
          console.log(this.form);
      }


 mounted(){
      this.requestMenuList()
  }