您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
07-前端代码优化(element plus的table组件的多选api)
发布时间：2024-12-14 22:18:49编辑：雪饮阅读（）
-
代码优化的话，就是默认的那个之前我们做的删除成功后的提示的组件的样式实际上可以不用了，默认的样式就挺好的。
还有就是之前替换为table组件后，忘记了之前多选的复选框，就是选择多个数据的时候那个复选框没有带过来，不过element plus的table组件上面自带有这个，用起来更优雅一些。
在依据多选的列，一般是主键像是id之类的，添加属性如
type="selection"
然后多选后会在table组件触发selection-change时间，会将多选的每条数据传递过来，则自行遍历取到多选的id即可。
那么完整的实现如：
<%--
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 handleSelectionChange = (objs) => {
var c_ids=[];
for(var i in objs){
c_ids.push(objs[i].id)
}
ids.value = c_ids;
}
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,
searchFunc,
handleSelectionChange
}
}
});
app.use(ElementPlus, {
locale: ElementPlusLocaleZhCn
})
app.mount('#app');
}
</script>
<style>
</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 @selection-change="handleSelectionChange" :data="brands" style="width: 100%">
<el-table-column prop="id" type="selection" 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>
关键字词：element,plus,table,多选
相关文章
- 06-条件查询-前端（用element plus美好表格并用switch组
- 05-条件查询-后台（cdn方式使用element plus的icon用法）
- 04-分页查询-后台&前端(element plus的cdn方式实现cdn
- 03-分页查询-分析(自定义泛型实现分页查询及element p
- 02-批量删除-后台&前端(element plus的cdn方式安装与
- 下一步的学习建议(laravel11+inertia使用ElementPlus
- 虚拟数据填充及同一页面多个分页问题(laravel11+inert
- tol24.com15-1(desk与table)
- 14336 - 使用Elementor来自定义网站设计
- elementUi按需引入_转(两种按需引入方式)