Echarts部分图表的使用

发布时间:2022-11-25 ELEMENTUI VUE.JS ECHARTS

 

 源码如下所示:

<template>
  <div class="reports">
      <!-- A面包屑导航区域 -->
			<el-breadcrumb style="margin-bottom:10px" separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>数据报表</el-breadcrumb-item>
                <el-button type="warning" @click="$router.push('/test1')">点我去Test1Echarts</el-button>
			</el-breadcrumb>
            <el-card>
                <el-row>
                    <el-col :span="8">
                        <el-table :data="tableData" style="width:350px">
                            <el-table-column prop="name" label="课程" width="70"></el-table-column>
                            <el-table-column prop="todayBuy" label="今日购买" width="80"></el-table-column>
                            <el-table-column prop="monthBuy" label="本月购买" width="80"></el-table-column>
                            <el-table-column prop="totalBuy" label="总购买" width="80"></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="16">
                            <!-- 折线图 -->
                        <el-card class="linepic" style="height:280px,width:300px">
                            <div ref="echarts1" style="height:280px" class="echarts1"> </div>
                        </el-card>
                        <div class="graph">
                                <!-- 柱状图 -->
                            <el-card class="graphl" style="height:260px">
                                <div id="echarts2" ref="echarts2" style="height:260px"></div>
                            </el-card>
                                <!-- 饼图 -->
                            <el-card  class="graphr" style="height:260px">
                                <div id="echarts3" ref="echarts3" style="height:260px"></div>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
      
            </el-card>
  </div>
</template>


<script>
const echarts = require('echarts')
export default {
  name:"Welcome",
  data() {
      return {
          tableData:[]
      }
  },
  methods: {
     getData(){
          this.$http.get("http://localhost:8080/api/welcome/getData").then((res)=>{
            console.log("welcome=res",res)
            const {tableData,orderData,userData,videoData}=res.data.data
            // 表格数据
            this.tableData=tableData
            console.log("@orderData",orderData);
            console.log("@uesrData",userData);
            console.log("@videoData",videoData);
// ============================================================
//    1.折线图
            // 基于准备好的dom,初始化echarts实例
            const echarts1=echarts.init(this.$refs.echarts1)
            // 指定图表的配置项和数据
            var echarts1Option={}
            // 处理数据
            const xAxis=Object.keys(orderData.data[0])
            // console.log("@xAxis",xAxis);//['苹果', 'vivo', 'oppo', '小米', '三星', '华为']
            const xAxisData={
              data:xAxis
            }
            echarts1Option.xAxis=xAxisData
            echarts1Option.yAxis={}
            echarts1Option.legend=xAxisData
            echarts1Option.series=[]
            xAxis.forEach(key=>{
                echarts1Option.series.push({
                  name:key,
                  data:orderData.data.map(item=>item[key]),
                  type:"line"
                })
            })
            console.log("echarts1Option",echarts1Option);
             //  使用指定的配置项和数据显示图表
            echarts1.setOption(echarts1Option)

// ============================================================
// 2.柱状图
            const echarts2 = echarts.init(this.$refs.echarts2)
            const eachrts2Option = {
                legend: {
                    // 图例文字颜色
                    textStyle: {color: "blue"},
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: userData.map(item => item.date),
                    axisLine: {lineStyle: {color: "#17b3a3"}},
                    axisLabel: {interval: 0,color: "#333"},
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: '新增用户',
                        data: userData.map(item => item.new),
                        type: 'bar'
                    },
                    {
                        name: '活跃用户',
                        data: userData.map(item => item.active),
                        type: 'bar'
                    }
                ],
            }
            echarts2.setOption(eachrts2Option)

// ============================================================
 // 3.饼状图
            const echarts3 = echarts.init(this.$refs.echarts3)
            const eachrts3Option = {
                tooltip: {
                    trigger: "item",
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: [
                    {
                        data: videoData,
                        type: 'pie'
                    }
                ],
            }
            echarts3.setOption(eachrts3Option)
          })
     }
  },
  mounted() {
    this.getData()
  },
}
</script>

