• 样式处理+element-UI

    一、复习

    高亮显示（用boolean来判断（只能控制两个值））：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			/* 激活  高亮显示 */
    8. 			.active{
    9. 				color: red;
    10. 				background-color: cornsilk;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<ul>
    17. 				
    18. 				
    19. 				
    20. 				
    21. 				<li :class="{active: has}" >第一项li>
    22. 				<li :class="{active: !has}" >第二项li>
    23. 				<li :class="{active: has }" >第三项li>
    24. 			ul>
    25. 		div>
    26. 		<script src="js/vue.min.js" type="text/javascript" charset="utf-8">script>
    27. 		<script type="text/javascript">
    28. 			var vm = new Vue({
    29. 				el: '#app',
    30. 				data: {
    31. 					has:true
    32. 				},
    33. 			})
    34. 		script>
    35. 	body>
    36. html>

    二、class绑定

    v-bind:class动态绑定样式

    动态改变列表样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			/* 激活  高亮显示 */
    8. 			.active{
    9. 				color: red;
    10. 				background-color: cornsilk;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<ul>
    17. 				
    18. 				
    19. 				
    20. 				
    21. 				
    22. 				<li :class="{active: i==0}" @mousemove="i=0" @mouseout="i=100">第一项li>
    23. 				<li :class="{active: i==1}" @mousemove="i=1"  @mouseout="i=100">第二项li>
    24. 				<li :class="{active: i==2}" @mousemove="i=2"  @mouseout="i=100">第三项li>
    25. 			ul>
    26. 		div>
    27. 		<script src="js/vue.min.js" type="text/javascript" charset="utf-8">script>
    28. 		<script type="text/javascript">
    29. 			var vm = new Vue({
    30. 				el: '#app',
    31. 				data: {
    32. 					i:0
    33. 				},
    34. 			})
    35. 		script>
    36. 	body>
    37. html>

    三、style样式绑定

    v-bind:style动态绑定样式

    v-bind:style 的数组语法可以将多个样式对象应用到一个元素上

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 		style>
    8. 	head>
    9. 	<body>
    10. 		<div id="app">		
    11. 			<div v-bind:style="styleObject">style jsondiv>
    12. 				<div id="">
    13. 					
    14. 				div>			
    15. 		div>
    16. 		<script src="js/vue.min.js" type="text/javascript" charset="utf-8">script>
    17. 		<script type="text/javascript">
    18. 			var vm = new Vue({
    19. 				el: '#app',
    20. 				data: {					
    21. 					styleObject:{
    22. 						color: 'red',
    23. 						fontSize: '16px',
    24. 					}
    25. 				},
    26. 			})
    27. 		script>
    28. 	body>
    29. html>

    四、vue实现批量删除与vue实现分页

     plus回传page对象，数据从page取（共多少条，多少页），控制page，观察者

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style type="text/css">
    7. 			/* 激活  高亮显示 */
    8. 			.active {
    9. 				color: red;
    10. 				background-color: cornsilk;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			
    17. 			<div v-show="show">
    18. 				<button @click="delList()">批量删除button>
    19. 				<table border="" cellspacing="" cellpadding="">
    20. 					<tr>
    21. 						<th><input type="checkbox" v-model="qx" />th>
    22. 						<th>编号th>
    23. 						<th>名字th>
    24. 						<th>备注th>
    25. 						<th>操作th>
    26. 					tr>
    27. 					<tr v-for="(a,i) in list" :class="{active: i==j}" @mousemove="j=i" @mouseleave="j=100">
    28. 						<td><input type="checkbox" v-model="aids" :value="a.aid" />td>
    29. 						<td>{{a.aid}}td>
    30. 						<td>{{a.aname}}td>
    31. 						<td>{{a.abackup}}td>
    32. 						<td>
    33. 							<button @click="delAstate(i)">删除button>
    34. 							<button @click="show=false,vm.a=a,action='update'">修改button>
    35. 						td>
    36. 					tr>
    37. 				table>
    38. 				共{{total}}条，{{page}}/{{pages}}页
    39. 				<button @click="page=1">首页button>
    40. 				<button @click="page=(page==1?1:page-1)">上一页button>
    41. 				<button @click="page=(page==pages?pages:page+1)">下一页button>
    42. 				<button @click="page=pages">尾页button><br>
    43. 				
    44. 				<button @click="show=false,a={},action='insert'">添加button>
    45. 			div>
    46.  
    47. 			
    48. 			<div v-show="!show">
    49. 				编号：<input v-model="a.aid" /><br>
    50. 				名字：<input v-model="a.aname" /><br>
    51. 				备注：<input v-model="a.abackup" /><br>
    52. 				<button type="button" @click="insAstate()">操作button>
    53. 				<button @click="show=true">返回button>
    54. 			div>
    55.  
    56. 		div>
    57. 		<script type="text/javascript" src="js/vue.min.js">script>
    58. 		<script type="text/javascript" src="js/axios.min.js">script>
    59. 		<script type="text/javascript">
    60. 			var vm = new Vue({
    61. 				el: '#app',
    62. 				data: {
    63. 					show: true,
    64. 					a: {},
    65. 					list: [],
    66. 					action: '',
    67. 					j: 0,
    68. 					qx: false,
    69. 					aids: [],
    70. 					page:1,
    71. 					total:0,
    72. 					pages:0,
    73. 					
    74. 				},
    75. 				created() {
    76. 					axios.defaults.baseURL = "http://localhost:9090/"
    77. 					/* axios.post("astate/selectList").then(function(res) {
    78. 						vm.list = res.data
    79. 					}) */
    80. 					//this.selectList()
    81. 					this.selectPage()
    82. 				},
    83. 				watch: {
    84. 					qx(nv,ov){
    85. 						if(nv){
    86. 							this.list.forEach(function(a,i) {
    87. 								vm.aids.push(a.aid)
    88. 							})
    89. 						}else{ 
    90. 							this.aids = [];
    91. 						}
    92. 					},
    93. 					page(){
    94. 						this.selectPage()
    95. 					}
    96. 				},
    97.  
    98. 				methods: {
    99. 					insAstate() {
    100. 						axios.post("admin/" + this.action, this.a).then(function(res) {
    101. 							if (res.data == "1") {
    102. 								alert("操作成功")
    103. 								if (vm.action == 'insert') {
    104. 									vm.list.push(vm.a)
    105. 									vm.a = {}
    106. 								}
    107. 							} else {
    108. 								alert("操作失败")
    109. 							}
    110. 						})
    111. 					},
    112. 					delAstate(i) {
    113. 						axios.post("astate/delete", "aid=" + this.list[i].aid).then(function(res) {
    114. 							if (res.data == '1') {
    115. 								alert("删除成功")
    116. 								vm.list.splice(i, 1)
    117. 							} else {
    118. 								alert("删除失败")
    119. 							}
    120. 						})
    121. 					},
    122. 					delList(){
    123. 						//直接以数组json格式传过来
    124. 						axios.post("astate/deleteList",this.aids).then(function(res) {
    125. 							if (res.data == '1') {
    126. 								alert("删除成功")
    127. 								vm.selectPage()
    128. 							} else {
    129. 								alert("删除失败")
    130. 							}
    131. 						})
    132. 					},
    133. 					selectList(){
    134. 						axios.post("astate/selectList").then(function(res) {
    135. 							vm.list = res.data
    136. 						})
    137. 					},
    138. 					//分页查询
    139. 					selectPage() {
    140. 						axios.post("astate/selectByPage", "page=" + this.page).then(function(res) {
    141. 							console.log(res.data)
    142. 							vm.total = res.data.total;
    143. 							vm.pages = res.data.pages;
    144. 							//数据
    145. 							vm.list = res.data.records;
    146. 					
    147. 						})
    148. 					}
    149. 				}
    150. 			})
    151. 		script>
    152. 	body>
    153. html>

     后端：

    yml配置：

    1. @Value("${jdbc.size}")
    2.     private Integer size;
    3.  
    4.  
    5. //批量删除
    6.     @RequestMapping("/deleteList")
    7.     public String deleteList(String[] aid){
    8.         try {
    9.             //把数组转换为集合
    10.             as.removeByIds(Arrays.asList(aid));
    11.             System.out.println(aid + "删除成功");
    12.             return "1";
    13.         } catch (Exception e) {
    14.             e.printStackTrace();
    15.         }
    16.         return "0";
    17.     }
    18.  
    19.     //分页
    20.     @RequestMapping("/selectByPage")
    21.     public Page selectByPage(Integer page){
    22.         return as.page(new Page(page,size));
    23.     }

     五、element-ui

    1、面包屑导航

    1. <el-breadcrumb separator="/">
    2. 			  <el-breadcrumb-item>首页el-breadcrumb-item>
    3. 			  <el-breadcrumb-item>基础数据管理el-breadcrumb-item>
    4. 			  <el-breadcrumb-item>拍卖状态展示el-breadcrumb-item>
    5. 			el-breadcrumb>
    6. 			<el-row>
    7. 				<el-col style="text-align: center;"><h2>拍卖状态管理h2>el-col>
    8. 			el-row>

     2、table

    2. 			
    3. 			<el-table :data="list" ref="objs" style="width: 100%;">
    4. 				
    5. 				<el-table-column type="selection" align="center">el-table-column>
    6. 				<el-table-column prop="aid" label="编号" align="center">el-table-column>
    7. 				<el-table-column prop="aname" label="名称" align="center">el-table-column>
    8. 				<el-table-column prop="abackup" label="备注" align="center">el-table-column>
    9. 				<el-table-column label="操作" align="center" width="180px">
    10. 					
    11. 					<template slot-scope="scope">
    12. 						<el-button size="small" type="primary" @click="toupdate(scope.$index, show=true, url='update', action='修改')">修改el-button>
    13. 						<el-button size="small" type="danger" @click="deleteobj(scope.$index)">删除el-button>
    14. 					template>
    15. 				el-table-column>
    16. 			el-table>

    3、element-UI消息框

    消息提示：

    1. this.$message({
    2.     type:'success',
    3.     message:'删除成功！'
    4. })
    5. this.$message.success("删除成功！")

    确认框：

    1. this.$confirm("确认删除？", "提示", {
    2.     confirmButtonText: "确定",
    3.     cancelButtonText: "取消",
    4.     type: "warning"
    5. }).then(()=>{//确定}).catch(()=>{//取消})

     例子：

    1. delobj(i){
    2. 						this.$confirm("是否删除所有选中项？", "提示", {
    3. 							confirmButtonText: "确定",
    4. 							cancelButtonText: "取消",
    5. 							type: "warning"
    6. 						}).then(() => { //确定
    7. 						axios.post("astate/delete",'aid='+this.list[i].aid).then(res => {
    8. 							if (res.data=="1") {
    9. 								this.$message({
    10. 									//以json为参数
    11. 									type:"success",
    12. 									message:"删除成功"						
    13. 								})
    14. 								this.list.splice(i,1)
    15. 							} else{
    16. 								//简写形式
    17. 								this.$message.error("删除失败!")
    18. 							}
    19. 							
    20. 						})
    21. 						}).catch(() => { //取消
    22. 							this.$message.error("删除取消！")
    23. 						})
    24. 					},

    4、element-UI实现批量删除、全选、分页（普通分页）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>拍卖状态管理title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			
    10. 			<el-table :data="list" ref="objs">
    11. 				
    12. 				<el-table-column type="selection">el-table-column>
    13. 				
    14. 				<el-table-column prop="aid" label="编号">el-table-column>
    15. 				<el-table-column prop="aname" label="名称">el-table-column>
    16. 				<el-table-column prop="abackup" label="属性">el-table-column>
    17. 				
    18. 				<el-table-column label="操作">
    19. 					<template slot-scope="scope">
    20. 						<el-button size="small" type="primary" @click="show=true,obj=scope.row, action='update', title='修改'">修改el-button>
    21. 						<el-button size="small" type="danger" @click="delobj(scope.$index)">删除el-button>
    22. 					template>
    23. 				el-table-column>
    24. 			el-table>
    25. 			
    26. 			
    27. 			<el-row style="margin-top: 5px;">
    28. 				<el-col :xs="15" :sm="15">
    29. 					<el-pagination :current-page.sync="page"  
    30. 						layout="total, sizes, prev, pager, next, jumper"
    31. 					    :total="total">
    32. 					el-pagination>
    33. 				el-col>
    34. 				
    35. 				<el-col :xs="6" :sm="6" style="text-align: right;">
    36. 				el-col>
    37. 			el-row>
    38. 			
    39. 			
    40. 			<el-row style="margin-top: 5px;">
    41. 				<el-col :xs="4" :sm="4">
    42. 					<el-button type="danger" size="medium" style="width: 120px;" @click="deleteList">删除选中项el-button>
    43. 				el-col>
    44. 				<el-col :xs="4" :sm="4" style="text-align: right;">
    45. 					<el-button type="primary" size="medium" style="width: 120px;" @click="show=true,obj={}, action='insert', title='录入'">添加el-button>
    46. 				el-col>
    47. 			el-row>
    48. 			
    49. 			
    50. 			<el-dialog :title="title" :visible.sync="show">
    51. 				
    52. 				<el-form ref="form" :model="obj" label-width="80px" size="mini">
    53. 					<el-form-item label="编号">
    54. 						<el-input v-model="obj.aid" :readonly="action=='update'">el-input>
    55. 					el-form-item>
    56. 					<el-form-item label="名称">
    57. 						<el-input v-model="obj.aname">el-input>
    58. 					el-form-item>
    59. 			
    60. 					<el-form-item label="备注">
    61. 						<el-input v-model="obj.abackup">el-input>
    62. 					el-form-item>
    63. 					<el-form-item size="large">
    64. 						
    65. 						<el-button type="primary" size="medium" @click="modify">保存el-button>
    66. 						<el-button type="primary" size="medium" @click="show=false">返回el-button>
    67. 					el-form-item>
    68. 				el-form>
    69. 			el-dialog>
    70. 		div>
    71.  
    72. 		<link rel="stylesheet" type="text/css" href="js/element_ui.css" />
    73. 		<script src="js/vue.min.js" type="text/javascript" charset="utf-8">script>
    74. 		<script src="js/element_ui.js" type="text/javascript" charset="utf-8">script>
    75. 		<script src="js/axios.min.js" type="text/javascript" charset="utf-8">script>
    76. 		<script type="text/javascript">
    77. 			var vm = new Vue({
    78. 				el: '#app',
    79. 				data: {
    80. 					//展示两个页面
    81. 					show: false,
    82. 					list: [],
    83. 					//对象
    84. 					obj: {},
    85. 					action: '',
    86. 					title:'',
    87. 					page: 1,
    88. 					total: 0,
    89. 					pages: 0,
    90.  
    91. 				},
    92. 				created() {
    93. 					axios.defaults.baseURL = "http://localhost:9090/"
    94. 					this.selectByPage()
    95. 				},
    96. 				/* 增加观察者模式 观察页码的变化 */
    97. 				watch:{
    98. 					page(){
    99. 						this.selectByPage()
    100. 					}
    101. 				},
    102. 				methods: {
    103. 					selectList() {
    104. 						axios.post("astate/selectList").then(res => {
    105. 							this.list = res.data
    106. 						})
    107. 					},
    108. 					delobj(i) {
    109. 						this.$confirm("是否删除所有选中项？", "提示", {
    110. 							confirmButtonText: "确定",
    111. 							cancelButtonText: "取消",
    112. 							type: "warning"
    113. 						}).then(() => { //确定
    114. 							axios.post("astate/delete", 'aid=' + this.list[i].aid).then(res => {
    115. 								if (res.data == "1") {
    116. 									this.$message({
    117. 										//以json为参数
    118. 										type: "success",
    119. 										message: "删除成功"
    120. 									})
    121. 									this.list.splice(i, 1)
    122. 								} else {
    123. 									//简写形式
    124. 									this.$message.error("删除失败!")
    125. 								}
    126.  
    127. 							})
    128. 						}).catch(() => { //取消
    129. 							this.$message.error("删除取消！")
    130. 						})
    131. 					},					
    132. 					deleteList() {
    133. 						//判断是否有选中项 this.$refs.objs.selection;找到所有选中行
    134. 						var selections = this.$refs.objs.selection;
    135. 						if (selections.length == 0) {
    136. 							this.$message.error("必须选中一行");
    137. 							return;
    138. 						}
    139. 						this.$confirm("是否删除所有选中项？", "提示", {
    140. 							confirmButtonText: "确定",
    141. 							cancelButtonText: "取消",
    142. 							type: "warning"
    143. 						}).then(() => {
    144. 							//把选中项放在数组
    145. 							var ids = [];
    146. 							selections.forEach((a, i) => {
    147. 								ids.push(a.aid)
    148. 							})
    149. 							axios.post("astate/deleteList", ids).then(res => {
    150. 								if (res.data == "1") {
    151. 									this.$message.success("删除成功！")
    152. 					
    153. 									this.selectByPage()
    154. 					
    155. 								} else {
    156. 									//简写形式
    157. 									this.$message.error("删除失败！")
    158. 								}
    159. 							})
    160. 						}).catch(() => {
    161. 							this.$message.error("删除取消");
    162. 						})
    163. 					},
    164. 					modify(){
    165. 						axios.post("astate/"+this.action,this.obj).then(res => {
    166. 							if(res.data == "1"){
    167. 								this.$message.success(this.title+"成功！")
    168. 								this.list.push(this.obj);
    169. 								this.obj = {};
    170. 								/* this.selectList(); */
    171. 								this.selectByPage()
    172. 							}else{
    173. 								this.$message.success(this.title+"失败！")
    174. 							}
    175. 						})
    176. 					},
    177. 					/* 实现分页 */
    178. 					selectByPage() {					
    179. 						axios.post("admin/selectByPage", "page=" + this.page).then(res => {
    180. 							vm.total = res.data.total;
    181. 							vm.pages = res.data.pages;
    182. 							vm.list = res.data.records;
    183. 						})
    184. 					},
    185.  
    186. 				}
    187. 			})
    188. 			/* setInterval(()=>{},2000) */
    189. 		script>
    190.  
    191. 	body>
    192. html>
    193.

    后端：

    1. //批量删除
    2.     @RequestMapping("/deleteList")
    3.     public String deleteList(@RequestBody List list){
    4.         try {
    5.             as.removeByIds(list);
    6.             System.out.println("删除成功");
    7.             return "1";
    8.         } catch (Exception e) {
    9.             e.printStackTrace();
    10.         }
    11.         return "0";
    12.     }
    13.  
    14.     //分页
    15.     @RequestMapping("/selectByPage")
    16.     public Page selectByPage(Integer page){
    17.         return as.page(new Page(page,size));
    18.     }

    5、element-UI实现批量删除、全选、分页（普通分页+搜索）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>管理员信息管理title>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<el-breadcrumb separator="/">
    10. 				<el-breadcrumb-item>首页el-breadcrumb-item>
    11. 				<el-breadcrumb-item>基础数据管理el-breadcrumb-item>
    12. 				<el-breadcrumb-item>管理员信息列表el-breadcrumb-item>
    13. 			el-breadcrumb>
    14. 			<el-row>
    15. 				<el-col style="text-align: center;">
    16. 					<h2>管理员搜索h2>
    17. 				el-col>
    18. 			el-row>
    19. 			
    20. 			
    21. 			
    22. 			<el-form :inline="true" :model="admin" class="demo-form-inline" size="small" label-width="90px">
    23. 				
    24. 				<el-form-item label="姓名">
    25. 					<el-input v-model="admin.aname" placeholder="管理员姓名">el-input>
    26. 				el-form-item>
    27. 				
    28. 				<el-form-item label="角色">
    29. 					<el-select v-model="admin.rid" placeholder="选择角色">
    30. 						
    31. 						<el-option label="管理员" value="管理员">el-option>
    32. 						<el-option label="业务员" value="业务员">el-option>
    33. 						<el-option label="财务" value="财务">el-option>
    34. 						<el-option label="采购员" value="采购员">el-option>
    35. 					el-select>
    36. 				el-form-item>
    37. 				
    38. 				
    39. 				<el-form-item>
    40. 					<el-button type="primary" @click="selectByPage">查询el-button>
    41. 				el-form-item>
    42. 			el-form>
    43. 			
    44. 			
    45. 			<el-table :data="list" ref="objs">
    46. 				<el-table-column type="selection">el-table-column>
    47. 				<el-table-column prop="aid" label="编号">el-table-column>
    48. 				<el-table-column prop="aname" label="名称">el-table-column>
    49. 				<el-table-column prop="rid" label="角色">el-table-column>
    50. 				<el-table-column prop="abackup" label="备注">el-table-column>
    51. 				<el-table-column label="操作">
    52. 					<template slot-scope="scope">
    53. 						<el-button size="small" type="primary" @click="show=true,obj=scope.row, action='update', title='修改' ">修改el-button>
    54. 						<el-button size="small" type="danger" @click="delobj(scope.$index)">删除el-button>
    55. 					template>
    56. 				el-table-column>
    57. 			el-table>
    58. 			
    59. 			
    60. 			<el-row style="margin-top: 5px;">
    61. 				<el-col :xs="15" :sm="15">
    62. 					
    63. 					
    64. 					
    65. 					
    66. 					<el-pagination :current-page.sync="page" :page-size.sync="line" :page-sizes="pagelist" 
    67. 						layout="total, sizes, prev, pager, next, jumper"
    68. 					    :total="total">
    69. 					el-pagination>
    70. 				el-col>
    71. 				
    72. 				<el-col :xs="6" :sm="6" style="text-align: right;">
    73. 				el-col>
    74. 			el-row>
    75. 			
    76. 			
    77. 			<el-row style="margin-top: 5px;">
    78. 				<el-col :xs="4" :sm="4">
    79. 					<el-button type="danger" size="medium" style="width: 120px;" @click="deleteList">删除选中项el-button>
    80. 				el-col>
    81. 				<el-col :xs="4" :sm="4" style="text-align: right;">
    82. 					<el-button type="primary" size="medium" style="width: 120px;" @click="show=true, action='insert', title='录入' ">添加el-button>
    83. 				el-col>
    84. 				el-dialog>
    85. 			el-row>
    86. 			
    87. 			
    88. 			<el-dialog :title="title" :visible.sync="show">
    89. 				<el-form ref="form" :model="obj" label-width="80px" size="mini">
    90. 					<el-form-item label="编号">
    91. 						<el-input v-model="obj.aid">el-input>
    92. 					el-form-item>
    93. 					<el-form-item label="名称">
    94. 						<el-input v-model="obj.aname">el-input>
    95. 					el-form-item>
    96. 					<el-form-item label="密码">
    97. 						<el-input v-model="obj.apwd">el-input>
    98. 					el-form-item>
    99. 					<el-form-item label="角色">
    100. 						<el-select v-model="obj.rid" placeholder="选择角色">
    101. 							
    102. 							<el-option label="管理员" value="管理员">el-option>
    103. 							<el-option label="业务员" value="业务员">el-option>
    104. 							<el-option label="财务" value="财务">el-option>
    105. 							<el-option label="采购员" value="采购员">el-option>
    106. 						el-select>
    107. 					el-form-item>
    108. 					<el-form-item label="备注">
    109. 						<el-input v-model="obj.abackup">el-input>
    110. 					el-form-item>
    111. 					<el-form-item size="large">
    112. 						<el-button type="primary" size="medium" @click="modify">保存el-button>
    113. 					el-form-item>
    114. 				el-form>
    115.  
    116. 		div>
    117. 		<link rel="stylesheet" type="text/css" href="js/element_ui.css" />
    118. 		<script src="js/vue.min.js" type="text/javascript" charset="utf-8">script>
    119. 		<script src="js/element_ui.js" type="text/javascript" charset="utf-8">script>
    120. 		<script src="js/axios.min.js" type="text/javascript" charset="utf-8">script>
    121. 		<script type="text/javascript">
    122. 			var vm = new Vue({
    123. 				el: "#app",
    124. 				data: {
    125. 					list: [],
    126. 					show: false,
    127. 					/* 录入和修改 */
    128. 					obj: {},
    129. 					action: '',
    130. 					title: '',
    131. 					/* 搜索用的 */
    132. 					admin: {
    133. 						aname:'',
    134. 						rid:''
    135. 					},
    136. 					page: 1,
    137. 					total: 0,
    138. 					/* 后台传过来 动态增加 */
    139. 					line: 0,
    140. 					pagelist: [],
    141. 				},
    142. 				created() {
    143. 					axios.defaults.baseURL = "http://localhost:9090/";
    144. 					this.selectByPage()
    145. 				},
    146. 				computed: {
    147. 					/* 通过计算属性拼接条件page aname rid */
    148. 					param() {
    149. 						return `page=${this.page}&aname=${this.admin.aname}&rid=${this.admin.rid}`;
    150. 					}
    151. 				},
    152. 				/* 增加观察者模式 观察页码的变化 */
    153. 				watch:{
    154. 					page(){
    155. 						this.selectByPage()
    156. 					}
    157. 				},
    158. 				methods: {
    159. 					selectList() {
    160. 						axios.post("admin/selectList").then(res => {
    161. 							this.list = res.data;
    162. 						})
    163. 					},
    164. 					/* 实现分页 */
    165. 					selectByPage() {
    166. 						/* 传param->aname、rid、page */
    167. 						axios.post("admin/selectByPage", this.param).then(res => {
    168. 							this.list = res.data.records;
    169. 							this.total = res.data.total;
    170. 							/* 动态增加 需要后台回传数据*/
    171. 							this.line = res.data.size;
    172. 							this.pagelist = [this.line];
    173. 						})
    174. 					},
    175. 					delobj(i) {
    176. 						this.$confirm("确认删除？", "提示", {
    177. 							confirmButtonText: "确定",
    178. 							cancelButtonText: "取消",
    179. 							type: "warning"
    180. 						}).then(() => { //then是确认的
    181. 							axios.post("admin/delete", 'aid=' + this.list[i].aid).then(res => {
    182. 								if (res.data == "1") {
    183. 									this.$message({
    184. 										/* 传个json */
    185. 										type: "success",
    186. 										message: "删除成功！"
    187. 									})
    188. 									/* 删除之后展示数据 */
    189. 									this.list.splice(i, 1)					
    190. 								} else {
    191. 									//简写形式
    192. 									this.$message.error("删除失败！")
    193. 								}
    194. 							})
    195. 						}).catch(() => { //catch是点取消的提示
    196. 							//this.$message.error("取消删除！")  //可以当取消提示用
    197. 						})
    198. 					},
    199. 					deleteList() {
    200. 						//判断是否有选中项
    201. 						var selections = this.$refs.objs.selection;
    202. 						if (selections.length == 0) {
    203. 							this.$message.error("必须选择一项")
    204. 							return;
    205. 						}
    206. 						this.$confirm("是否删除所有选中项？", "提示", {
    207. 							confirmButtonText: "确定",
    208. 							cancelButtonText: "取消",
    209. 							type: "warning"
    210. 						}).then(() => {
    211. 							var ids = [];
    212. 							selections.forEach((a, i) => {
    213. 								ids.push(a.aid)
    214. 							})
    215. 							axios.post("admin/deleteList", ids).then(res => {
    216. 								if (res.data == "1") {
    217. 									this.$message({
    218. 										/* 传个json */
    219. 										type: "success",
    220. 										message: "删除成功！"
    221. 									})
    222. 									/* 删除 */
    223. 									this.selectByPage();
    224.  
    225. 								} else {
    226. 									//简写形式
    227. 									this.$message.error("删除失败！")
    228. 								}
    229. 							})
    230. 						}).catch(() => {
    231.  
    232. 						})
    233. 					},
    234. 					modify() {
    235. 						axios.post("admin/" + this.action, this.obj).then(res => {
    236. 							if (res.data == "1") {
    237. 								this.$message.success(this.title + "成功!")
    238. 								this.list.push(this.obj);
    239. 								this.obj = {}
    240. 								this.selectByPage()
    241. 							} else {
    242. 								this.$message.error(this.title + "失败!")
    243. 							}
    244. 						})
    245. 					}
    246. 				}
    247. 			})
    248. 		script>
    249. 	body>
    250. html>

    后端：

    1. //批量删除
    2.     @RequestMapping("/deleteList")
    3.     public String deleteList(String[] aid){
    4.         try {
    5.             //把数组转换为集合
    6.             as.removeByIds(Arrays.asList(aid));
    7.             System.out.println(aid + "删除成功");
    8.             return "1";
    9.         } catch (Exception e) {
    10.             e.printStackTrace();
    11.         }
    12.         return "0";
    13.     }
    14.  
    15.     //分页+动态搜索
    16.     @RequestMapping("/selectByPage")
    17.     public Page selectByPage(Integer page,String aname,String rid){
    18.         //搜索器
    19.         QueryWrapper qw = new QueryWrapper();
    20.         //模糊搜素
    21.         qw.like(!StringUtils.isEmpty(aname),"aname",aname);
    22.         qw.eq(!StringUtils.isEmpty(rid),"rid",rid);
    23.         return as.page(new Page(page,size),qw);
    24.     }

  • 相关阅读:
    后端微服务项目中出现的问题整理2022年11月
    性能测试 —— Tomcat监控与调优：Jconsole监控
    第十五届蓝桥杯物联网试题（国赛）
    Element 2 组件源码剖析之布局容器
    word实用小技能（肝论文必备）
    【C语言】ROUND_UP宏定义的解释
    【广州华锐互动】影视制作VR在线学习：身临其境，提高学习效率
    Linux基础测试题（虚拟机和物理机相ping出现的问题）
    【论文阅读】Extract Free Dense Labels from CLIP
    java 高级面试题（借鉴）（中）
  • 原文地址：https://blog.csdn.net/m0_54435916/article/details/127780440