【vue实战项目】通用管理系统：学生列表

news2024/12/25 10:13:07

本文为博主的vue实战小项目系列中的第五篇，很适合后端或者才入门的小伙伴看，一个前端项目从0到1的保姆级教学。前面的内容：

【vue实战项目】通用管理系统：登录页-CSDN博客

【vue实战项目】通用管理系统：封装token操作和网络请求-CSDN博客

【vue实战项目】通用管理系统：api封装、404页-CSDN博客

【vue实战项目】通用管理系统：首页-CSDN博客

目录

1.概述

2.列表

3.分页

4.删除

5.查询

1.概述

本文实现的是学生管理界面里面的学生列表组件，该组件内包含对学生信息的查询、删除、以及对数据的分页。没有录入功能，录入功能在接下来后续的信息管理组件中。

首先来看一下学生列表组件的最终页面效果：

2.列表

学生列表studentList组件是个表格，表格在elementUI上面去找一个即可，然后调整一下.

代码：

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

效果：

封装api：

根据之前的编码规范，这里我们依然将获取数据的方法封装到api（api.js）中。

import service from '../utils/service'

export function login(data){
    return service({
        method:'post',
        url:'/login',
        data
    })
}

export function students(params){
    return service({
        method:'get',
        url:'/student/list',
        params
    })
}

在sutudentList中调用api获取数据：

<script>
import {students} from '@/api/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                console.log(res);
            })
        }
    },
    created(){
        this.getData();
    }
  }
</script>

可以看到获取到了所有数据：

既然能获取到数据，接下来绑定数据即可：

<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center"> </el-table-column>
      <el-table-column prop="age" label="年龄" align="center"> </el-table-column>
      <el-table-column prop="sex" label="性别" align="center"> </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center"> </el-table-column>
      <el-table-column prop="number" label="学号" align="center"> </el-table-column>
      <el-table-column prop="address" label="地址" align="center"> </el-table-column>
      <el-table-column prop="state" label="状态" align="center"> </el-table-column>
      <el-table-column  label="操作">
        <template>
          <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {students} from '@/api/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                if(res.status===200){
                  this.tableData=res.data
                }
            })
        }
    },
    created(){
        this.getData();
    }
  }
</script>

最终效果：

这里有个小地方需要注意，就是关于数据转换。后端传回来的数据中状态和类型字段都是用数字表示的。需要在前端做对应转换：

可以这样做：

export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                if(res.status===200){
                  this.tableData=res.data
                  this.tableData.forEach(item=>{
                    item.sex===1?item.sex='男':item.sex='女'
                  })
                }
            })
        }
    },
    created(){
        this.getData();
    }
  }

但是上面这样做会有一个问题：

因为这里把值取成了中文，再传给后端的时候就会是中文，后端还要做一次转换，搞得很麻烦。

巧妙一点，再加一个字段来存中文就是。其它状态字段类似处理。

<script>
import {students} from '@/api/api.js'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    methods:{
        getData(params){
            students(params).then((res)=>{
                if(res.status===200){
                  this.tableData=res.data
                  this.tableData.forEach(item=>{
                    item.sex===1?item.sex_text='男':item.sex_text='女'
                    item.status===1?item.status_text='已入学':item.status_text='未入学'
                  })
                }
            })
        }
    },
    created(){
        this.getData();
    }
  }
</script>

3.分页

elementUI提供了完整的分页组件。还是老规矩去官网上看一款，拿来就用。

把分页组件放到studentList组件中去：

<template>
  <div class="studentList">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage:1, //当前页数
      pageSize:10, //每页显示条数
      total:0 //总条数
    };
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total=res.data.total;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.status === 1
              ? (item.status_text = "已入学")
              : (item.status_text = "未入学");
          });
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less">
.studentList{
  .el-pagination{
    text-align: left;
    margin-top: 20px;
  }
}
</style>

接下来就是分页中关键的步骤了，有关分页逻辑的编写。

首先是分页的总页数：

操作组件自带的方法即可控制切换pageSize的时候，分页插件自动变换总页数。这两个方法见名知意。

    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1;
    },
    handleCurrentChange(val) {
      this,this.currentPage=val;
    },

控制数据条数的显示：

el-table的:data是用来给列表组件绑定数据的，我们就是通过所绑定的这个数组来控制数据的显示的。js里面调用数组的slice(index,size)可以对数组进行切片，这里我们就用这个方法来实现。

