vue element-ui 樹形控件
http://www.reibang.com/p/230c88a2c523
修改插件里的動西? 就可以拿到所有父節(jié)點(diǎn)的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(); // 角色樹形授權(quán)列表
? },
? methods: {
? ? res() {
? ? ? this.$emit("set", this.msg);
? ? },
? ? // 角色樹形授權(quán)列表
? ? 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>
? ? ? );
? ? },
? ? // 對角色授權(quán)保存數(shù)據(jù)接口
? ? balcunList() {
? ? ? // 獲取多個id以逗號形式發(fā)送給后臺
? ? ? var _this = this;
? ? ? var rad = "";
? ? ? var ridsa = this.$refs.tree.getCheckedKeys().join(","); // 獲取當(dāng)前的選中的數(shù)據(jù)[數(shù)組] -id, 把數(shù)組轉(zhuǎn)換成字符串
? ? ? var ridsb = this.$refs.tree.getCheckedNodes(); // 獲取當(dāng)前的選中的數(shù)據(jù){對象}
? ? ? ridsb.forEach(ids => {
? ? ? ? //獲取選中的所有的父級id
? ? ? ? rad += "," + ids.pid;
? ? ? });
? ? ? rad = rad.substr(1); // 刪除字符串前面的','
? ? ? var rids = rad + "," + ridsa;
? ? ? var arr = rids.split(","); //? 把字符串轉(zhuǎn)換成數(shù)組
? ? ? arr = [...new Set(arr)]; // 數(shù)組去重
? ? ? rids = arr.join(","); // 把數(shù)組轉(zhuǎn)換成字符串
? ? ? console.log(rids,'rids');
? ? ? _this.$axios
? ? ? ? .post(
? ? ? ? ? _this.globalAPI.jssqbc_list +
? ? ? ? ? ? "?resourceIds=" +
? ? ? ? ? ? rids +
? ? ? ? ? ? "&roleId=" +
? ? ? ? ? ? _this.dates
? ? ? ? )
? ? ? ? .then(res => {
? ? ? ? ? console.log(res, "對角色授權(quán)保存數(shù)據(jù)接口");
? ? ? ? ? this.$emit("set", this.msg);
? ? ? ? ? if (res.data == 1) {
? ? ? ? ? ? //? this.$router.go(0); //點(diǎn)擊發(fā)送刷新當(dāng)前頁面
? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? showClose: true,
? ? ? ? ? ? ? message: "授權(quán)成功",
? ? ? ? ? ? ? type: "success"
? ? ? ? ? ? });
? ? ? ? ? } else {
? ? ? ? ? ? this.$message({
? ? ? ? ? ? ? showClose: true,
? ? ? ? ? ? ? message: "授權(quán)失敗",
? ? ? ? ? ? ? type: "warning"
? ? ? ? ? ? });
? ? ? ? ? }
? ? ? ? })
? ? ? ? .catch(err => {
? ? ? ? ? this.$message({
? ? ? ? ? ? showClose: true,
? ? ? ? ? ? message: "錯了哦，這是一條錯誤消息",
? ? ? ? ? ? type: "error"
? ? ? ? ? });
? ? ? ? });
? ? },
? ? // 對角色授權(quán)保存數(shù)據(jù)接口
? ? 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>