<style>
.graph{
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}
.graphl{
    width: 1000px;
}
.graphr{
    width: 1000px;
    margin-left: 5px;
}
.linepic{
    margin: 8px;
}
</style>

更多相关推荐


[Vue3]Pinia简单上手使用

发布时间:2022-11-23 VUE.JS VUE JAVASCRIPT 前端
目录#Pinia是什么?#安装#配置和简单使用1.从main.js导入Pinia到项目并使用 2.创建状态库3.使用状态库4.状态库数据的修改4.状态库数据的还原和监听#Pinia是什么?Pinia是用来替代Vuex的新一代状态管理库,它可以跨组件共享和管理数据.Pinia目前已经是vue官方正式的状态库适用于vue2和vue3.同时支持选项式和组合式。Pinia值得你喜欢的VueStorehtt...

vue父子组件之间的传值

发布时间:2022-11-14 前端技术文档 VUE.JS JAVASCRIPT 前端
父组件向子组件传值第一个就是要明白怎么在父页面中向子组件中传值?你可以给子组件传入一个静态的值:&lt;blog-posttitle="MyjourneywithVue"&gt;&lt;/blog-post&gt;但我们一般都是需要传动态的值,所以需要v-bind绑定,当然,你传的值可以是数字、对象、数组等等。&lt;blog-postv-bind:title="posttitle"&gt;&lt...

简简单单的js防抖

