<template>
<div>
<h1 align="center">SSM阶段机试,ts={
{ ts }}</h1>
<!-- 查询条件 -->
<el-form style="margin-top: 15px" :inline="true" class="demo-form-inline">
<el-form-item label="客户名称">
<el-input v-model="custName" placeholder="客户名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="qry()">查询</el-button>
<el-button type="primary" @click="addOrder()">新增</el-button>
</el-form-item>
</el-form>
<!--表格-->
<el-table style="width: 100%;" :data="orders" :border="true" max-height="550">
<el-table-column prop="id" label="订单编号" min-width="40" align="center"></el-table-column>
<el-table-column prop="custName" label="客户名称" min-width="100" align="center"></el-table-column>
<el-table-column prop="amount" label="订单金额" min-width="70" align="center"></el-table-column>
<el-table-column prop="custPhone" label="电话" min-width="70" align="center"></el-table-column>
<el-table-column prop="orderDesc" label="订单描述" min-width="70" align="center"></el-table-column>
<el-table-column prop="custAddr" label="客户地址" min-width="70" align="center"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="Doupdate(scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="Dodelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 弹出窗口 -->
<el-dialog title="增加订单" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
<el-form :model="orderForm" :rules="rules" ref="orderForm" >
<el-form-item label="订单描述" :label-width="formLabelWidth" prop="orderDesc">
<el-input v-model="orderForm.orderDesc" autocomplete="off" :style="{width: formEleWidth}" &
SpringBoot+vue+ElementUi
本文详细介绍了如何将SpringBoot后台框架与前端Vue.js结合,并使用ElementUI进行界面开发。通过实例步骤,展示了从搭建环境到完成一个完整功能的过程,包括SpringBoot的配置、Vue.js的组件化开发以及ElementUI的样式和组件应用。
摘要由CSDN通过智能技术生成