Vue——根据tab值调取相应API，渲染列表数据

最新推荐文章于 2024-08-14 23:33:31 发布
最新推荐文章于 2024-08-14 23:33:31 发布
阅读量516 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kiruthika/article/details/119800431
版权

页面展示index.vue:

<template>
  <div class="wrapper">
    <TabList class="tablist" @tabEvent="tabEvent($event)" />
    <div class="main-wrapper">
      <button class="createbtn" color="primary" @click="toCreate">
        添加
      </button>

      <TableList
        :attributes="attributes"
        :tabId="tabId"
        :drawer.sync="drawer"
        @editEvent="editEvent($event)"
        @refreshListEvent="refreshListEvent($event)"
      />
    </div>

    <Create
      v-if="drawer"
      :tabId="tabId"
      :editId="editId"
      :displayType="displayType"
      :drawer.sync="drawer"
      @refreshListEvent="refreshListEvent($event)"
    />
  </div>
</template>

<script>
import { api_request } from "@/util/network";
import TabList from "@/components/attributeCps/TabList";
import TableList from "@/components/attributeCps/TableList";
import Create from "@/components/attributeCps/Create";

export default {
  name: "personList",
  data() {
    return {
      tabId: "a",
      attributes: [],
      drawer: false,
      displayType: "CREATE",
      editId: null
    };
  },
  created() {
    this.switchFetchList(this.tabId);
  },
  methods: {
    tabEvent(id) {
      this.tabId = id;
      this.switchFetchList(this.tabId);
    },
    refreshListEvent(id) {
      this.switchFetchList(id);
    },
    editEvent({ id, displayType }) {
      this.editId = id;
      this.displayType = displayType;
    },
    fetchAList() {
      this.$http
        .get(`/api/a/list`)
        .delegateTo(api_request)
        .then(data => {
          this.attributes = data.attributes;
        })
        .catch(({ code, message }) => {
          throw `查询列表失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegate);
    },
    fetchBList() {
      this.$http
        .get(`/api/b/list`)
        .delegateTo(api_request)
        .then(data => {
          this.attributes = data.attributes;
        })
        .catch(({ code, message }) => {
          throw `查询列表失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegate);
    },
    fetchCList() {
      this.$http
        .get(`/api/c/list`)
        .delegateTo(api_request)
        .then(data => {
          this.attributes = data.attributes;
        })
        .catch(({ code, message }) => {
          throw `查询列表失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegate);
    },
    toCreate() {
      this.drawer = true;
      this.displayType = "CREATE";
    },
    switchFetchList(tabId) {
      switch (tabId) {
        case "a":
          this.fetchBList();
          break;
        case "b":
          this.fetchCList();
          break;

        default:
          this.fetchAList();
          break;
      }
    }
  },
  components: {
    TabList,
    TableList,
    Create
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  .tablist {
    margin-bottom: 20px;
  }
  .main-wrapper {
    width: 100%;
    .createbtn {
      width: 120px;
      height: 40px;
      line-height: 40px;
      background-color: #0078d7;
      color: #fff;
      margin-left: 20px;
      margin-bottom: 20px;
      border-radius: 4px;
    }
  }
}
</style>

封装tab组件TabList.vue:

<template>
  <div class="tablist-container">
    <ul class="tablist">
      <li
        :class="[tabId === item.id ? 'tabitem active' : 'tabitem']"
        v-for="item in tabList"
        :key="item.id"
        @click="curItem(item.id)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "tabList",
  data() {
    return {
      tabList: [
        {
          id: "a",
          name: "TAB1"
        },
        {
          id: "b",
          name: "TAB2"
        },
        {
          id: "c",
          name: "TAB3"
        }
      ],
      tabId: "a"
    };
  },
  methods: {
    curItem(id) {
      this.tabId = id;
      this.$emit("tabEvent", this.tabId);
    }
  }
};
</script>

<style lang="less" scoped>
.tablist-container {
  width: 100%;
  .tablist {
    list-style: none;
    display: flex;
    padding-left: 0px;
    .tabitem {
      box-sizing: border-box;
      padding: 12px 46px;
      text-align: center;
      &.active {
        border-bottom: 2px solid #0078d7;
        color: #0078d7;
      }
    }
  }
}
</style>

封装table列表组件TableList.vue:

<template>
  <div class="accountlist">
    <v-simple-table class="table-wrapper">
      <thead>
        <tr>
          <th class="text-left">
            序号
          </th>
          <th class="text-left">
           	姓名
          </th>
          <th class="text-left">
            身高
          </th>
          <th class="text-left">
            是否单身
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in attributes" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.height }}</td>
          <td>{{ item.simple ? "是" : "否" }}</td>
          <td>
            <v-btn icon elevation="0" @click.stop="toEdit(item.id)">
              <v-icon>
                mdi-square-edit-outline
              </v-icon>
            </v-btn>

            <v-btn
              icon
              elevation="0"
              color="red"
              @click.stop="toDelete(item.id)"
            >
              <v-icon>
                mdi-trash-can-outline
              </v-icon>
            </v-btn>
          </td>
        </tr>
      </tbody>
    </v-simple-table>
  </div>
</template>

<script>
import { api_request } from "@/util/network";
export default {
  name: "TableList",
  props: {
    personData: {
      type: Array
    },
    tabId: {
      type: String
    }
  },
  created() {},
  methods: {
    toEdit(id) {
      this.$emit("update:drawer", true);
      this.$emit("editEvent", { id, displayType: "EDIT" });
    },
    toDelete(id) {
      this.$http
        .delete(`/api/${id}`)
        .delegateTo(api_request)
        .then(() => {
          this.$emit("refreshListEvent", this.tabId);
          return "删除成功";
        })
        .catch(({ code, message }) => {
          throw `删除失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegate);
    }
  }
};
</script>

<style lang="less" scoped>
.accountlist {
  .table-wrapper {
    /deep/.v-data-table__wrapper {
      max-height: 626px;
      overflow-x: auto;
      overflow-y: auto;
    }
  }
}
</style>

封装Create组件 Create.vue:

<template>
  <div class="create-wrapper">
    <v-navigation-drawer width="450px" absolute permanent right>
      <h4 class="theme-title">
        {{ displayType === "CREATE" ? "新建属性" : "修改属性" }}
      </h4>
      <hr />
      <div class="theme-content">
        <button v-if="verifyResult" class="verify_notice">
          请填写完整表单数据
        </button>
        <div class="every-item">
          <span style="color:red">*</span>
          <label>姓名</label>
          <input type="text" v-model="name" />
        </div>
        <div class="every-item">
          <span style="color:red">*</span>
          <label>身高</label>
          <input type="text" v-model="height" />
        </div>
        <div class="every-item">
          <span style="color:red">*</span>
          <label>爱好</label>
          <select
            v-model="love"
            @change="getvalue_typeSelected(love)"
            style="appearance: auto;"
          >
            <option :value="item" v-for="item in types" :key="item">{{
              item
            }}</option>
          </select>
        </div>
      </div>
      <div class="submit-con">
        <button @click="submit">
          {{ displayType === "CREATE" ? "新建" : "修改" }}
        </button>
        <button @click="cancel">取消</button>
      </div>
    </v-navigation-drawer>
  </div>
</template>

<script>
import { api_request } from "@/util/network";
export default {
  name: "CreateDrawer",
  props: {
    drawer: {
      type: Boolean
    },
    displayType: {
      type: String
    },
    tabId: {
      type: String
    },
    editId: {
      type: Number
    }
  },
  data() {
    return {
      verifyResult: false,
      name: "",
      height: "",
      love: "",
      types: ["吃", "喝", "玩", "乐"]
    };
  },
  created() {
    if (this.displayType === "EDIT") {
      this.getCurIdData();
    }
    this.love= this.types[0];
  },
  methods: {
    getCurIdData() {
      this.$http
        .get(`/api/attribute/${this.editId}`)
        .delegateTo(api_request)
        .then(data => {
          this.name = data.name;
          this.height= data.height;
          this.love= data.love;
        });
    },
    getvalue_typeSelected(val) {
      this.value_type = val;
    },
    submit() {
      if (
        this.name.trim() !== "" &&
        this.height.trim() !== ""
      ) {
        this.displayType === "CREATE" ? this.toCreate() : this.toEdit();
      } else {
        this.verifyResult = true;
        setTimeout(() => {
          this.verifyResult = false;
        }, 2000);
      }
    },
    cancel() {
      this.$emit("update:drawer", false);
    },
    toCreate() {
      let params = {
        entity_type: this.tabId,
        name: this.name,
        height: this.height,
        love: this.love
      };
      this.$http
        .post("/api/create", params)
        .delegateTo(api_request)
        .then(() => {
          this.$emit("update:drawer", false);
          this.$emit("refreshListEvent", this.tabId);
        })
        .catch(({ code, message }) => {
          this.$emit("update:drawer", false);
          throw `新建失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegate);
    },
    toEdit() {
      let params = {
        name: this.name,
        height: this.height,
        love: this.love
      };
      this.$http
        .patch(`/api/${this.editId}`, params)
        .delegateTo(api_request)
        .then(() => {
          this.$emit("update:drawer", false);
          this.$emit("refreshListEvent", this.tabId);
        })
        .catch(({ code, message }) => {
          this.$emit("update:drawer", false);
          throw `修改失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
            "api." + typeof message === "string"
              ? message
              : JSON.stringify(message)
          )}`;
        })
        .delegateTo(this.$snackbar.delegate);
    }
  }
};
</script>

<style lang="less" scoped>
.create-wrapper {
  .theme-title {
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    padding-left: 20px;
  }
  .theme-content {
    box-sizing: border-box;
    padding: 50px 30px 40px;
    .verify_notice {
      width: 340px;
      text-align: center;
      background-color: red;
      color: #fff;
      height: 40px;
      line-height: 40px;
      border-radius: 10px;
    }
    .every-item {
      display: flex;
      height: 14px;
      align-items: center;
      margin-top: 50px;
      label {
        flex: 0 0 130px;
        text-align: left;
        color: #666;
      }
      input {
        width: 200px;
        height: 40px;
        box-sizing: border-box;
        padding-left: 20px;
        outline: none;
        border: 1px solid #666;
        border-radius: 4px;
        font-size: 14px;
      }

      select {
        width: 200px;
        height: 40px;
        box-sizing: border-box;
        padding-left: 20px;
        outline: none;
        border: 1px solid #666;
        border-radius: 4px;
        font-size: 14px;
      }
    }
  }

  .submit-con {
    text-align: center;
    margin-top: 100px;
    button {
      width: 120px;
      box-sizing: border-box;
      padding: 6px 10px;
      background-color: #0078d7;
      color: #fff;
      border-radius: 4px;
    }
    button:not(:first-child) {
      background-color: #666;
      color: #000;
      margin-left: 20px;
    }
  }
}
</style>
贝塔贝卡贝
关注
[经典案例]使用Vue-cli实现路由间的跳转与调用接口完成前端页面数据的渲染与显示-文章列表项目
海海不掉头发的的博客
10-21 1823
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
Tab切换过快导致数据紊乱
wang_fu_gui_ya的博客
09-19 1095
这是一个典型左侧切换tab，右侧内容区根据tab切换刷新请求数据，当我们切换tab内容正在loading中再次切换其他tab就会导致数据紊乱。当我们试用queueRequest 函数连续调取接口时，第一个接口完成才回去执行第二个接口，但是bug依在。网上还有一种方法就是要修改底层axios去解决，这种方法不顺我心，所以没去做。最后解决方法还是我把问题想的太复杂了，在接口函数中增加tab的校准再赋值。初步解决以为是第二个接口比第一个快导致，所以我写了一个任务队列。
vue-table:带有API jsdelivr.com数据的表
05-06
表 带有API jsdelivr.com数据的表 / SPA，使用API 从获取数据。 /页面上的Main（主要）：1）在文本字段上方进行搜索。 2）在表中，结果是软件包列表。 3）每个条目均包含有关包装的基本信息。 4）搜索结果分为10条记录的页面/单击表附近的一条记录会打开一个包含扩展信息的模式窗口（我选择显示此软件包的最新版本），该信息取自API。 /页脚：有关作者的信息/使用的功能VUEX，VUETIFY，AXIOS
vue 之 tab + list 组件实现点击tab显示对应的tab栏目数据
weixin_47409897的博客
11-14 1950
目录vue 之 tab + list 上拉加载功能实现tab组件list组件之vant vue 之 tab + list 上拉加载功能实现 tab组件 list组件之vant
3.3 python 工作表操作常调用的api属性
最新发布
luckyflyyy的博客
08-14 451
当xlwings模块的sheet对象提供的属性和函数不能满足需求时，可以通过api属性将sheet对象转换为EXCEL VBA中的worksheet对象，再通过调用worksheet对象的属性和函数来完成所需的工作表操作。
vue 根据后台数据 判断显示_用vue写tab切换(从后台获取数据)
weixin_39568889的博客
11-20 912
第四种方式 动态数据{{tit.title}} {{nei.title}} 需要启动node服务(下一篇文章，我会传node所需的文件和启动方式)，以下是node的文件中本例子需要的一小段：.use('/get_tabList', function(req, res, next) {var data={'code':'200','msg':'success','result':[{title:'i...
【前端】Vue项目：旅游App-（2）TabBar：搭建TabBar、循环获取动态数据、相关工具封装
karshey的博客
01-02 1106
TabBar：搭建TabBar、循环获取动态数据、相关工具封装
从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）
随便写写
01-09 736
先用vue2+elementui从0搭建一个vue后台管理项目，完成后会迭代成vue3+TS+element-plus
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 854
前端第一部分：Vue（Ⅰ）
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1057
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
vue2项目
qq_41203489的博客
02-08 1272
编程式导航 实现路由跳转有两种方式： 声明式导航：router-link 编程式导航：push|replace 对于导航式路由，我们有多少个a标签就会生成多少个router-link标签，这样当我们频繁操作时会出现卡顿现象。 对于编程式路由，我们是通过触发点击事件实现路由跳转。同理有多少个a标签就会有多少个触发函数。虽然不会出现卡顿，但是也会影响性能。 最好的解决方案就是：编程时导航+事件委派。事件委派就是把子节点的触发时间都委派给父节点，这样就可以只调用一次回调函数goSearch 利用事件委派也存
基于vue的tab-list类目切换商品列表组件的示例代码
10-15
主要介绍了基于vue的tab-list类目切换商品列表组件的示例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vuejs tab选项切换，数据用get方式获取
u013466380的博客
11-07 3377
vue-resource.js 获取方式 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> html代码 <div id="dynamic-component-demo"> <button ...
Vue3 table表格使用axios调用后端Api数据，统一返回格式
weixin_44728473的博客
06-27 3262
Vue3 table表格使用axios调用后端Api数据，统一返回格式
一个Vue Table 操作的完整示例
u013239910的博客
04-13 974
/////////////////////////////////////////////////////////////////////////////新增。//////////////////////////////////////////////////////////////////////////////编辑。//////////////////////////////////////////////////////////////////////////////删除。
WPF控件TabControl和TabItem原模板分析
热门推荐
松一160
02-09 2万+
一、通过Blend查看TabControl模板代码 二、tabControlStyleAndTemplate.xaml代码 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="htt
vue3 自定义tabbar 缓存当前页面的数据
weixin_45600052的博客
11-04 1433
1. 封装自定义tabbar组件 需要监听当前的路由路径，当路由发生变化的时候，需要存tabslist和 keepaliveName的数据。4. 在路由出口的位置需要使用keepalive组件和component组件 缓存组件的数据 实现切换tab后，上一tab页的内容仍然保留。3. 封装缓存和移除的组件名字keepaliveName的方法（pinia）用于keepalive组件的include属性。2. 封装存储和移除tabsList的数据的方法（pinia）用于显示页签。
vue项目中Tab切换，以及不同状态如何显示
95后独自打拼的程序猿
04-21 1534
前言 例如：这里主要讲到项目中我们会遇到的Tab切换，以及订单状态的显示。 一、Tab切换要如何去写？ 代码如下（示例）： <el-tabs type="border-card"> <el-tab-pane label="全部"> <el-table :data="auditData" style="width: 100%; margin-top: 1%" :header-cell-st
element ui el-steps 和 el-tabs 的联动数据
sinat_35539553的博客
07-05 617
<el-steps :active="Activeindex - 0" finish-status="success" align-center > <el-step title="基本信息"></el-step> <el-step title="商品参数"></el-step> <el-...
Vue深度解析：条件渲染与列表渲染技巧
在Vue.js中，条件渲染和列表渲染是两个核心的视图更新机制，它们使得开发者能够根据数据动态地控制页面内容的显示。让我们逐一深入探讨这两个概念。 首先，条件渲染是基于数据状态决定是否渲染某个或某组元素。Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值