初始界面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入element得css样式--> <link type="text/css" rel="stylesheet" href="css/index.css"/> <!--引入vue得js文件 这个必须在element之前引入--> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/qs.min.js"></script> <script type="text/javascript" src="js/axios.min.js"></script> <!--element得js文件--> <script type="text/javascript" src="js/index.js"></script> </head> <body> <div id="app"> <%-- 添加--%> <el-button type="success" @click="dialogVisible = true">添加</el-button> <el-dialog title="添加" :visible.sync="dialogVisible" width="30%" > <el-form label-width="80px" :model="formLabelAlign" :rules="rules" ref="addcheck"> <el-form-item label="姓名" prop="rolename"> <el-input v-model="formLabelAlign.rolename"></el-input> </el-form-item> <el-form-item label="官职" prop="remark"> <el-input v-model="formLabelAlign.remark"></el-input> </el-form-item> <el-form-item label="他人id" prop="status"> <el-input v-model="formLabelAlign.status"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="insert">确定添加</el-button> </span> </el-dialog> <%-- 模糊查询--%> <el-form :inline="true" :model="searchForm" class="demo-form-inline"> <el-form-item label="姓名"> <el-input v-model="searchForm.rolename" placeholder="姓名"></el-input> </el-form-item> <el-form-item label="职位"> <el-input v-model="searchForm.remark" placeholder="职位"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSearch">查询</el-button> </el-form-item> </el-form> <%--主体--%> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="roleid" label="编号" width="180"> <template slot-scope="scope"> <el-tag size="medium"> { { scope.row.roleid}}</el-tag> </template> </el-table-column> <el-table-column prop="rolename" label="姓名" width="180"> <template slot-scope="scope"> <el-tag size="medium"> { { scope.row.rolename}}</el-tag> </template> </el-table-column> <el-table-column prop="remark" label="职位"> <template slot-scope="scope"> <el-tag size="medium"> { { scope.row.remark}}</el-tag> </template> </el-table-column> <el-table-column prop="status" label="他人id"> <template slot-scope="scope"> <el-tag size="medium"> { { scope.row.status}}</el-tag> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" icon="