vue element-ui 树形控件
https://www.jianshu.com/p/230c88a2c523
修改插件里的动西 就可以拿到所有父节点的ID了
<template>
<div class="box2">
<div class="markdown">
<el-tree
style="background: lavenderblush;"
:data="data"
:expand-on-click-node="false"
show-checkbox
node-key="id"
ref="tree"
:render-content="renderContentSys"
></el-tree>
<div class="buttonlist">
<el-button @click="baocun">保存</el-button>
<el-button @click="res">取消</el-button>
</div>
</div>
</div>
</template>
<script>
import qs from "qs";
export default {
data() {
return {
data: []
};
},
props: ["dates", "msg"],
mounted() {
var _this = this;
_this.queryList(); // 角色树形授权列表
},
methods: {
res() {
this.$emit("set", this.msg);
},
// 角色树形授权列表
queryList() {
var _this = this;
var roleId = _this.dates;
_this
.$axios({
method: "POST",
url: _this.globalAPI.jssq_list + "?roleId=" + _this.dates,
dataType: "json"
})
.then(res => {
console.log(res, "markdown");
_this.data = res.data;
});
},
// 树形菜单
renderContentSys(h, { node, data, store }) {
return (
<div>
<div>{data.name}</div>
</div>
);
},
// 对角色授权保存数据接口
balcunList() {
// 获取多个id以逗号形式发送给后台
var _this = this;
var rad = "";
var ridsa = this.$refs.tree.getCheckedKeys().join(","); // 获取当前的选中的数据[数组] -id, 把数组转换成字符串
var ridsb = this.$refs.tree.getCheckedNodes(); // 获取当前的选中的数据{对象}
ridsb.forEach(ids => {
//获取选中的所有的父级id
rad += "," + ids.pid;
});
rad = rad.substr(1); // 删除字符串前面的','
var rids = rad + "," + ridsa;
var arr = rids.split(","); // 把字符串转换成数组
arr = [...new Set(arr)]; // 数组去重
rids = arr.join(","); // 把数组转换成字符串
console.log(rids,'rids');
_this.$axios
.post(
_this.globalAPI.jssqbc_list +
"?resourceIds=" +
rids +
"&roleId=" +
_this.dates
)
.then(res => {
console.log(res, "对角色授权保存数据接口");
this.$emit("set", this.msg);
if (res.data == 1) {
// this.$router.go(0); //点击发送刷新当前页面
this.$message({
showClose: true,
message: "授权成功",
type: "success"
});
} else {
this.$message({
showClose: true,
message: "授权失败",
type: "warning"
});
}
})
.catch(err => {
this.$message({
showClose: true,
message: "错了哦，这是一条错误消息",
type: "error"
});
});
},
// 对角色授权保存数据接口
baocun() {
this.balcunList();
}
}
};
</script>
<style scoped>
.markdown {
width: 600px;
height: 440px;
background: lavenderblush;
position: fixed;
top: 250px;
left: 680px;
padding: 40px;
z-index: 999;
}
.buttonlist {
display: flex;
align-items: center;
justify-content: center;
}
.box2 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
width: 100%;
height: 100%;
}
</style>
网友评论