vue简单的表格刷新

极梦网络无忧
173 阅读1分钟 

/* Table Styles */
  .state0{
      color: #f70f0f;
  }
  .state1{
      color: #00c38d;
  }
  .state2{
      color: #fcfcfc;
  }
  .state3{
      color: #fcfcfc;
  }
.table-wrapper{
    margin: 10px 70px 70px;
    box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}

.fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    background-color: white;
}

.fl-table td, .fl-table th {
    text-align: center;
    padding: 8px;
}

.fl-table td {
    border-right: 1px solid #f8f8f8;
    font-size: 12px;
}
.fl-table-black  thead th{
      color: #ffffff;
    background: #324960;
}
.fl-table-green  thead th{
    color: #ffffff;
    background: #4FC3A1;
}
.fl-table tr:nth-child(even) {
    background: #F8F8F8;
}


  .fl-table tbody td img{
       width: 100px;
        text-align: center;
    }
        a  {
            -webkit-tap-highlight-color:rgba(255, 0, 0, 0)
        }
    .fl-table a{
          text-decoration:none;
        background:0 0;
        width: 50px;
         overflow:hidden;
        text-overflow:ellipsis;
    }
 
    
/*.fl-table thead th {*/
/*    color: #ffffff;*/
/*    background: #4FC3A1;*/
/*}*/


/*.fl-table thead th:nth-child(odd) {*/
/*    color: #ffffff;*/
/*    background: #324960;*/
/*}*/



/* Responsive */

@media (max-width: 767px) {
    .fl-table {
        display: block;
        width: 100%;
    }
    .table-wrapper:before{
        content: "Scroll horizontally >";
        display: block;
        text-align: right;
        font-size: 11px;
        color: white;
        padding: 0 0 10px;
    }
 
    .fl-table thead, .fl-table tbody, .fl-table thead th {
        display: block;
    }
    .fl-table thead th:last-child{
        border-bottom: none;
    }
    .fl-table thead {
        float: left;
    }
    .fl-table tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
    }
    .fl-table td, .fl-table th {
        padding: 20px .625em .625em .625em;
        height: 60px;
        vertical-align: middle;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        width: 120px;
        font-size: 13px;
        text-overflow: ellipsis;
    }
    .fl-table thead th {
        text-align: left;
        border-bottom: 1px solid #f7f7f9;
    }
    .fl-table tbody tr {
        display: table-cell;
    }
    .fl-table tbody tr:nth-child(odd) {
        background: none;
    }
    .fl-table tr:nth-child(even) {
        background: transparent;
    }
    .fl-table tr td:nth-child(odd) {
        background: #F8F8F8;
        border-right: 1px solid #E6E4E4;
    }
    .fl-table tr td:nth-child(even) {
        border-right: 1px solid #E6E4E4;
    }
    .fl-table tbody td {
        display: block;
        text-align: center;
    }
  }

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head> 
    <body>
      
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> 
	<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

<div class="table-wrapper" id="app">
    <table class="fl-table fl-table-black">
        <thead>
        <tr>
           <th  v-for="(value, key, index) in thead">
               
               <span v-if="value.type=='checkbox'"><input type="checkbox"> </span>
              <span v-else> {{value.tetle}} </span> 
           </th> 
        </tr>
        </thead>
        <tbody>
        <tr v-for="(list_data_value, list_data_key, list_data_index) in list_data">
             <td v-for="(value, key, index) in thead">
            
                    <div   v-for="(list_data_valuevalue, list_data_valuekey, list_data_valueindex) in list_data_value" v-if="list_data_valuekey == value.name ">
                        
                                <span v-if="value.type=='checkbox' ">  <input type="checkbox" :value="list_data_valuevalue">{{list_data_valuevalue}} </span>
                                <span v-else-if="value.type=='img' ">   	<img :src = "list_data_valuevalue"/> </span>
                                <span v-else-if="value.type=='hert' ">   <a :href="list_data_valuevalue">{{list_data_valuevalue}}</a> </span>
                                <span v-else-if="value.type=='state' " :class="'state'+list_data_valuevalue">   {{value.searchList[list_data_valuevalue]}}</a> </span>
                                  <span v-else> {{list_data_valuevalue}} </span> 
                         
                    
                   </div> 
            
           </td> 
            <!--<td><input type="checkbox"></td>-->
            <!--<td>普通文本</td>-->
            <!--<td><img src="https://www.runoob.com/try/demo_source/paris.jpg" > </td>-->
            <!--<td><a href="https://www.runoob.com">https://www.runoob.com</a></td>-->
            <!--<td>时间</td>-->
            <!--<td>状态</td>-->
            <!--<td>按键组</td>-->
        </tr>
         
        <tbody>
    </table>
    <input type="button" @click="post()" value="点我异步获取数据(Post)">
