el-tree的使用,以及全選反選獲取id =>詳
阿新 • • 發佈:2020-10-20
<el-tree :data="data" show-checkbox node-key="module_id" ref="tree" highlight-current :props="defaultProps" @check="nodeClick" :check-strictly="ISstrictly" > <spanclass="custom-tree-node"slot-scope="{node,data}"> <span>{{data.module_name}}</span> <!--<span> <el-buttontype="text"size="mini"style="margin-left:5px">({{data.module}})</el-button> </span>--> </span> </el-tree>
data() {return { ISstrictly: true, //編輯的時候 獲取資料時候父子級不關聯 獲取完畢勾選的時候父子級再關聯 防止獲取資料的時候 子級部分是部分選中 卻 顯示 全部選中 checkAll: false, //全選 反選 select_box: [], data: [], //tree defaultProps: { children: 'child', label: 'module_name' }, treeLength:'' //所有的子級加起來的長度 用來判斷全選 和 已選的長度 是否一致 }; },
// 全選
handleCheckAllChange(val) { if (this.checkAll) {
// 判斷true 或者 false this.$nextTick(function () { this.$refs.tree.setCheckedNodes(this.data); }); } else {this.$nextTick(function () { this.$refs.tree.setCheckedKeys([]); }); } this.$nextTick(function () {
// 把勾選的id存起來 console.log(this.$refs.tree.getCheckedNodes(), 'console.log(this.$refs.tree.getCheckedNodes());'); let select_box = []; this.$refs.tree.getCheckedNodes().forEach((item) => { select_box.push(item.module_id); }); this.select_box = select_box; // console.log(this.select_box, 'select_box888'); }); },
//當用戶點選的時候
nodeClick(data, node, e) {
// 把一進來的狀態 父子級是否關聯給取消 this.ISstrictly = false; let select_box = [];
// 獲取到所有已選擇的id 存到數組裡面 select_box = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()); console.log(select_box, 'select_box'); this.select_box = select_box;
// 判斷是否全選了 if (this.select_box.length != this.treeLength) { this.checkAll = false; } else { this.checkAll = true; } },
//獲取當前使用者的許可權列表 getUserAuthList() { this.$axios .post('/platformapi/Auth/getUserAuthList') .then(({ data }) => { console.log(data, '獲取當前使用者的許可權列表'); if (data.code == 1) { this.data = data.data; this.$nextTick(function () {
// this.treeLength = this.$refs.tree.getCheckedNodes().length;
//這個函式是計算出所有子節點的個數 this.treeLength = this.getTreeNodeIDList(this.data); console.log(this.treeLength, '888777'); }); this.$nextTick(function () {this.getSystemUserGroupDetail(); }); } }) .catch((res) => { console.log(res, 'catch'); }); }, //獲取樹列表的所有節點 ==> 這裡是計算出所有子節點的個數 getTreeNodeIDList(data) { var str = 0; const getStr = function (list) { list.forEach(function (row) { if (row.child) { getStr(row.child); str += 1; } else { str += 1; } }); }; getStr(data); this.treeLength = str; return this.treeLength; console.log(this.treeLength, 'this.treeLength'); }, //獲取當前使用者組詳情 getSystemUserGroupDetail() { this.$axios .post('/platformapi/Auth/getSystemUserGroupDetail', { group_id: this.group_id }) .then(({ data }) => { console.log(data, '獲取當前使用者組詳情'); if (data.code == 1) { this.group_name = data.data.group_name; this.desc = data.data.desc; this.select_box = data.data.module_id_array.split(','); this.select_box.forEach((item) => { // console.log(item); item = parseInt(item); });
//這裡是讓返回的id項 預設選中 this.$refs.tree.setCheckedKeys(this.select_box); this.select_box = this.select_box.map((item) => { return +item; }); console.log(this.select_box, '11');
// 是否全選 if (this.select_box.length == this.treeLength) { this.checkAll = true; } else { this.checkAll = false; this.$nextTick(function () {
//這裡是獲取詳情資料完畢過後 則父子級是否關聯 this.ISstrictly = false; }); } } }) .catch((res) => { console.log(res, 'catch'); }); },
// 儲存 save() { this.nodeClick(); this.$axios .post('/platformapi/Auth/addUserGroup', { group_id: this.group_id, select_box: this.select_box.join(','), group_name: this.group_name, desc: this.desc }) .then(({ data }) => { console.log(data, '儲存'); if (data.code == 1) { this.$message.success(data.message); this.$router.go(-1); } else { this.$message.warning(data.message); } }) .catch((res) => { console.log(res, 'catch'); }); }