在vue项目中引用datav dv-scroll-board

目录

npm 安装

 main.js 引用

按需引入 

 页面数据展示

---

 

 

 

npm 安装

npm install @jiaminghi/data-view

 main.js 引用

import DataV from '@jiaminghi/data-view'

Vue.use(DataV)

按需引入 

import { borderBox1 } from '@jiaminghi/data-view'
Vue.use(borderBox1)

 页面数据展示

<template>
    <div>
       
        <div>
            <span>表格</span>
            <dv-scroll-board
                @click="tablehandle2"
                :config="config3"
                style="width: 100%; height: 155px"
            />
        </div>
    </div>
</template>

<script>
const scolldata = [
    ["<span style='cursor:pointer'>测试数据1</span>", 231],
    ["<span style='cursor:pointer'>陈叔叔家</span>", 732],
    ["<span style='cursor:pointer'>长沙市</span>", 1033],
    ["<span style='cursor:pointer'>除上述局4</span>", 2034],
    ["<span style='cursor:pointer'>出生时句5</span>", 3035],
    ["<span style='cursor:pointer'>传输数据6</span>", 4036],
];
export default {
    name: "comecharts",
    components: {
        commBar,
    },
    data() {
        return {
         config3: {
                indexHeader: "序号",
                oddRowBGC: "#FFF", // 奇数行背景色
                evenRowBGC: "#f5f5f5", // 偶数行背景色
                headerBGC: "#eb5a6d", // 表头背景色
                header: ["单位名称", "本月督办次数"],
                rowNum: 3, // 表行数
                headerHeight: 40,
                columnWidth: [270],
                waitTime: 2000, // 轮播时间间隔(ms)
                align: ["center", "center"],
                data: scolldata,
            },
        };
    },
    methods: {
        tablehandle2(rows) {
            console.log(rows);
            if (rows.ceil.indexOf("span") != -1) {
                let rowsdata = [];
                for (let i = 0; i < scolldata.length; i++) {
                    if (i == rows.rowIndex) {
                        let obj = {};
                        obj.departid = scolldata[rows.rowIndex];
                        rowsdata.push(obj);
                    }
                }
                console.log(rowsdata);
            }
        },
    },
};
</script>

 
<style lang="scss"  >
.dv-scroll-board {
    color: #333;
    .header-item {
        font-size: 1em;
        text-align: center;
        white-space: nowrap;
        color: #fff !important;
    }
    .rows {
        .row-item {
            text-align: center;
            line-height: 2rem;
            span {
                color: #2b97f2;
            }
            .ceil {
                color: #3c3f52;
                font-size: 1em;
                i {
                    font-size: 0.5em;
                }
            }
            .ceil:nth-child(2) {
                color: #eb5a6d !important;
                font-size: 1.1em;
                width: 25%;
            }
        }
    }
}
</style>