table中嵌套多层table

最新推荐文章于 2024-05-23 14:16:23 发布

波塞冬次打次

最新推荐文章于 2024-05-23 14:16:23 发布

阅读量1.3k

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_44683763/article/details/107682577

版权

笔记专栏收录该内容

88 篇文章 1 订阅

订阅专栏

具体思路

<!DOCTYPE html>
 
<html>
<head>
<meta charset="UTF-8">
<title>Vue-Table-Demo </title>
<!--1.引入VUE.JS ---->
<script src="./vue.min.js"></script>
<style type="text/css">
   * {margin: 0;padding: 0;}
body {
   padding: 20px;
}
table {
   width: 100%;
   border-collapse: collapse;
   text-align: center;
}
table th,td {
   border: 1px solid #999;
}
.table2 tr td:nth-child(1) {
   border-left: 0;
}
.table2 tr td:nth-last-child(1) {
   border-right: 0;
}
.table2 tr:nth-child(1) td{
   border-top: 0;
}
.table2 tr:nth-last-child(1) td {
   border-bottom: 0;
}
.w200 {
   width: 200px;
}
</style>
</head>
<body>
   <div id="app-8">
      <table id="table1">
         <tr>
            <th>序号</th>
            <th>派工单号</th>
            <th>派工日期</th>
            <th class="w200">本单费用小计</th>
            <th class="w200">路径</th>
            <th class="w200">公里数</th>
            <th class="w200">数量</th>
            <th class="w200">费用</th>
            <th class="w200">费用名称</th>
            <th class="w200">金额</th>
            <th class="w200">备注</th>
         </tr>
         <tr v-for="(item,i) in table1">
            <td>{{i+1}}</td>
            <td>{{item.order}}</td>
            <td>{{item.date}}</td>
            <td>{{item.total}}</td>
            <td colspan="7">
               <table class="table2" style="min-width: 600px">
                  <tr v-for="(par, j) in item.table2">
                     <td class="w200">{{par.path}}</td>
                     <td class="w200">{{par.mileage}}</td>
                     <td class="w200">{{par.num}}</td>
                     <td class="w200">{{par.fee}}</td>
                     <td>
                        <table class="table3" style="min-width: 600px">
                           <tr v-for="val in par.table3">
                              <td class="w200">{{val.feeType}}</td>
                              <td class="w200">{{val.monye}}</td>
                              <td class="w200">{{val.remarks}}</td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </div>
</body>
</html>
<script type="text/javascript">
//vm.data这里data从后端读取
   new Vue({
      el:"#table1",
      data:{
         table1:[{
            order: "ASPG20190428",
            date: "2019-04-28",
            total: "1200",
            table2: [{
               path: '上海—北京',
               mileage: '1000km',
               num: '6',
               fee: '1000',
               table3: [{
                  feeType: '油费',
                  monye: '300',
                  remarks:'备注',
               },{
                  feeType: '住宿费',
                  monye: '200',
                  remarks:'备注',
               },{
                  feeType: '路桥费',
                  monye: '500',
                  remarks:'备注',
               }] 
            },{
               path: '北京—天津',
               mileage: '200km',
               num: '0',
               fee: '200',
               table3: [{
                  feeType: '油费',
                  monye: '100',
                  remarks:'备注',
               },{
                  feeType: '路桥费',
                  monye: '100',
                  remarks:'备注',
               }]  
            }]
         }]
      }
   })
</script>

在这里插入图片描述

波塞冬次打次

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
table中嵌套多层table

具体思路<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Vue-Table-Demo </title><script src="./vue.min.js"></script><style type="text/css"> * {margin: 0;padding
复制链接

扫一扫