</div>
 
 
<script>
var app=new Vue({
  el: '#app',
  data: {
    pk: 'id',
    thead: [
      { name: 'id',tetle:"name",type:"checkbox" },
      { name: 'tetle',tetle:"tetle",type:"a" },
      { name: 'hert',tetle:"hert",type:"hert" },
      { name: 'img',tetle:"img",type:"img" },
      { name: 'state',tetle:"state",type:"state", searchList: {"1":"显示","0":"隐藏"} }
    ],
    list_data:[
                              { id: '1',tetle:"你",hert:"https://www.runoob.com",type:"checkbox",img:"https://www.runoob.com/try/demo_source/paris.jpg",state:1 },
                              { id: '2',tetle:"你",hert:"https://www.runoob.com",type:"a" ,img:"https://www.runoob.com/try/demo_source/paris.jpg",state:0 }, 
                              { id: '3',tetle:"你",hert:"https://www.runoob.com",type:"a",img:"https://www.runoob.com/try/demo_source/paris.jpg" ,state:1 }
                            ]
  } ,
	    methods:{
	        post:function(){
	            //发送 post 请求
	            this.$http.post('http://real.jmwl51.com/real-admin/html/q.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
	                this.list_data= [
                              { id: '4',tetle:"你",hert:"https://www.runoob.com",type:"checkbox",img:"https://www.runoob.com/try/demo_source/paris.jpg",state:1 },
                              { id: '5',tetle:"你",hert:"https://www.runoob.com",type:"a" ,img:"https://www.runoob.com/try/demo_source/paris.jpg",state:0 }, 
                              { id: '6',tetle:"你",hert:"https://www.runoob.com",type:"a",img:"https://www.runoob.com/try/demo_source/paris.jpg" ,state:1 }
                            ]
                    // document.write(res.body);  
                    //   console.log(res.body);
                },function(res){
                    console.log(res.status);
                });
	        },
	           get:function(){
	            
	            
	            //发送 post 请求
	            this.$http.post('http://real.jmwl51.com/real-admin/html/q.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
	                this.list_data= [
                              { id: '4',tetle:"你",hert:"https://www.runoob.com",type:"checkbox",img:"https://www.runoob.com/try/demo_source/paris.jpg",state:1 },
                              { id: '5',tetle:"你",hert:"https://www.runoob.com",type:"a" ,img:"https://www.runoob.com/try/demo_source/paris.jpg",state:0 }, 
                              { id: '6',tetle:"你",hert:"https://www.runoob.com",type:"a",img:"https://www.runoob.com/try/demo_source/paris.jpg" ,state:1 }
                            ]
                    // document.write(res.body);  
                    //   console.log(res.body);
                },function(res){
                    console.log(res.status);
                });
	        }
	    }
})
//这是我们预留的分页和搜索用的
// app.post();
    // 全选、反选
    //删除、全删
    //添加
    //修改
    //分页
    //查询
    
    // 表初始化
    //   extend: {
    //                 index_url: 'article/index',
    //                 add_url: 'article/add',
    //                 edit_url: 'article/edit',
    //                 del_url: 'article/del',
    //                 multi_url: 'article/multi',
    //                 table: 'article',
    //             }
   
    //      ajax
    //      生成分页
    //      生成表格(特殊字段、排序)
    //      生成搜索 
    //      生成快捷按钮
</script>
<script>



          

    
</script>
    </body>
</html>
avatar
文章
阅读
粉丝