ssm简单测试

初始界面

<%@ 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="
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值