15、VUE Element table中遇到的问题

1,关于表格分页total的赋值

total一定要是数值类型,如果数据库返回的是字符串,使用Number(val)进行转换。

2,推荐某列赋值,通过scope.row进行赋值;而不是使用默认prop进行默认赋值,假设某列值需要转换。

【PS: 不要在取数返回后,通过循环的方式修改数据结构;浪费效率;如果修改用列表行的值(scope.row)对form表单赋值,数据格式下发的时候,你还需要再转回来。数据直接拿过来使用就行,如果不能直接使用,就通过以下的代码进行转换。】

使用场景: 选择图片大小,数据库存的值为width:200,height:150,列表显示格式为200*150




扩展,也可以写成方法进行调用




getSize为methods里面的方法

getSize(width, height) {
    return width + "*" + height;
}

PS:据小白自己目前的理解,Element并未提供获取行的索引,scope.$index可以取到。小白也不是很理解Element这块的设计,scope.row都给了,为什么不能在里面加上行的索引。如若有看到,还请留言答复,多谢!

3,表格某列显示状态 status,赋值为number类型,赋值失败。

解决办法:

第一种方法: :active-value=1 :inactive-value=0 直接写上数字;使用v-bind时,也可以这么写:active-value="1" :inactive-value="0"。

第二种方法:采用迂回战略,先给开关附上变量,变量的值是number类型,就可以正常选中了;

  
  

你可能感兴趣的:(15、VUE Element table中遇到的问题)