前言

例如：这里主要讲到项目中我们会遇到的Tab切换，以及订单状态的显示。

一、Tab切换要如何去写？

代码如下（示例）：

<el-tabs type="border-card"><el-tab-pane label="全部"><el-table:data="auditData"style="width: 100%; margin-top: 1%":header-cell-style="{width: '100%',textAlign: 'center',color: '#999999',background: '#F8F9FC'}":cell-style="{ textAlign: 'center', color: '#666666' }"><el-table-column prop="planId" label="订单ID"><template slot-scope="scope">{{ scope.row.planId }}</template></el-table-column><el-table-columnprop="bindStatus"label="状态"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.bindStatus | getBindStatus"close-transition>{{ scope.row.bindStatus | getBindText }}</el-tag></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="待发货"><el-table:data="waitAuditData"style="width: 100%; margin-top: 1%":header-cell-style="{width: '100%',textAlign: 'center',color: '#999999',background: '#F8F9FC'}":cell-style="{ textAlign: 'center', color: '#666666' }"><el-table-column prop="planId" label="订单ID"><template slot-scope="scope">{{ scope.row.planId }}</template></el-table-column><el-table-columnprop="bindStatus"label="状态"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.bindStatus | getBindStatus"close-transition>{{ scope.row.bindStatus | getBindText }}</el-tag></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="已发货"><el-table:data="throughData"style="width: 100%; margin-top: 1%":header-cell-style="{width: '100%',textAlign: 'center',color: '#999999',background: '#F8F9FC'}":cell-style="{ textAlign: 'center', color: '#666666' }"><el-table-column prop="planId" label="订单ID"><template slot-scope="scope">{{ scope.row.planId }}</template></el-table-column><el-table-columnprop="bindStatus"label="状态"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.bindStatus | getBindStatus"close-transition>{{ scope.row.bindStatus | getBindText }}</el-tag></template></el-table-column></el-table></el-tab-pane><el-tab-pane label="待评价"><el-table:data="unthroughData"style="width: 100%; margin-top: 1%":header-cell-style="{width: '100%',textAlign: 'center',color: '#999999',background: '#F8F9FC'}":cell-style="{ textAlign: 'center', color: '#666666' }"><el-table-column prop="planId" label="计划ID"><template slot-scope="scope">{{ scope.row.planId }}</template></el-table-column><el-table-column prop="name" label="机构名称"><template slot-scope="scope">{{ scope.row.name }}</template></el-table-column><el-table-columnprop="bindStatus"label="状态"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.bindStatus | getBindStatus"close-transition>{{ scope.row.bindStatus | getBindText }}</el-tag></template></el-table-column></el-table></el-tab-pane></el-tabs>

二、加入data数据，以及状态设置

代码如下（示例）：

<script>
export default {data() {return {auditData: [{planId: "201515231515",bindStatus: "待发货"},{planId: "4651341564",bindStatus: "已发货"},{planId: "41341431893416",bindStatus: "待评价"}],waitAuditData: [{planId: "1613113516561",bindStatus: "待发货"}],throughData: [{planId: "1613113516561",bindStatus: "已发货"}],unthroughData: [{planId: "1613113516561",bindStatus: "待评价"}]};},filters: {//tag类型getBindStatus(bindStatus) {const bindColor = {待评价: "danger",待发货: "",已发货: "success"};return bindColor[bindStatus];},//颜色名称getBindText(bindStatus) {const bindColor = {待评价: "待评价",待发货: "待发货",已发货: "已发货"};return bindColor[bindStatus];}},methods: {}
};
</script>

总结

提示：这里先介绍项目中我们会遇到的需求，仅供参考

例如：以上就是今天要讲的内容，本文仅仅简单介绍了Tab的使用，如有问题请私信。

vue项目中Tab切换，以及不同状态如何显示相关推荐

tab vue 竖排_vue 实现tab切换保持数据状态
页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新,减少页面重新渲染以及减少请求实现方法:使用包裹组件列表页面跳转详情 ,列表页面保 ...
vue项目中简单进行axios封装及响应状态码提示！
import Vue from 'vue'import axios from 'axios' import { Toast,Indicator,MessageBox } from 'mint-ui'; ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题
vue项目中,在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题做项目的时候发现一个问题,swiper视频与图片轮播切换时在ios上切换很流畅,但是安卓手机就很卡顿,想办法解决了半天,百度 ...
vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
保姆级教程：js前端接入科大讯飞语音评测，实现朗读打分，vue对接科大讯飞语音评测，还可以实现句子逐词分析对错以及打分，将demo接入vue项目中
需求说明:实现一个点击录制英文句子朗读,然后调用科大讯飞接口分析朗读准确度,并逐词分析朗读正确性. 步骤一.下载运行demo 首先附上科大讯飞语音评测流式版的文档链接:链接在此然后在文档里找到dem ...

vue项目中Tab切换，以及不同状态如何显示

前言

一、Tab切换要如何去写？

二、加入data数据，以及状态设置

总结

vue项目中Tab切换，以及不同状态如何显示相关推荐

最新文章

热门文章