datav中使用dv-scroll-ranking-board组件获取接口动态赋值,空数据展示优化

效果图

1,安装datav

cnpm i --save @jiaminghi/data-view

2.全局引入
main.js

import dataV from '@jiaminghi/data-view'
Vue.use(dataV)

3,使用

<dv-scroll-ranking-board ref="scrollBoard" :config="config" style="width:500px;height:500px;"/>
export default {
  data() {
    return {
      config:{
        data: [],
      },
    };
  },
  methods: {
  	//调接口取值
    getList(){
      this.$axios.get('xxxxx').then(data =>{
        if (data.data.code == 200) {
          var result = data.data.result;
          result.map(v =>{
            let keymap = {
              organizationName: "name",
              count: 'value'
            }
            Object.keys(v).map(k => {
              let newKey = keymap[k]
              if (newKey) {
                v[newKey] = v[k]
                delete v[k]
              }
            })
          })
          this.config.data = result;
          this.config = { ...this.config };//关键,展开数组对象重新赋值.不写数据出不来
        }
      })
    )
  },
  mounted() {
    this.getList()
  },
}

到这步就可以实现调接口动态赋值了
注意:
1.如果你的接口返回值的对象的key是name和value,可以去掉以下代码:

result.map(v =>{
  let keymap = {
    organizationName: "name",
    count: 'value'
  }
  Object.keys(v).map(k => {
    let newKey = keymap[k]
    if (newKey) {
      v[newKey] = v[k]
      delete v[k]
    }
  })
})

这段代码就是将返回值的对象的key换改成name和value,
如果用其他的key来赋值的话,可以数据出不来,至于为什么,我也不知道,有知道可以说说.
2,数据全为空数据

默认这条粗的蓝色会占满整格,容易误导.可以换成以下样式

改下样式就可以了,将最初值改为0,有数据不影响效果,没数据就是上面的样子.

// 初始值(宽度)设置为0
/deep/.inside-column{
  width: 0%;
} 

3.如果页面上始终要显示前三条,而接口只返回一条或者两条,
可以收动写个空数据push进接口返回的数值对象中

nullData: [
 	{name:'暂无', value: 0},
    {name:'暂无', value: 0},
    {name:'暂无', value: 0},
]
//只有一条数据,截两个空数据进去
if(result.length == 1) result = [...this.nullData.slice(0,2),...result]
//只有两条数据,截一个空数据进去
if(result.length == 2) result = [...this.nullData.slice(0,1),...result]

📢没了，结束了，是不是很简单呐，如有问题，欢迎留言。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~