移动端简易的table表格

最新推荐文章于 2024-10-09 21:48:33 发布

晏金煜

最新推荐文章于 2024-10-09 21:48:33 发布

阅读量2.8k

点赞数

分类专栏： vue table 文章标签： html css javascript vue.js

本文链接：https://blog.csdn.net/qq_36423639/article/details/121286871

版权

本文介绍了如何在移动端使用Vue.js创建一个简易的表格组件，并在1.1版本中添加了合计功能。通过示例代码展示了table.vue和index.vue中的关键实现，帮助开发者理解如何在HTML、CSS和JavaScript中构建响应式的表格应用。

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

效果图

先上代码

table 组件中的代码 table.vue

<template>
  <div>
    <div :style="tableStyle" v-scrollX="this">
      <div>
        <div class="thead">
          <div v-for="(item,index) in columns" :key="item+index" :style="styleObject(item,1)" >
            <div :style="{...styleObject(item,2),'left':left+'px',background:'white'}" >
              <div>{
  {item.lable}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tbody" :style="tbodyStyle" v-if="dataList.length>0" @scroll="handleBodyScroll" >
        <div v-for="(item,index) in data" :key="item+index" class="tbody-item" :style="{'borderBottom':border?'1px solid #dcdee0':'none'}" >
          <div v-for="(items,indexs) in columns" :key="items+indexs" :style="styleObject(items,1)" >
            <div :style="{...styleObject(items,2),'left':left+'px',background:'white'}" >
              <div v-if="!items.render">{
  {item[items.key]}}</div>
              <render-template v-if="items.render" :render="items.render" :row="item" :index="index" :colu