Vue界面设置

1 面包屑设置

		面包屑
   <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

2 卡片设置

  <el-card>
  </el-card>

3 表格设置

    <!-- table表格 -->
        <el-table :data="userlist" style="width: 100%" stripe  border>
             <el-table-column  type="index" > </el-table-column>
            <el-table-column prop="role_name" label="角色" > </el-table-column>
            <el-table-column prop="username"  label="姓名" > </el-table-column>
            <el-table-column prop="mobile"  label="电话"></el-table-column>
            <el-table-column prop="email"  label="邮箱"></el-table-column>
            <el-table-column prop="mg_state"  label="状态">
              
              <template slot-scope="scope">
                    <!-- {{scope.row.mg_state}} -->
                    <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="changState(scope.row)"></el-switch>
                </template> 
                 
            </el-table-column>
            <el-table-column prop="create_time"  label="时间"></el-table-column>
            <el-table-column  label="操作">
                <template slot-scope="scope">
                      <el-row>
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top" :enterable="false">
                                <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
                            </el-tooltip>

                            <el-tooltip class="item" effect="dark" content="分配权限" placement="top" :enterable="false">
                                 <el-button type="primary" icon="el-icon-setting" size="mini"></el-button>
                            </el-tooltip>

                            <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
                                 <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
                            </el-tooltip>
                   
                   
                     </el-row>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页控件 -->
         <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
         :page-sizes="[1, 3, 5, 7]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total">
         </el-pagination>

4 vue作用域插槽

           <template slot-scope="scope">
                        <!-- {{scope.row.mg_state}} -->
                        <el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="changState(scope.row)"></el-switch>
                    </template>