今天做轮播排名,发现了很好用的插件DataV,代码非常简单,在页面中直接引用标签,直接在data里面写数据就就行了。下面是基本用法。
官网链接:DataV.

第一步:我们先安装DataV

npm install @jiaminghi/data-view

第二步:在main.js里面全局注册DataV

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

第三步:就可以在页面里使用啦

demo1

在这里插入图片描述
我这里做了一个排名轮播表,代码如下:

//1.在template里面像div那样写标签就好(具体标签请参考DataV官网)
<dv-scroll-ranking-board :config="ranking" style="height: 100%" />
...
//在data里面写数据
 ranking: {
        data: [
          {
            name: "虹口区",
            value: 55,
          },
          {
            name: "奉贤区",
            value: 120,
          },
          {
            name: "浦东新区",
            value: 78,
          },
          {
            name: "宝山区",
            value: 66,
          },
          {
            name: "徐汇区",
            value: 40,
          },
          {
            name: "金山区",
            value: 60,
          },
          {
            name: "长宁区",
            value: 88,
          },
          {
            name: "普陀区",
            value: 45,
          },
          {
            name: "闵行区",
            value: 39,
          },
          {
            name: "静安区",
            value: 82,
          },
          {
            name: "嘉定区",
            value: 58,
          },
          {
            name: "青浦区",
            value: 94,
          },
          {
            name: "松江区",
            value: 40,
          },
          {
            name: "杨浦区",
            value: 80,
          },
        ],
        carousel: "single",
        unit: "次",
      },

这样就好了,是不是非常简单。

demo2

我还做了一个列表的向上自动轮播列表,代码如下:
在这里插入图片描述

//1.template里面的标签
 <dv-scroll-board  :config="config1"  style="width: 100%;"  />
//2.data里面的数据
 config1: {
        header: ["组织名称", "组织编号", "组织联系方式"],
        data: [
          ["张三慈善会", "2233111", "13797646522"],
          ["李四互助会", "2233112", "13766258223"],
          ["王五慈善会", "2233113", "13781519821"],
          ["飞蝗慈善会", "2255156", "18915123112"],
          ["飞度", "2255623", "18911231212"],
          ["雷诺机构", "2233111", "18632456985"],
          ["并艾车友会", "1155631", "18123121232"],
          ["成群网络会", "1100352", "18121212301"],
          ["毒友交流会", "1252120", "16896656562"],
          ["Scaner交流会", "1212512", "15366568456"],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#00baff", //表头
        // oddRowBGC: "#0f1325", //奇数行
        // evenRowBGC: "#171c33", //偶数行
        index: true,
        columnWidth: [50],
        align: ["center"],
      },

DataV官网还有很多组件,非常简单实用,官网链接: DataV.

Logo

前往低代码交流专区

更多推荐