前言：为了完成学校的web前端期末项目，自学了Vue，用Vue+element 完成了一个后台管理系统。其中我觉得比较困难的就是已处理 未处理 Tabs 栏的切换。为了完成这个项目在csdn上借鉴了许多优秀博主的代码，希望我的代码也可以帮助其他有需要的人。
一、Tabs 标签页
我选取的是element官网上最简单的这个模块
复制官网的这段代码后改边些许内容变成自己想要的
<template>
<!-- 处理操作区域 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部事务" name="first"></el-tab-pane>
<el-tab-pane label="未处理" name="second"></el-tab-pane>
<el-tab-pane label="已处理" name="third"></el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
// 默认显示第一个模块
activeName: 'first'
};
},
methods: {
// Tabs栏的切换
handleClick(tab, event) {
console.log(tab, event);
}
}
};
</script>
这样一个大体的模块就已经确定啦！
效果如下图
二、增加 table 数据
接下来就可以加上表格数据了
首先，我们要在 <el-tabs></el-tabs> 里面加上 <el-table></el-table>
然后在 <el-table></el-table> 里加上自己需要的表头信息并且绑定表格数据。
代码：
<template>
<!-- 处理操作区域 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部事务" name="first"></el-tab-pane>
<el-tab-pane label="未处理" name="second"></el-tab-pane>
<el-tab-pane label="已处理" name="third"></el-tab-pane>
</el-tabs>
<!-- 处理信息区域 -->
<el-table
:data="tableData "
style="width: 100%"
border
stripe
max-height="500px"
>
<el-table-column
prop="date"
label="日期"
sortable
align="center"
width="200"
><template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column prop="time" label="时间" align="center" width="200">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center" width="150">
</el-table-column>
<el-table-column
prop="number"
label="工号"
align="center"
width="250"
>
</el-table-column>
<el-table-column
prop="deal"
label="事因"
align="center"
:formatter="formatter"
>
</el-table-column>
<!-- 操作区域 -->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.switch"
active-text="已处理"
inactive-text="未处理"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
//默认显示第一个模块
activeName: "first",
// 表格数据
tableData: [
{
date: "2021-11-1",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1, //1 表示已处理
},
{
date: "2021-11-2",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-3",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0, //0 表示未处理
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
],
};
},
methods: {
// Tabs栏的切换
handleClick(tab, event) {
console.log(tab, event);
}
},
};
</script>
其中最重要的是操作区域：
将已处理赋值 1，未处理赋值 0
<!-- 操作区域 -->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.switch"
active-text="已处理"
inactive-text="未处理"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</template>
</el-table-column>
三、分页栏功能
如果数据太多，就会使用到分页。这个实现的操作是比较简单的
首先在如下位置加上 <el-pagination></el-pagination> （我习惯加在最后）
<template>
<div>
......
......
......
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[8, 6, 4, 2]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
//默认显示第一个模块
activeName: "first",
//每次显示多少条
pageSize: 8,
//从第几页开始显示
currentPage: 1,
// 表格数据
tableData: [],
}
methods: {
// Tabs栏的切换
handleClick(tab, event) {
console.log(tab, event);
},
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
},
};
</script>
注意:添加了分页功能后,table 数据的绑定要发生一定的改变,如图
此时页面变成了如图所示这样
此时页面的基本布局就已经实现完成，接下来就是 Tabs 栏切换的功能
四、Tabs 栏切换功能
首先要在data()中定义三个数据存储的变量
data() {
return {
//默认显示第一个模块
activeName: "first",
//每次显示多少条
pageSize: 8,
//从第几页开始显示
currentPage: 1,
// 数据存储
tableList_0: [], //未处理
tableList_1: [], //已处理
// 数据
tableList: [
{
date: "2021-11-1",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-2",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-3",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
],
tableData: [
{
date: "2021-11-1",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-2",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-3",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
],
};
},
其中的 tableList_0 和 tableList_1 都是一个空的结构体, tableList 中的内容和 tableData 中的内容完全相同, 就是将整个 tableData 里的内容复制到 tableList 里
接下来是 methods 中 Tabs 栏功能切换的实现
methods: {
//tab栏切换
handleClick(tab) {
this.tableList_0 = this.tableList;
this.tableList_1 = this.tableList;
if (tab.label === "全部事务") {
this.tableData = [];
this.tableList.forEach((value, index) => {
this.tableData.push(value);
});
}
if (tab.label === "未处理") {
this.tableData = [];
this.tableList_0.forEach((value, index) => {
if (value.switch === 0) {
// console.log(value);
this.tableData.push(value);
}
});
}
if (tab.label === "已处理") {
this.tableData = [];
this.tableList_1.forEach((value, index) => {
if (value.switch === 1) {
// console.log(value);
this.tableData.push(value);
}
});
}
},
},
以上所有的功能就已经实现完成了, 效果图
五、完整代码
<template>
<div>
<!-- 卡片视图区域 -->
<el-card style="height: 600px">
<!-- 处理操作区域 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部事务" name="first"></el-tab-pane>
<el-tab-pane label="未处理" name="second"></el-tab-pane>
<el-tab-pane label="已处理" name="third"></el-tab-pane>
<!-- 处理信息区域 -->
<el-table
:data="
tableData.slice(
(currentPage - 1) * pageSize,
currentPage * pageSize
)
"
style="width: 100%"
border
stripe
max-height="500px"
>
<el-table-column
prop="date"
label="日期"
sortable
align="center"
width="200"
><template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column prop="time" label="时间" align="center" width="200">
</el-table-column>
<el-table-column prop="name" label="姓名" align="center" width="150">
</el-table-column>
<el-table-column
prop="number"
label="工号"
align="center"
width="250"
>
</el-table-column>
<el-table-column
prop="deal"
label="事因"
align="center"
:formatter="formatter"
>
</el-table-column>
<!-- 操作区域 -->
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-switch
v-model="scope.row.switch"
active-text="已处理"
inactive-text="未处理"
:active-value="1"
:inactive-value="0"
>
</el-switch>
</template>
</el-table-column>
</el-table>
</el-tabs>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[8, 6, 4, 2]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
>
</el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
//默认显示第一个模块
activeName: "first",
//每次显示多少条
pageSize: 8,
//从第几页开始显示
currentPage: 1,
// 数据存储
tableList_0: [], //未处理
tableList_1: [], //已处理
// 数据
tableList: [
{
date: "2021-11-1",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-2",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-3",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
],
tableData: [
{
date: "2021-11-1",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-2",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-3",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-4",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 1,
},
{
date: "2021-11-5",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
{
date: "2021-11-6",
time: "19:02:55",
name: "杨小雨",
number: "123456789",
deal: "因事外出",
switch: 0,
},
],
};
},
methods: {
//tab栏切换
handleClick(tab) {
this.tableList_0 = this.tableList;
this.tableList_1 = this.tableList;
if (tab.label === "全部事务") {
this.tableData = [];
this.tableList.forEach((value, index) => {
this.tableData.push(value);
});
}
if (tab.label === "未处理") {
this.tableData = [];
this.tableList_0.forEach((value, index) => {
if (value.switch === 0) {
// console.log(value);
this.tableData.push(value);
}
});
}
if (tab.label === "已处理") {
this.tableData = [];
this.tableList_1.forEach((value, index) => {
if (value.switch === 1) {
// console.log(value);
this.tableData.push(value);
}
});
}
},
//每页条数改变时触发 选择一页显示多少行
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.currentPage = 1;
this.pageSize = val;
},
//当前页改变时触发跳转其他页
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
},
},
};
</script>
<style lang="less" scoped></style>
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
