vue 用div制作含固定列的表格

最新推荐文章于 2024-07-23 14:50:26 发布

lx_1024

最新推荐文章于 2024-07-23 14:50:26 发布

阅读量5.1k

点赞数

分类专栏： vue 文章标签： vue 表格

本文链接：https://blog.csdn.net/lx_1024/article/details/78981255

版权

使用Vue和HTML/CSS创建了一个具有固定操作列的表格。通过div布局，实现了表格的功能，尤其强调了操作列的固定显示。文章重点介绍了核心代码实现。

摘要由CSDN通过智能技术生成

下面是用div做的一个含固定操作列的表格，引入了vue，下面是核心部分

html:

 <div class="table">
     <div class="tableBody">
            <div class="tabRow">
              <div v-for="item in tableHeadData" class="tabCol">{
  {item.name}}</div>
            </div>
            <div class="tabRow" v-for="item in tableBodyData">
              <div class="tabCol" v-for="tag in item.rows">{
  {tag.col}}</div>
            </div>
     </div>
     <div class="fixed">
            <div class="fixBtn"><b>操作</b></div>
            <div class="fixBtn" v-for="item in tableBodyData">
              <button  @click="deleteClick(item.id)">删除</button>
            </div