<template>
<div class="createPost-container">
<el-form ref="postForm" :model="postForm" class="form-container">
<div class="createPost-main-container">
<el-row>
<el-col :span="24">
<el-form-item><span style="color:red;">提示：带 * 号的为必填项</span></el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item>
<el-col :span="3">
<span style="color:red;">*</span>
权限名称：
</el-col>
<el-col :span="10"><el-input v-model="postForm.rule_name" placeholder="请输入权限名称"></el-input></el-col>
</el-form-item>
<el-form-item>
<el-col :span="3">
<span style="color:red;">*</span>
权限路径：
</el-col>
<el-col :span="10"><el-input v-model="postForm.href" placeholder="请输入权限路径"></el-input></el-col>
</el-form-item>
<el-form-item>
<el-col :span="3">
<span style="color:red;">*</span>
选择上级(不选为顶级权限)：
</el-col>
<el-col :span="10">
<el-input class="input" v-model="filterText" placeholder="搜索" />
<el-tree
ref="tree"
class="filter-tree"
:data="tree_data"
show-checkbox
check-strictly
:props="{label:'name'}"
node-key="id"
:default-expanded-keys='checked_data'
:default-checked-keys='checked_data'
:filter-node-method="filterNode"
@check-change="selectTreeNode"
checked=true
>
</el-tree>
</el-col>
</el-form-item>
</el-col>
</el-row>
<div id="" style="text-align: center;">
<el-button v-if="btn_submit_status" style="margin-left: 10px;" type="primary" @click="submitForm">保存</el-button>
<el-button v-if="!btn_submit_status" style="margin-left: 10px;" type="info">提交中</el-button>
</div>
</div>
</el-form>
</div>
</template>
<script>
import { admin_all_tree_rule_data,edit_admin_auth_rule,admin_auth_rule_detail } from '@/api/admin';
import { getToken } from '@/utils/auth';
export default {
name: 'AdminRulesCreateDetail',
components: {},
props: {},
data() {
return {
btn_submit_status: true,
postForm: {
id:'',
rule_name: '',
href: '',
pid: 0,
},
loading: false,
checked_data:[],
filterText: "",
tree_data: [],
};
},
computed: {},
created() {
this.postForm.id = this.$route.params.id
this.getDetail()
//获取所有权限树形数据
this.getTreeList();
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
methods: {
getDetail(){
admin_auth_rule_detail({id:this.postForm.id}).then(res => {
this.postForm.rule_name = res.data.name
this.postForm.href = res.data.href
this.postForm.pid = res.data.pid
if(res.data.pid != 0){
this.checked_data.push(res.data.pid)
}
})
},
//搜索
filterNode(value, data) {
if (!value) return true;
return data.name.indexOf(value) !== -1;
},
selectTreeNode(data, checked, tree) {
if (checked) {
this.$refs.tree.setCheckedNodes([data])
}
},
getTreeList() {
admin_all_tree_rule_data().then(res => {
this.tree_data = res.data;
});
},
submitForm() {
if (this.postForm.rule_name.trim() == '' || this.postForm.rule_name.length > 30) {
this.$message({
message: '权限名称不能为空或权限名称输入过长',
type: 'error'
});
return;
}
if (this.postForm.href.trim() == '' || this.postForm.href.length > 100) {
this.$message({
message: '权限路径不能为空或权限路径输入过长',
type: 'error'
});
return;
}
const pid = this.$refs.tree.getCheckedKeys();
if(pid.length > 0){
this.postForm.pid = pid[0]
}else{
this.postForm.pid = 0
}
if (this.btn_submit_status) {
this.btn_submit_status = false;
edit_admin_auth_rule(this.postForm).then(res => {
if (res.code == 200) {
this.$message({
message: res.msg,
type: 'success'
});
this.$router.push({ path: '/admin/listrules' });
} else {
this.$message({
message: res.msg,
type: 'error'
});
}
this.btn_submit_status = true;
});
}
}
}
};
</script>
<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
.upload_image_div {
min-width: 600px;
}
.upload_image {
width: 150px;
height: 150px;
padding: 5px;
}
.createPost-container {
position: relative;
.createPost-main-container {
padding: 40px 45px 20px 50px;
.postInfo-container {
position: relative;
@include clearfix;
margin-bottom: 10px;
.postInfo-container-item {
float: left;
}
}
}
.word-counter {
width: 40px;
position: absolute;
right: 10px;
top: 0px;
}
}文章来源：https://www.toymoban.com/news/detail-459753.html
.article-textarea ::v-deep {
textarea {
padding-right: 40px;
resize: none;
border: none;
border-radius: 0px;
border-bottom: 1px solid #bfcbd9;
}
}
</style>
文章来源地址https://www.toymoban.com/news/detail-459753.html
到了这里，关于element ui tree树形控件实现单选操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