发布时间:2022-10-25 VUE.JS JAVASCRIPT 前端
是不是有遇到过,我咔咔误操作点击提交按钮两下,直接就请求两次,然后生成两次记录的尴尬场景呢?这个时候就需要用到防抖了,由于太过于简单,直接不多说,看代码就懂了,用就完了:lettimeoutconstdebounce=async(fn,arg,time=3000)=&gt;{if(timeout){clearTimeout(timeout)}else{//constres=awaitfn(arg)...

vue安装vue-axios报错

发布时间:2022-10-27 JAVASCRIPT VUE.JS 前端
vue安装axios不出问题(npminstallaxios--save)之后按照视频安装vue-axios出现问题出现报错之后用npminstallaxiosvue-axios--legacy-peer-deps--save这条语句就好了...

tinymce富文本

发布时间:2022-11-16 VUE.JS JAVASCRIPT 前端 HTML
tinymce从本地引入加载先从官网下载对应版本包之后复制到public下附官网:https://www.tiny.cloud/get-tiny/self-hosted/tinymce组件中改动如下:consttinymceCDN="/js/tinymce/tinymce.min.js"/*https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/...

vue+echarts图表的基本使用

发布时间:2022-11-18 ECHARTS JAVASCRIPT 技术工具 VUE.JS 前端
前言在实际开发当中,我们经常需要用到一些图表来实现数据可视化,这时候echarts可以帮助我们实现数据的展示。这里将介绍如何使用前端框架vue+echarts来实现数据可视化。一、echarts是什么?长话短说,echarts就是一个帮助数据可视化的库。二、Vue+echarts使用步骤1.安装echartnpminstallecharts--save2.在main.js引入echartsimpo...

vue2中EventBus的使用方法

发布时间:2022-10-11 VUE.JS VUE 前端
EventBus事件总线,相当于一个全局的仓库,任何组件都可以去这个仓库里获取事件。主要用于组件之间的传值,例如:父子传值,兄弟传值,隔代传值。用法:第一步:在main.js中全局初始化EventBusVue.prototype.$EventBus=newVue()第二步:在A组件中向EventBus发送事件this.$EventBus.$emit("msg",'123');第三步:在B组件中接收...

第三十七篇 Vue中封装Swiper组件

     在上一篇内容的结尾讲到了将swiper初始化从mounted生命周期转移到updated中来能够让swiper动起来,但同时是否会造其他的一个问题?什么问题呢?在每次data中的状态发什么改变,updated中的内容会又重新执行,这样会导致swiper的初始化会重复的执行,如果封装成组件显然不合适,那么如何改进并将swiper封装成一个组件,封装为一个可复用性的组件;那么下面就来如何从静...

Vue生命周期

发布时间:2022-09-12 JAVASCRIPT VUE.JS 前端
什么是Vue生命周期?Vue生命周期是指vue实例对象从创建之初到销毁的过程,vue所有功能的实现都是围绕其生命周期进行的,在生命周期的不同阶段调用对应的钩子函数可以实现组件数据管理和DOM渲染两大重要功能。vue的生命周期的思想贯穿在组件开发的始终,通过熟悉其生命周期调用不同的钩子函数,我们可以准确地控制数据流和其对DOM的影响;vue生命周期的思想是Vnode和MVVM的生动体现和继承。vue...

Vue——购物车

发布时间:2021-12-16 小小的项目 JAVASCRIPT VUE.JS ELEMENTUI
购物车相关功能:    1、将数据交由vue管理  [购物项]    2、增加购物项    3、增加商品数量    4、减少商品数量    5、计算购物总价源代码:&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;title&gt;shopping&lt;/title&gt;&lt...

宝塔面板node部署Vue项目失败,提示日志文件不存在

发布时间:2022-11-24 VUE.JS JAVASCRIPT 前端
本地调试vue项目没有出现问题,宝塔面板node部署Vue项目,如果把node_modules加进去的话,部署是没问题了,但是安装模块依赖时,如安装vant,vue-socket.io等依赖一直提示【安装指定模块失败】,我把node_modules文件删掉重新拉取时,直接启动报错,提示【日志文件不存在】。出现以上问题的原因是由于本地安装的node和服务器安装的node版本不同,我本地的node版本...

027实现可视化编程所需拖拽技术实现方案之vuedraggable

027实现可视化编程所需拖拽技术实现方案之vuedraggablevuedraggable目前Vue3中节点拖拽更适用的依赖包Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue2过渡动画兼容、支持撤销操作,是一款非常优秀的vue拖拽组件。特性支持触摸设备支持拖拽和选择文本支持...

vue多页应用打包(Vue-cli3)

发布时间:2022-11-14 VUE.JS VUE JAVASCRIPT 前端
修改vue.config.js,配置项增加pages(多页入口)module.exports={/*pages指定入口*/pages:{//首页index:{entry:'src/pages/index/main.js',template:'public/index.html',filename:'index.html',},//案例case:{entry:'src/pages/case/main...

diff算法原理 、 Vue、React区别

发布时间:2022-11-25 VUE.JS REACT.JS 前端框架
目录传统Diff算法React优化Diff算法Vue的Diff算法在了解Vue和React的区别之前,我们首先来了解一下MVC和MVVM架构,这个知识点有助于我们对后续知识的了解。一提到前端框架,相信大家都对Vue和React不陌生,这两个前端框架都是比较主流的,用户也都比较多,但是我们在使用这些框架的时候,是否对这两个框架之间的区别有所了解呢?接下来,让我们来一起的系统梳理这两个框架的区别是什么...

eachers 之柱状图(10分钟上手)

发布时间:2022-10-27 EACHERS 前端 ECHARTS
 1.main.jsimport*asechartsfrom"echarts";Vue.prototype.$echarts=echarts;//将echarts引入与到vue的原型中,方便使用&lt;template&gt;&lt;divclass="Echarts"&gt;&lt;divid="main"style="width:600px;height:400px"&gt;&lt;/div&...

Vue 后台管理分析(一图搞定)

发布时间:2022-11-14 VUE.JS VUE
  管理系统   项目搭建      1.NavMenu导航菜单      2.Breadcrumb面包屑   难点      登录         注册            手机号         记住号码      权限      Echarts      webpack      map   功能模块      主         增         删            子主题1  ...

小知识点记录

发布时间:2022-11-30 VUE.JS JAVASCRIPT 前端 JS
2022.11.23v-for倒叙遍历显示&lt;a-steps&gt;&lt;a-stepv-for="(j,index2)initem.allActs.slice().reverse()":key="index2"&gt;&lt;template#description&gt;&lt;div&gt;{{j}}&lt;/div&gt;&lt;/template&gt;&lt;/a-step&gt...

实现调用本地office打开在线文档功能

发布时间:2022-11-22 VUE JAVASCRIPT VUE.JS 前端 JS
一、需求阐述:项目中需要做一个文档管理功能,该功能包含最基础的上传、下载、删除等功能,但是额外需要实现点击文档列表链接,实现调用本地对应office打开对应类型文档的功能,现将该功能实现方案列出来,供大家参考。二、实现方案     1.通过给需要点击的对象添加点击方法,传入获取到的链接地址&lt;el-table-column:show-overflow-tooltip="true"label="...

基于SSM+Vue的农产品商城系统Java水果销售管理系统 生鲜商城系统(源码调试+讲解+文档)

发布时间:2022-09-20 JAVA项目 MYBATIS JAVA-EE MYSQL JAVA VUE.JS
💕💕作者:计算机源码社💕💕个人简介:本人七年开发经验,擅长Java、微信小程序、Python、Android等,大家有这一块的问题可以一起交流!💕💕学习资料、程序开发、技术解答、代码讲解、文档报告💕💕JavaWeb项目💕💕微信小程序项目💕💕Python项目💕💕Android项目1、绪论1.1项目背景  随着科技的发展,电子商务的崛起,让人们享受更加快捷的购物方式,通过网络平台,线上下单自己想要的商...

java计算机毕业设计springboot+vue网上购物商城系统

项目介绍在当今社会的高速发展过程中,产生的劳动力越来越大,提高人们的生活水平和质量,尤其计算机科技的进步,数据和信息以人兴化为本的目的,给人们提供优质的服务,其中网上购买商品尤其突出,使我们的购物方式发生巨大的改变。而线上购物,不仅需要在硬件上为人们提供服务网上购物,而且还可以省去许多时间去实体店选择商品,既可以吸引用户流量好,还可以购买商品,更要在软件上为需要服务的人提供必要的便利。于是网上商城...

Vue 利用Promise解决回调地狱

发布时间:2022-11-16 VUE.JS VUE JAVASCRIPT 前端
 最近在开发一个项目,需求是在保存前要依次调用多个接口判断是否合规,如果一个个then去嵌套,想想都可怕,后面查找了资料可以利用Promise解决,记录下解决方式。//封装第一个异步方法p1(arc1,arc2){returnnewPromise((resolve,rejects)=&gt;{//调用api接口api1(arc1,arc2).then((res)=&gt;{resolve(res)...

Dropdown 下拉菜单实现标签页的相关操作

发布时间:2022-11-18 VUE 3 JAVASCRIPT 前端 VUE.JS
Dropdown组件是向下弹窗列表。点击或移入触电,会出现一个下拉菜单,可以在列表中进行选择,并执行相应的命令。二次封装对外暴露参数&lt;scriptlang="ts"setup&gt;constprops=defineProps({//是否确认popconfirm:Boolean,//触发下拉的行为,默认鼠标右击触发trigger:{type:[Array]asPropType&lt;('co...

async和mixins混入(简介)

发布时间:2022-11-24 VUE.JS 新手专用 JAVASCRIPT 前端
谈一下我对.sync修饰符的理解.sync修饰符是vue组件双向数据绑定的语法糖,是emit和event组合的一种简写的形式vue组件规定不能修改props的外部数据(单向数据流),子组件数据发生变化,我们又需要通知父组件并传递修改后的值要让代码变得简单使用修饰符.sync或者v-modelval.sync是:val="v" @update:val="v=$event"的简写$event是用来解释...

自定义编写Vue的全局事件总线

自定义编写Vue的全局事件总线步骤1.在src里面新建一个文件价,名字自定义(Bus也可以,因为我就是Bus)2.这Bus这个文件夹里面在新建一个js文件,里面编写的全局事件总线的代码/***@import订阅池(储存用户订阅的方法)储存的规则(k==="string"v==="fun")*/varBusDev={};/***@import返回类型*/constseeType=obj=&gt;Ob...

Node及vue cli脚手架

发布时间:2022-07-08 ECMASCRIPT NPM JAVASCRIPT VUE.JS 前端
2.Node安装配置与介绍什么是Node或NodeJSnode是环境是一个javascript运行时环境,可以让js运行在服务端它的出现主要像java那样写服务端npm-随着node的安装自动安装的node类似ideanpm类似idea使用的maven工具NodePackageManager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准配置配置本地安装与全局安...

element ui - el-select 添加可输入功能

发布时间:2022-11-23 VUE.JS ELEMENTUI ELEMENT-UI
场景vue2+elementui的项目中,产品希望el-select可以支持输入功能,也就说用户既可以下拉选择,也可以输入任意内容。思路通过阅读elementui的官方文档,发现allow-create这个属性就可以支持用户创建新条目,但美中不足的是,创建新条目后还需要手动选择点击一下,否则无效。这个效果不太理想,我们希望的是当手动输入内容时,el-select可以充当el-input使用,也就是...

element ui 合并相同数据单元格

发布时间:2022-11-16 VUE.JS ELEMENTUI
这个方法特别牛,只需要修改一下data &lt;el-table:span-method="(...arg)=&gt;strategySpanMethod(...arg,restable1.body)"size="mini"id="hz_table"size="mini":data="restable1.body"height="500"....&lt;/el-table&gt;js部分直接复制粘...

echarts呀

发布时间:2018-06-05 ECHARTS
一、echarts.js的优势与总体情况echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点1、echarts.js容易使用echarts.js的官方文档比较详细,而且官网中提供大量的使用示例供大家使用2、echarts.js支持按需求打包echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到...

ECharts的特点有哪些_前端培训

发布时间:2022-11-02 JAVASCRIPT 前端 ECHARTS
ECharts包含了以下特性:1、丰富的可视化类型:提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于BI的漏斗图,仪表盘,并且支持图与图之间的混搭。2、多种数据格式无需转换直接使用:内置的dataset属性(4.0+)支持直接传入包括二维表,key-va...

ssm教务系统网站毕业设计源码290915

发布时间:2022-08-29 IDEA HTML MYSQL JAVA VUE.JS
ssm 教务系统网站摘 要随着互联网趋势的到来,各行各业都在考虑利用互联网将自己推广出去,最好方式就是建立自己的互联网系统,并对其进行维护和管理。在现实运用中,应用软件的工作规则和开发步骤,采用Java技术建设教务系统网站。本设计主要实现集人性化、高效率、便捷等优点于一身的教务系统网站,完成首页、轮播图、公告栏、管理员、论坛列表、论坛分类列表、课程资讯、课程资讯分类、学生用户、教师用户、课程信息、...

Vue3 + ts setup中的ref()、reactive() 函数

发布时间:2022-11-24 VUE3 VUE.JS
setup中的ref()函数用作于创建响应式数据(数组、对象例外)reactive()函数用作于数组、对象&lt;scriptlang="ts"&gt;setup(){ constname=ref('我是被定义name') constnameList=reactive(['哪吒','三太子']) return{name,nameList};}&lt;/script&gt;...

Vue3 + ts 国际化更改语言配置

发布时间:2022-11-24 VUE3 VUE.JS JAVASCRIPT 前端
mian.ts中安装i18n依赖import{createLanguage}from"vue-i18n";consti18n=createLanguage({locale:"zh-CN",//默认显示的语言messages,});createApp(App) .use(i18n)在页面中使用&lt;template&gt; &lt;div&gt; &lt;div@click="changeLan...

vue中使用懒加载

发布时间:2022-11-17 VUE.JS VUE JAVASCRIPT 前端
vue中使用懒加载(1)懒加载使用的图片,你要事先准备好:src\common\image目录下:default.jpgdefault.png懒加载使用的图片的目的:当你页面中的素材图片没有显示出来的时候,先让懒加载的图片显示出来。(2)在你的vue项目中,下载vue-lazyloadcnpm install vue-lazyload --save-dev然后,到你的配置文件package.jso...

vue element el-select下拉滚动加载

发布时间:2022-11-25 VUE.JS JAVASCRIPT VUE 前端
使用vue+element的el-select下拉框加载返回数据太多时,会造成卡顿,用户体验欠佳,记录一个滚动加载的方法:1、挂载一个全局的方法(main.js)://滚动加载更多Vue.directive('loadMore',{bind(el,binding){//获取element,定义scrollletselect_dom=el.querySelector('.el-select-drop...

打乱 json 数组内的数据顺序

发布时间:2022-11-16 JAVASCRIPT VUE.JS 前端 JSON
场景:较适合后台返回的是所有数据前端自己做分页功能如果分页功能是后台做的那么乱序就要考虑分页了原理:循环遍历该数组,在每次遍历中产生一个0~length-1的数,该数代表本次循环要随机交换的位置。将本次循环当前位置的数和随机位置的数进行交换。json数据格式: 代码://乱序//this.selectedData是接口返回的json数据upsetOrder(){letarr=deepCopy(th...

vue 疑问

发布时间:2022-11-25 VUE.JS
1,相同的一个js文件导入了两次,那么他们相等吗?回答:相等。疑问:这样的结果,我没想通,plug与plug1即便是相同的文件,但是,也是导入了两次啊,每一次执行都是获取对象myPlugin,两次的myPlugin怎么会相等呢,这不是相当于定义了两次吗?就像varp1={install:function(){}},varp2={install:function(){}},p1==p2吗?false...

关于Vue

发布时间:2022-11-22 VUE.JS 前端 前端框架
一、vue特点1、组件化。实现了封装和重用,且组件间可以相互嵌套;2、轻量级。相对于其他框架,Vue学习成本低,简单易上手;3、虚拟DOM。虚拟dom中存在diff算法,是cpu密集型运算,占用内存较少,可以提高运行效率,并压缩运行时体积;4、Vue是一个MVVM框架,数据绑定。        单向绑定(v-bind),单向指data中的值绑定到视图中,但视图中修改不会影响到data数据;    ...

echarts 柱状图滚动

发布时间:2022-11-23 JAVASCRIPT 前端 ECHARTS
实现效果:柱形图展示水平滚动条,并且鼠标滚动支持让滚动条平移echarts文档里,图形的滚动条分两种内置型(效果是:鼠标在图中点击拖动平移,在图中滚动缩放)滚动条型(效果是:鼠标拖动滚动条平移,鼠标拖大缩小滚动条缩放)而我们要实现的就是综合了这两种。。既要内置型的能在图中滚动,又要滚动条的样式实现代码constzoomData=[//有滚动条平移{type:'slider',realtime:tr...

vue3 extends的使用

发布时间:2022-11-24 JAVASCRIPT VUE.JS VUE组件 前端
此处使用extends继承element-plus中的elCascader组件,并改写options里的数据&lt;template&gt;&lt;el-cascaderv-bind="{...$props,...$attrs}":options="state.options"&gt;&lt;/el-cascader&gt;&lt;/template&gt;&lt;script&gt;import...

科大讯飞前端一面(8.26)、二面(9.6)、HR面(9.21)

发布时间:2022-09-21 JAVASCRIPT VUE.JS 前端
科大讯飞一面(8.26)一面一个面试官忘了问的啥了,反正都是老八股,想起来再补充然后聊了研究方向,深度学习为什么不搞深度学习来搞前端?一面面完,9月1号约了二面科大讯飞二面(9.6)一如既往的自我介绍因为我用nodejs调用了MongooDB实现的服务端所以,面试官问我怎么创建MongooDB?然后如何连接,MongooDB如何创表,怎么使用?描述一下整个流程?然后让我描述一下vue中的方法?(我...

Element ui中table分页时多选缓存

发布时间:2022-11-15 ELEMENTUI
首先在el-table中绑定row-key,并且设置ref属性&lt;el-tableref="DeviceTable"v-loading="loading":data="list":row-key="getRowKeys"@selection-change="handleSelectionChange"&gt;然后在选择项的一列绑定reserve-selection=“true”&lt;el-t...