<!--slice((当前页数-1)*每页条数,当前页数*当前条数)-->
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%">

最后可以用计算属性来封装一下分页的方法，最后的页面代码：

<template>
  <div class="studentList">
    <!--slice((当前页数-1)*每页条数,当前页数*当前条数)-->
    <el-table :data="compData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5,10,15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { students } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage:1, //当前页数
      pageSize:10, //每页显示条数
      total:0 //总条数
    };
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total=res.data.total;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.status === 1
              ? (item.status_text = "已入学")
              : (item.status_text = "未入学");
          });
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize=val;
      this.currentPage=1;
    },
    handleCurrentChange(val) {
      this,this.currentPage=val;
    },
  },
  created() {
    this.getData();
  },
  computed:{
    compData(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  }
};
</script>

<style lang="less">
.studentList{
  .el-pagination{
    text-align: left;
    margin-top: 20px;
  }
}
</style>

效果：

4.删除

删除的话无非就是点击删除按钮，将要删除的行数据的id传给后端。这里的关键是怎么获取到所点击的行的数据，用slot-scope。先写一个删除逻辑，里面不做删除，而是打印这一行的数据。

<el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
//删除
    del(row){
      console.log(row);
    }

点击删除，可以看到打印出来了该行的数据：

既然都拿到数据了，就真刀真枪的删除即可。

在真刀真枪的删除之前，我们还是依然保持代码风格的整洁，按照前面一样，在api.js里封装一下删除学生的api：

export function studentDel(id){
    return service({
        method: 'delete',
        url:`/student/${id}`
    })
}

封装好后去studentList里调用一下：

import{studentDel} from "@/api/api.js"
del(row){
      studentDel(row.id).then(res=>{
        if(res.data.code===200){
          this.$message({message:'删除数据成功',type:'success'})
          //删除后要刷新数据
          this.getDate()
        }
      });
    }

至此删除功能写完了，可以试试是不是能正常使用。

5.查询

老规矩先去elementUI上面找一个搜索框，没有直接的搜索框，用这个行内表单来改造一下：

其实具体的查询方法和重置方法都不需要重新封装api，可以直接调用getData方法，通过传参的不同来实现，这里直接给出整个组件页面最后的代码：

<template>
  <div class="studentList">
    <!--查询表单-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" size="mini">
      <el-form-item label="姓名">
        <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-button type="primary" @click="reset">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="find">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="compData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="sex_text" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="classNum" label="班级" align="center">
      </el-table-column>
      <el-table-column prop="number" label="学号" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="del(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <div class="block">
      <span class="demonstration">完整功能</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { students } from "@/api/api.js";
import { studentDel } from "@/api/api.js";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条数
      total: 0, //总条数
      formInline:{
        name:''
      }
    };
  },
  methods: {
    getData(params) {
      students(params).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.tableData.forEach((item) => {
            item.sex === 1 ? (item.sex_text = "男") : (item.sex_text = "女");
            item.status === 1
              ? (item.status_text = "已入学")
              : (item.status_text = "未入学");
          });
        }
      });
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this, (this.currentPage = val);
    },
    //删除
    del(row) {
      studentDel(row.id).then((res) => {
        if (res.data.code === 200) {
          this.$message({ message: "删除数据成功", type: "success" });
          this.getData();
        }
      });
    },
    //查询
    find(){
        this.getData(this.formInline.name);
    },
    //重置
    reset(){
        this.getData();
    }
  },
  created() {
    this.getData();
  },
  computed: {
    compData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
};
</script>

<style lang="less">
.studentList {
  .el-form-inline .el-form-item{
    text-align: left;
  }
  .el-pagination {
    text-align: left;
    margin-top: 20px;
  }
}
</style>

至此，整个学生列表组件写完了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1251254.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CMD - ping

CMD - ping

文章目录 前言参数 前言 ping 命令主要测试到达指定 IP 或主机的连通性. 参数 -t: ping 指定的计算机直到中断 -a: 将地址解析为主机名 -n count: 要发送的回显请求数
阅读更多...
【Linux】常见指令及周边知识（一）

【Linux】常见指令及周边知识（一）

