element ui tree树形控件实现单选操作

<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;
    }
}

.article-textarea ::v-deep {
    textarea {
        padding-right: 40px;
        resize: none;
        border: none;
        border-radius: 0px;
        border-bottom: 1px solid #bfcbd9;
    }
}
</style>