项目总结（前端）

1.table列表的展示

1.

  <!--列表-->
        <el-table :data="resources" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" min-width="11%" >
            </el-table-column>
            <el-table-column type="index"min-width="16%">
            </el-table-column>
            <el-table-column prop="name" label="权限名称" sortable min-width="17%">
            </el-table-column>
            <el-table-column prop="sn" label="资源路径" sortable min-width="20%">
            </el-table-column>
            <el-table-column prop="mn.name" label="菜单名称" sortable min-width="16%">
            </el-table-column>
            <el-table-column label="操作" min-width="16%">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

：data 里面写这个表单的值
prop等于的名字要和这个表单接收的类的里面的字段名相同

2.

在data里面的return中定义一个刚刚:data里面写的一样的空数组

  resources: []

3.

在methods中写获取表单数据的方法

   getresources() {
                let para = {
                    page: this.page,
                    pageSize:this.pageSize,
                    name: this.filters.name,
                    sn:this.filters.sn,
                    mn:this.filters.mn

                };

                this.listLoading = true;
                //NProgress.start();
                this.$http.patch("/permission/list",para).then(res=>{
                    var a=[];
                    //将查询的数据渲染到table中
                    this.resources=res.data.rows;
                    this.total = res.data.total;
                    //关闭旋转图标
                    this.listLoading = false;
                })
            }

4.如何在前端把对象封装传到后台

 para.mn={
              id:this.addForm.menu
         }

5.如何把一对多的list封装传回来

let paraselectPermsion = Object.assign({},this.selectedPermissions);
							para.permissions = [];
							for(let key in paraselectPermsion ){
								let permission ={
									"id": paraselectPermsion[key]
								}
								para.permissions.push(permission);
							}

6.在表单中展示list数据

用红圈框住的都是固定写法

使用formatter的方法

7.在表单中展示element图标

用红圈框住的都是固定写法