UI components DataV | round figure

Ps: After two months of internship, I suddenly felt that I was stuck in the same place. It was time to make some changes. Let’s start with dome in the first chapter.

Two days ago, WHEN I was working on a data visualization project, I came across a cast table. I had written one myself, but my master said that it would be automatically rolled, so I recommended using DataV components.

Requirement: a table content automatically scrolling round table

1. Procedures for using DataV:

  • Step 1: Read before using DataV!!

Ps: This step is very important!! (I didn’t read it carefully, which led to problems later)

  • Step 2 Installation
CD datav-project // Access the directoryCopy the code
NPM add@jiaminghi /data-view // Install using NPM or YARN. Either of the two options is yarn add@jiaminghi /data-viewCopy the code
  • Step 3 Register
Import dataV from '@jiaminghi/data-view' vue.use (dataV)Copy the code

– Step 4 Import on demand

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)
Copy the code

You can then use the modules you need within that component

2. Practical application

First determine the component model to use:

Template uses the tag:

<div class="body">
  <dv-scroll-board :config="config" style="width: 362px; margin: 16px 8px 0 8px;" />
</div>
Copy the code

Class in data

Data () {return {config: {header: [' unit project name ', 'task name', 'location coding], data: [],}}}Copy the code

Request interface data in Methods via AXIOS and assign values

Method: { render(){ axios.post("url",{parmas}).then(({data}) => { this.$nextTick(() =>{ data.warningDTOList.forEach(item => { const arr = []; if(item.parentProjectName ! = null){ arr.push(item.parentProjectName,item.wbsName,item.wbsFullNo) this.config.data.push(arr) this.config ={ ... }})})}) {this.config.data = this.config.data = this.config.data;}}Copy the code

In Mounted

mounted(){
  this.render();
}
Copy the code

Finally adjust the style:

data(){ return{ config:{ header: [' unit project name ', 'task name ',' position code '], data:[], headerBGC:' RGBA (221, 234, 255, 0.16)', // oderbBGC :' Rgba (221, 234, 255), .2)', // evenRowBGC:' rGBA (221, 234, 255,.06)', // evenRowBGC:' rROWBGC (221, 234, 255,.06)', // evenRowBGC:' rROWBGC (221, 234, 255,.06)', // evenRowBGC:' 38' //Copy the code

End result: