vue用递归嵌套表格实现复杂报表

秦羽 2020-06-15 AM 867℃ 0条

有时候需要实现一些复杂的报表，用合并单元格的方式实现比较复杂，可以使用嵌套表格的方式实现。

- 效果

![dfsDemo.png](https://www.qinyu.cc/usr/uploads/2020/06/2817780288.png)

- 代码

```html
<template>
  <div class="comp-dfs-table">
    <table cellspacing="0" cellpadding="0">
      <tr v-for="i in row" :key="'position' + i">
        <td v-for="j in column" :key="'position' + i + j">
          <comp-d-f-s-table
            v-if="i === 1 && j === 1 && deep < 2"
            :deep="deep + 1"
          ></comp-d-f-s-table>
          <span v-else>111(deep:{{ deep }})</span>
        </td>
        <td>222(deep:{{ deep }})</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: "CompDFSTable",
  props: {
    // 深度
    deep: {
      type: Number,
      default: 0
    },
    // 行数
    row: {
      type: Number,
      default: 2
    },
    // 列数
    column: {
      type: Number,
      default: 2
    }
  }
};
</script>
<style scoped>
table {
  border-left: 1px solid black;
  border-top: 1px solid black;
}
tr {
  min-height: 20px;
}
td {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  /* padding: 5px; */
  min-width: 50px;
}
table table {
  border-top: none;
  border-left: none;
}
table table tr:last-child > td {
  border-bottom: none;
}
table table td:last-child {
  border-right: none;
}
</style>

```

标签: vue, 递归组件, 报表, 表格

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://www.qinyu.cc/archives/45.html

上一篇问卷喵问卷调查系统部署教程

下一篇 table中的td里面的div设置height100%无效的问题

vue用递归嵌套表格实现复杂报表

评论啦~

栏目分类

标签云

友情链接申请

vue用递归嵌套表格实现复杂报表

 评论啦~

 栏目分类

标签云

友情链接申请

评论啦~

栏目分类

标签云

友情链接申请