【Linux】常见指令及周边知识&#xff08;一&#xff09; 一、初始Linux操作系统1.Linux背景2.如何使用Linux 二、学习Linux之前的预备周边知识&#xff08;重点&#xff09;&#xff1a;1.什么叫做文件&#xff1f;2. Linux下的路径分隔符3.在Linux中为什么会存在路径&#xf…
阅读更多...
电子学会C/C++编程等级考试2022年03月（二级）真题解析

电子学会C/C++编程等级考试2022年03月（二级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：温度统计 现有一段时间的温度数据，请统计指定温度出现的次数。 时间限制：1000 内存限制：65536输入 第一行一个整数n,表示温度数据的个数。(0 < n ≤ 200) 第二行n个整数，以空格分隔，每个整数表示一个温度，温度的范围大…
阅读更多...
Python中的数据类型

Python中的数据类型

如果说python中的数据类型,那我们要从标准数据类型说起,在python中标准数据类型如下: 数字类型: 数字数据类型用于存储数值。 他们是不可改变的数据类型&#xff0c;这意味着改变数字数据类型会分配一个新的对象。 在python2.X中数据类型分的比较多,有int(有符号整型),long(…
阅读更多...
训练日志——wandb

训练日志——wandb

目录 安装与登录基础使用与可视化常用函数wandb.init()wandb.config()wandb.log()wandb.finish()wandb.watch() 参考 安装与登录 安装 pip install wandb注册并登录 https://wandb.ai/site客户端登陆 在终端中输入wandb login 然后出现You can find you API key的一串网站&am…
阅读更多...
cocos游戏引擎，弹出框浏览器正常，但到了抖音、微信小游戏就不显示的bug原因及解决办法

cocos游戏引擎，弹出框浏览器正常，但到了抖音、微信小游戏就不显示的bug原因及解决办法

本篇文章主要讲解&#xff1a;cocos游戏引擎&#xff0c;浏览器测试时弹出框好好的&#xff0c;无任何报错&#xff0c;构建项目到抖音、微信小游戏时无法弹出弹出框&#xff0c;但又无报错的问题原因及解决办法。 日期&#xff1a;2023年11月25日 作者&#xff1a;任聪聪 问题…
阅读更多...
系列十四、BeanFactory vs FactoryBean vs ApplicationContext

系列十四、BeanFactory vs FactoryBean vs ApplicationContext

一、BeanFactory 1.1、概述 IOC思想是基于IOC容器完成的&#xff0c;IOC容器的底层就是对象工厂&#xff0c;其核心接口为BeanFactory&#xff0c;BeanFactory是一个工厂类&#xff0c;负责生产和管理各种各样的bean&#xff0c;也是Spring内部的使用接口&#xff0c;不提供给…
阅读更多...
基于springboot实现学生成绩管理系统项目【项目源码+论文说明】

基于springboot实现学生成绩管理系统项目【项目源码+论文说明】

基于springboot实现学生成绩管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&am…
阅读更多...
一键提取随机画面为JPG图片，实现高效剪辑

一键提取随机画面为JPG图片，实现高效剪辑

你是否曾经在观看视频时&#xff0c;遇到了一些精彩瞬间&#xff0c;却无法将其保存下来&#xff1f;现在&#xff0c;我们为你带来了一款全新的工具——视频批量剪辑&#xff0c;一键提取随机画面为JPG图片&#xff0c;让你可以轻松留住这些精彩瞬间&#xff01; 首先&#xf…
阅读更多...
C++入门第九篇---Stack和Queue模拟实现，优先级队列

C++入门第九篇---Stack和Queue模拟实现，优先级队列

前言&#xff1a; 我们已经掌握了string vector list三种最基本的数据容器模板&#xff0c;而对于数据结构的内容来说&#xff0c;其余的数据结构容器基本都是这三种容器的延申和扩展&#xff0c;在他们的基础上扩展出更多功能和用法&#xff0c;今天我们便来模拟实现一下C库中…
阅读更多...
CDA一级备考思维导图

CDA一级备考思维导图

CDA一级备考思维导图 第一章 数据分析概述与职业操守1、数据分析概念、方法论、角色2、数据分析师职业道德与行为准则3、大数据立法、安全、隐私 CDA一级复习备考资料共计七个章节&#xff0c;如需资料&#xff0c;请留言&#xff0c;概览如下图&#xff1a; 第一章 数据分析…
阅读更多...
P11 如何写一个C++类 Log日志基础

P11 如何写一个C++类 Log日志基础

