<template>
<div>
<div>
<el-form ref="ruleForm" :rules="rules" :model="formInfo" >
<el-row>
<el-col :span="20">
<el-form-item
label="角色名称:"
:prop="isDisabled ? '' : 'roleName'"
>
<el-input
v-model="formInfo.roleName"
placeholder="请输入"
clearable
maxlength="10"
:disabled="isDisabled"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<div v-loading="loading">
<div class="style-list">
<span>权限</span>
<span>
<el-checkbox v-model="checked" @change="getCheckedKeys"
>全选</el-checkbox
>
</span>
</div>
<el-tree
ref="treeList"
:default-checked-keys="defaultCheckedKeys"
:data="data"
show-checkbox
node-key="ids"
:props="defaultProps"
@check-change="getCheckNode"
:render-content="renderContent"
>
</el-tree>
</div>
<div style="text-align: center">
<el-button @click="$emit('cancel')">取 消</el-button>
<el-button type="primary" @click="save">确 认</el-button>
</div>
</div>
</template>
<script>
import { menuTree } from "@/api/menu";
import { roleName } from "@/api/role";
export default {
name: "rolePage",
components: {},
props: {
defaultCheckedKeys: {
type: Array,
default: () => {
return [];
},
},
formInfo: {
type: Object,
default: () => {
return {};
},
},
isDisabled: {
type: Boolean,
default: false,
},
},
data() {
return {
checked: false,
data: [],
defaultProps: {
children: "children",
label: "label",
},
treeList: [],
loading: false,
rules: {
roleName: [
{
required: true,
message: "该项为必填项",
trigger: "blur",
},
{
validator: (rule, value, callback) => {
roleName(value).then((res) => {
if (res.code == 200 && res.data == true) {
callback(new Error("名称已存在"));
} else {
callback();
}
});
},
trigger: "blur",
},
],
},
};
},
created() {
this.getMenuTree();
},
mounted() {},
methods: {
// 过滤 不展示的 节点
renderContent(h, { node, data, store }) {
if (data.hidden == 1) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
</span>
);
} else {
this.$refs.treeList.remove(data);
}
},
//
save() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("save", this.formInfo, this.treeList);
}
});
},
//
getCheckedKeys() {
if (this.checked) {
this.$refs.treeList.setCheckedNodes(this.data); // 全选
this.checked = true;
} else {
this.checked = false;
this.$refs.treeList.setCheckedKeys([]); // 取消全选
}
},
// 获取勾选的节点
getCheckNode() {
let key = this.$refs.treeList.getCheckedKeys(true);
this.treeList= [...key];
// let keys = this.$refs.treeList.getHalfCheckedKeys();
// this.treeList = [...key, ...keys];
},
// 获取 菜单列表
getMenuTree() {
this.loading = true;
menuTree()
.then((res) => {
if (res.code == 0) {
this.data = res.data;
this.loading = false;
}
})
},
},
computed: {},
watch: {},
};
</script>
<style scoped lang="scss">
.style-list {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
background-color: #e7f4fd;
box-sizing: border-box;
padding: 0 10px;
}
</style>
element ui el-tree 组件的使用
于 2022-08-22 15:56:16 首次发布