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

前言

例如：这里主要讲到项目中我们会遇到的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-column
            prop="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-column
            prop="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-column
            prop="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-column
            prop="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的使用，如有问题请私信。