01 前言 到目前为止&#xff0c;我们学了类 class&#xff0c;本期我们要尝试着从头开始写一个类。 本期不会讲的太深。我们不会写非常复杂的类&#xff0c;我们要会完成一个基本的 log 类 02 为什么使用 log 首先我们先分析一下我们的需求&#xff0c;这个 log 类到底是什么…
阅读更多...
安捷伦E4404B频谱分析仪，100 Hz 至 6.7 GHz

安捷伦E4404B频谱分析仪，100 Hz 至 6.7 GHz

E4404B是安捷伦ESA-E系列频谱分析仪&#xff0c;它是一款能够适应未来发展需求的中高端频谱分析仪解决方案。该系列在频谱分析仪的测量速度、动态范围、精度和功率分辨能力等方面&#xff0c;都为类似价位的产品树立了性能标杆。其灵活的平台设计使得研发、制造和现场服务工程师…
阅读更多...
HCIA-RS基础-距离矢量路由协议

HCIA-RS基础-距离矢量路由协议

前言&#xff1a; 动态路由协议根据寻径方式可以分为距离矢量路由协议和链路状态路由协议。本文将详细介绍距离矢量路由协议的原理&#xff0c;并阐述其中一个重要概念——路由环路&#xff0c;同时介绍如何避免路由环路的方法。通过学习本文&#xff0c;您将能够深入理解距离矢…
阅读更多...
探秘：性能测试中最常见的陷阱与解决方案！

探秘：性能测试中最常见的陷阱与解决方案！

概述一下性能测试流程&#xff1f; 1.分析性能需求。挑选用户使用最频繁的场景来测试。确定性能指标&#xff0c;比如&#xff1a;事务通过率为100%&#xff0c;TOP99%是5秒&#xff0c;最大并发用户为1000人&#xff0c;CPU和内存的使用率在70%以下2.制定性能测试计划&#x…
阅读更多...
Acrel-2000电力监控系统在上海大世界保护修缮工程项目中的应用

Acrel-2000电力监控系统在上海大世界保护修缮工程项目中的应用

摘要&#xff1a;安科瑞生产厂家1876150/-6237黄安南 介绍上海大世界电力监控系统&#xff0c;采用智能电力仪表采集配电现场的各种电参量和开关信号。系统采用现场就地组网的方式&#xff0c;组网后通过现场总线通讯并远传至后台&#xff0c;通过Acrel-2000型电力监控系统实现…
阅读更多...
CCC联盟——UWB MAC（二）

CCC联盟——UWB MAC（二）

在上一篇文章中对CCC联盟UWB MAC框架进行了介绍&#xff0c;在本文中&#xff0c;将MAC层的时间网格进行简单介绍。 2、MAC时间网格&#xff08;Time Grid) DK UWB测距协议属于一对多&#xff08;One to Many, O2M)测距协议。发起者&#xff0c;每次发送4帧&#xff0c;接收N帧…
阅读更多...
浅谈如何成为一名优秀教师

浅谈如何成为一名优秀教师

你是不是也有一个梦想&#xff0c;想要成为一位优秀的教师&#xff0c;让孩子们如沐春风&#xff0c;收获满满&#xff1f;那么&#xff0c;今天就让我来给你分享一下成为优秀教师的秘诀吧&#xff01; 热爱教育&#xff0c;点燃激情 成为优秀教师&#xff0c;首先要有对教育的…
阅读更多...
C语言 - Linux基础使用

C语言 - Linux基础使用

Linux 1. Linux简介 Linux是操作系统 Linux中所有的程序与硬件设备对Linux系统而言都是一个文件或文件夹 1.1 Linux发行版本 发型版本的名称/版本有发行方决定 Red Hat Enterprise Linux 5/6/7Suse Linux Enterprise 12Debian Linux 7.8Ubuntu Linux 14.10/15.04 1.2 Red H…
阅读更多...
Vue与UserEcharts、DataV的协同

Vue与UserEcharts、DataV的协同

文章目录 引言一、Vue.js简介二、ECharts和UserEcharts1.ECharts简介2.UserEcharts&#xff1a;Vue和ECharts的结合 三、DataV简介四、Vue与DataV的结合1.DataV的Vue插件2.Vue和DataV的数据交互 结论我是将军&#xff0c;我一直都在&#xff0c;。&#xff01; 引言 接着上一篇…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023