您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
06-条件查询-前端（用element plus美好表格并用switch组件自定义表头）
发布时间：2024-12-14 21:50:08编辑：雪饮阅读（）
-
要说条件查询的前端，其实在上一篇中我已经实现了，那么这次就是美化下表格，之前用原生table做的，这里就换用element plus的table做，并且自定义表头将状态用switch组件（也是element plus组件）实现下，不过暂时我们还没有切换状态的api，所以仅仅展示状态，切换操作设置为禁止，则优化后的完整代码如：
<%--
Created by IntelliJ IDEA.
User: 1
Date: 2024/12/2
Time: 15:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
<script src="//unpkg.com/@element-plus/icons-vue"></script>
<script>
window.onload=function(){
const { createApp, ref,watch } = Vue
console.log("ElementPlus",ElementPlus);
var app=createApp({
setup() {
const brands = ref([])
const ids=ref([]);
const msg=ref("");
const page=ref(1);
const oldPage=ref(1);
const pageSize=ref(10);
const total=ref(0);
const selectOptions = [
{
value: '-1',
label: '不限',
},
{
value: '0',
label: '禁用',
},
{
value: '1',
label: '启用',
}
]
const search_company_name=ref("");
const search_brand_name=ref("");
const selectValue = ref(selectOptions[0].value);
const Search=ElementPlusIconsVue.Search;
const ServletQueryAllAjax=()=>{
axios.get('/zeroEightUserLoginCaseModule/ServletQueryAllAjax')
.then(function (response) {
console.log(response);
brands.value=response.data;
})
.catch(function (error) {
console.log(error);
});
}
const PagingBean=(p_page,p_pageSize)=>{
console.log("PagingBean page",p_page);
console.log("PagingBean pageSize",p_pageSize);
axios({
method:'GET',
url:'/zeroEightUserLoginCaseModule/Brand/ServletQueryAllPaging',
params:{
page:p_page,
pageSize:p_pageSize,
status:selectValue.value,
company_name:search_company_name.value,
brand_name:search_brand_name.value
}
}) .then(function (response) {
console.log("分页数据",response);
brands.value=response.data.list;
total.value=response.data.total;
if(response.data.list.length>0){
page.value=p_page;
}
})
.catch(function (error) {
console.log(error);
});
}
const searchFunc=()=>{
PagingBean(1,pageSize.value);
}
const deleteInBatches=()=>{
console.log("deleteInBatches ids:",ids.value);
if(ids.value.length==0){
return;
}
axios({
method:'post',
url:'/zeroEightUserLoginCaseModule/Brand/delByIds',
data:ids.value
}) .then(function (response) {
console.log(response);
if(response.data=="success"){
//alert("删除成功");
msg.value="success";
setTimeout(function(){
msg.value="";
PagingBean(page.value,pageSize.value);
},2000);
}
})
.catch(function (error) {
console.log(error);
});
}
const currentChange=(newPage)=>{
//这个不用实现也行，只是为了迎合element plus的分页组件的要求
}
const pageSizeChange=(pageSize)=>{
//这个不用实现也行，只是为了迎合element plus的分页组件的要求
}
PagingBean(page.value,pageSize.value);
watch(page,(newPage,oldPage)=>{
console.log("newPage",newPage);
console.log("oldPage",oldPage);
oldPage.value=oldPage;
PagingBean(newPage,pageSize.value);
});
return {
brands,
ids,
msg,
page,
pageSize,
total,
selectValue,
selectOptions,
search_company_name,
search_brand_name,
Search,
deleteInBatches,
currentChange,
pageSizeChange,
searchFunc
}
}
});
app.use(ElementPlus, {
locale: ElementPlusLocaleZhCn
})
app.mount('#app');
}
</script>
<style>
.el-alert {
margin: 20px 0 0;
}
.el-alert:first-child {
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<p>欢迎你,${pageContext.request.getSession().getAttribute("user").username}</p>
<div style="display: flex;gap:1rem;">
<div>
<label>当前状态：</label>
<el-select
v-model="selectValue"
size="small"
style="width: 120px"
>
<el-option
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div>
<label>企业名称：</label>
<el-input v-model="search_company_name" style="width: 120px" placeholder="Please input"></el-input>
</div>
<div>
<label>品牌名称：</label>
<el-input v-model="search_brand_name" style="width: 120px" placeholder="Please input"></el-input>
</div>
<el-button :icon="Search" circle @click="searchFunc()"></el-button>
</div>
<div class="buttons" style="display: flex;gap:1rem;">
<button @click="deleteInBatches()">批量删除</button>
<a href="addBrand.jsp">添加品牌</a>
</div>
<template v-if="msg=='success'">
<el-alert title="Success alert" type="success"></el-alert>
</template>
<el-table :data="brands" style="width: 100%">
<el-table-column prop="id" label="ID" width="180"></el-table-column>
<el-table-column prop="brandName" label="品牌名称" width="180" /></el-table-column>
<el-table-column prop="companyName" label="企业名称"></el-table-column>
<el-table-column prop="ordered" label="排序"></el-table-column>
<el-table-column prop="description" label="品牌介绍"></el-table-column>
<el-table-column label="状态" width="180">
<template #default="scope">
<div style="">
<template v-if="scope.row.status == 1">
<el-switch :model-value="true" :disabled="true"></el-switch>
</template>
<template v-if="scope.row.status == 0">
<el-switch :model-value="false" :disabled="true"></el-switch>
</template>
</div>
</template>
</el-table-column>
</el-table>
<div class="example-pagination-block">
<el-pagination layout="total,prev, pager,next,jumper" :total="total" v-model:current-page="page" ></el-pagination>
</div>
</div>
</body>
</html>
关键字词：elemen,plus,table,switch,自定义表头
相关文章
- 05-条件查询-后台（cdn方式使用element plus的icon用法）
- 04-分页查询-后台&前端(element plus的cdn方式实现cdn
- 03-分页查询-分析(自定义泛型实现分页查询及element p
- 02-批量删除-后台&前端(element plus的cdn方式安装与
- 下一步的学习建议(laravel11+inertia使用ElementPlus
- 虚拟数据填充及同一页面多个分页问题(laravel11+inert
- switch lite金手指EdiZonSE的使用
- switch lite的网络投屏(解决简单rtsp无法连接)
- Switch Lite的大屏视界：解锁掌机投屏新玩法，畅享大屏游
- switch lite大气层系统如何获取截屏