vux table表格

<x-table :full-bordered="false"          :content-bordered="true"          :cell-bordered="false"          style="background-color:#fff;"          v-for='(item,index) in tableList'         >   <thead>   <tr>     <th class="TLeft">       <div class="font1">{{item.titles}}</div>       <div class="font2">{{item.dateTime}}</div>     </th>     <th class="TCenter">         <div></div>     </th>     <th class="TRight">       <div class="font3" v-show='item.turnsOutAccount<0'>{{item.turnsOutAccount}}</div>       <div class="font4" v-show='item.turnsOutAccount>0'>{{item.turnsOutAccount}}</div>     </th>   </tr>   </thead> </x-table>

.font1 {   font: normal 600 12px/24px sans-serif; } .font2{   font: normal 500 12px/24px sans-serif;   color: #bfbfbf; } .font3{   font: normal 600 12px/24px sans-serif;   color: rgb(77, 172, 34); } .font4{   font: normal 600 12px/24px sans-serif;   color: rgb(239, 64, 47); } .TLeft {   text-align: left;   padding-left: 10px;   width: 40%; } .TCenter {   text-align: center;   width: 20% } .TRight {   text-align: right;   padding-right: 10px;   width: 40%; }

import {XTable} from 'vux'

data () {   return {     tableList:[       {titles:'BTC',dateTime:'2018.02.03 03:00:00',turnsOutAccount:'-2.000'},       {titles:'',dateTime:'2018.02.03 03:00:00',turnsOutAccount:'+2.000'}     ]   } },

文章来源: vux table表格