vue element tree组件使用

vue element tree 在项目中经常会使用到，例如权限配置，组织架构配置，菜单配置等等

注意:check-strictly="true"是取消父子级关联，如果需要父子级关联就删掉这个配置

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  ref="tree"
  :default-checked-keys="defaultCheckedIds"
  :check-strictly="true"
  default-expand-all
  :props="defaultProps">
</el-tree>


<el-button type="primary" @click="showMask2=false" icon="el-icon-circle-close">取 消</el-button>
<el-button type="success" @click="setAllCheckedKeys" icon="el-icon-finished">全 选</el-button>
<el-button type="info" @click="resetChecked" icon="el-icon-delete">清 空</el-button>
<el-button type="primary" @click="submitTree" icon="el-icon-circle-check">确 定</el-button>


export default {
	data() {
		return {
			treeData: [],
			defaultCheckedIds:[],
	        defaultProps: {
	          value:'id',
	          children: 'childrenList',
	          label: 'name'
	        }
		}
	},
	methods:{
		//初始化tree data数据
		initTreeData(){
	        let params = null;
	        this.$commonAjax.post('/xxx/xxx', params,
	          (json)=> {
	            if (json.code == 0) {
	              this.treeData = json.content;
	            } else {
	              this.$message.error(json.message);
	            }
	          },
	          (error)=> {
	            this.$message.error("系统繁忙请稍后再试!");
	          }
	        );
    	},
		//设置tree checkbox 选中
	    setAllCheckedKeys() {
	      this.$refs.tree.setCheckedNodes(this.treeData);
	    },
	    //清空tree checkbox
	    resetChecked() {
	      this.$refs.tree.setCheckedKeys([]);
	    },
	    //获取选中的checked id，注意返回的是long id 数组
	    getDefaultCheckedIds(){
	    	let params = null;
			this.$commonAjax.post('/xxx/xxx', params,
	          (json)=> {
	            if (json.code == 0) {
	              this.defaultCheckedIds = json.content;
	            } else {
	              this.$message.error(json.message);
	            }
	          },
	          (error)=> {
	            this.$message.error("系统繁忙请稍后再试!");
	          }
	        );
		},
		//点击确定按钮提交后台
		submitTree(){
			//这里获取的tree 选中的 checked 返回的是 id 数组
	        let ids = this.$refs.tree.getCheckedKeys();
	        if(ids.length == 0){
	          this.$message.error("请配置权限再提交!");
	          return;
	        }
	        let params = {
	          roleId:this.currentRoleId,
	          roleCode:this.currentRoleCode,
	          ids:ids
	        }
	        this.$commonAjax.post('/xxx/xxx', params,
	          (json)=> {
	            if (json.code == 0) {
	              this.$message.error("权限配置成功");
	            } else {
	              this.$message.error(json.message);
	            }
	          },
	          (error)=> {
	            this.$message.error("系统繁忙请稍后再试!");
	          }
	        );
		},
	},
	mounted() {
      this.initTreeData();
    }
}