Vue实现用户自定义字段显示数据的方法

如下：

代码：

  
  
  
  
  
    .middle::-webkit-scrollbar {height:8px;}
    
    .middle::-webkit-scrollbar-track {border-radius: 10px;}
    
    .middle::-webkit-scrollbar-thumb {background: #ccc;}
    * {margin: 0;padding: 0;box-sizing:border-box;font-family: "微软雅黑";}
    #tabPanel{width:1100px;height:300px;margin:100px auto;}
    .left{float:left;height:300px;width:300px;font-size:0;}
    .left .item,.right .item,.middle .item{display:inline-block;width:100px;}
    .left .item span,.middle .item span,.left .item span{display:block;height:50px;text-align:center;line-height:50px;font-size:14px;border:1px solid #eee;}
    .right .item{width:200px;height:50px;line-height:50px;text-align:center;border:1px solid #eee;}
    .right .item span{display:inline-block;border:none;color:blue;text-decoration: underline;cursor:pointer;}
    .middle{float:left;height:300px;width:300px;font-size:0;overflow-x:scroll;overflow-y:hidden;}
    .right{float:left;height:300px;width:200px;}
    #tabPanel .chooseItem {padding:10px 0;}
    #tabPanel .chooseItem label{padding:0 10px;}
  
  




  
    
      体重
      兴趣
      学校
      所属地区
      所属年级
      数学
      语文
      英语
    
    
      
 编号
 {{item.id}}
      
      
 姓别
 {{item.sex}}
      
      
 身高
 {{item.hight}}
      
    
    
      
 
   体重
   {{item.weight}}
 
 
   兴趣
   {{item.inter}}
 
 
   学校
   {{item.schoold}}
 
 
   所属地区
   {{item.district}}
 
 
   所属年级
   {{item.class}}
 
 
   数学
   {{item.math}}
 
 
   语文
   {{item.chinese}}
 
 
   英语
   {{item.english}}
 
      
    
    
      
 操作
      
      
 查看
 删除
 修改
 冻结
      
    
  

以上这篇Vue实现用户自定义字段显示数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。