Vue.js 实现权限配置并固定角色名称在文本框

<div id="app">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">角色名称</th>
            <th scope="col">权限名称</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item,i in list">
            <th scope="row">{{item.rname}}</th>
            <td>
                <span v-for="p in item.permissionList">{{'【'+p.pname+'】'}}</span>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-secondary" data-toggle="modal"
                            data-target="#exampleModal" data-whatever="@mdo"
                            @click="findAllPermission(item)">配置权限
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">配置权限</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">角色名称:</label>
                            <input v-model="formData.rname" type="text" class="form-control form-control-lg" readonly>
<pre><code>                        &lt;label for=&quot;recipient-name&quot; class=&quot;col-form-label&quot;&gt;权限配置:&lt;/label&gt;
                        &lt;select v-model=&quot;formData.pid&quot; class=&quot;custom-select custom-select-lg mb-3&quot;&gt;
                            &lt;option :value=&quot;items.pid&quot; v-for=&quot;items in pList&quot;&gt;{{items.pname}}&lt;/option&gt;
                        &lt;/select&gt;

                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;modal-footer&quot;&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; id=&quot;cancel&quot; data-dismiss=&quot;modal&quot;&gt;取消&lt;/button&gt;
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; @click=&quot;modifyRoleByEid&quot;&gt;提交&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
</div>
<script src="/js/my/vue.min.js"></script>
<script src="/js/my/axios.min.js"></script>
<script src="/js/my/jquery-3.3.1.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [],
            pList: [],
            formData: {
                rname: '',
                pid: ''
            }
        },
        mounted() {
            this.findAllRole();
        },
        methods: {
            modifyRoleByEid() {
                axios.post("/role/saveRoleAndPermission", this.formData).then(resp => {
                    $("#cancel").click();
                    this.findAllRole();
                })
            },
            findAllPermission(item) {
                this.formData.rname = item.rname;
                axios.get("/permission/findAllPermission").then(resp => {
                    this.pList = resp.data;
                })
            },
            findAllRole() {
                axios.get("/role/findAllRoleAndPermission").then(resp => {
                    this.list = resp.data;
                })
            }
        }
    })
</script>