Ant Design Vue表格使用:columns绑定数据

2020-06-19  本文已影响0人  小小_128

我在表格中引用控件<a-rate defaultValue="userStar" disabled></a-rate>发现星星评分渲染错误，分页也是使用的默认的，但是第一页的数据一直遍历两次才会遍历第二页的数据

star.png

表格在组件data中定义列及绑定数据显示不正确

columns: [
        {
          title: '是否评论',
          customRender: function(text){
            console.log('text',text.userStar)
            if(text.userStar == null){
                return '否'
            } else {
                return '是'
            }
          }
        },
        {
          title: '五星评论',
          width: 200,
          dataIndex: 'userStar',
          scopedSlots: { customRender: 'userStar' }
        }
      ]

发现text打印不正确，于是乎就进行了一顿操作，由于没有想到好方法所以用了一个笨方法可算实现了

wrong.jpg

{
          title: '五星评论',
          width: 200,
            customRender: function (text) {
              if(text.hasLoad){return;}
                text.hasLoad = true;
                let star = text.userStar === null ? 0 : parseInt(text.userStar);
                switch(star) {
                    case 0:
                        return  <a-rate defaultValue="0" disabled></a-rate>;
                        break;
                    case 1:
                        return  <a-rate defaultValue="1" disabled></a-rate>;
                        break;
                    case 2:
                        return  <a-rate defaultValue="2" disabled></a-rate>;
                        break;
                    case 3:
                        return  <a-rate defaultValue="3" disabled></a-rate>;
                        break;
                    case 4:
                        return  <a-rate defaultValue="5" disabled></a-rate>;
                        break;
                    default:
                        return  <a-rate defaultValue="5" disabled></a-rate>;
                }
            }
        },

虽然现在效果实现了但是我还是有疑问为什么会遍历两遍第一页的数据呢？ 欢迎有想法的小伙伴或者遇到过类似问题的小伙伴指点指点吖！！我们互相学习一起进步哟~