element组件后台管理系统的前台页面11.4专用

<template>
    <section>
        <!--搜索-->
        <el-form style="float: left;margin-left: 10px" :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="部门名称">
                <el-input v-model="searchForm.name" placeholder="部门名称"></el-input>
            </el-form-item>
            <el-form-item label="选择状态">
                <el-select v-model="searchForm.state" clearable placeholder="选择状态">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadDepartment">查询</el-button>
                <el-button type="primary" @click="add">新增</el-button>
            </el-form-item>
        </el-form>
        <!--列表-->
        <el-table :data="deparments"  v-loading="listLoading"  @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="name" label="部门名称"  sortable>
            </el-table-column>
            <el-table-column prop="sn" label="编号"  sortable>
            </el-table-column>
            <el-table-column prop="state" label="状态" :formatter="formatSex" sortable>
            </el-table-column>
            <el-table-column prop="parent.name" label="上级部门" sortable>
            </el-table-column>
            <el-table-column prop="manager.username" label="部门经理" sortable>
            </el-table-column>

            <el-table-column label="操作" width="150">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type&#