美文网首页
多表格，多表头

多表格，多表头

作者: Biao_349d | 来源:发表于2020-02-12 18:26 被阅读0次
  1. 3分钟教你如何在Word里快速制作单斜线和多斜线表头
  2. php处理excel过长表格
  3. 三个懒人必用的懒人小技巧，新手请拿好
  4. HTML表格-13
  5. html5表格标签
  6. 教你如何在Word里快速制作单斜线和多斜线表头
  7. 表格实现
  8. 2-12. 表格标签中的其他标签
  9. html-表格
  10. element table 固定部分二级表头

    11. bem.js

    /*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-23 17:20:11
 * @LastEditTime : 2020-02-02 19:22:15
 * @LastEditors  : Please set LastEditors
 */
/**
 * bem helper
 * b() // 'button'
 * b('text') // 'button__text'
 * b({ disabled }) // 'button button--disabled'
 * b('text', { disabled }) // 'button__text button__text--disabled'
 * b(['disabled', 'primary']) // 'button button--disabled button--primary'
 */
const ELEMENT = '__'
const MODS = '--'

const join = (name, el, symbol) =>
  el ? (name ? name + symbol + el : el) : name

const prefix = (name, mods) => {
  if (typeof mods === 'string') {
    return join(name, mods, MODS)
  }

  if (Array.isArray(mods)) {
    return mods.map(item => prefix(name, item))
  }

  const ret = {}
  Object.keys(mods).forEach(key => {
    ret[name + MODS + key] = mods[key]
  })
  return ret
}

export default {
  methods: {
    b(el, mods) {
      const { name } = this.$options

      if (el && typeof el !== 'string') {
        mods = el
        el = ''
      }
      el = join(name, el, ELEMENT)

      return mods ? [el, prefix(el, mods)] : el
    }
  }
}

    more-table.vue

    <!--
 * @Author: your name
 * @Date: 2020-02-02 21:42:27
 * @LastEditTime : 2020-02-08 10:25:59
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \whyqh5\src\components\hd.vue
 -->
<template>
  <div :class="b('wrapper', ['wrapper'])">
    <table cellpadding="0" cellspacing="0" border="1">
      <tbody :class="b('wrapper', ['wrapper--th'])">
        <tr
          v-for="(item, index) in theadColumns"
          :key="index"
          :class="b('wrapper', ['wrapper--tr'])" class="clearfix"
          :colspan="getMax((item || []), 'colspan') || 1"
          :rowspan="getMax((item || []), 'rowspan') || 1"
        >
          <td
            v-for="(item2, index2) in item || []"
            :key="index2"
            :class="b('wrapper', ['wrapper--tr--td'])"
            v-bind="{
              ...(item2.bind || {})
            }"
          >
            <div :class="b('wrapper', ['wrapper--tr--td--context'])">
              {{ item2.name }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
     <table
      v-for="(column, columnIndex) in columns"
      :key="columnIndex"
      cellpadding="0" cellspacing="0" border="1"
    >
       <tbody :class="b('wrapper', ['wrapper--tb'])">
        <tr
          v-for="(item, index) in column"
          :key="index"
          :class="b('wrapper', ['wrapper--tr'])" class="clearfix"
          :colspan="getMax((item || []), 'colspan') || 1"
          :rowspan="getMax((item || []), 'rowspan') || 1"
        >
          <td
            v-for="(item2, index2) in item || []"
            v-show="((data[columnIndex] || [])[index] || {})[item[index2].key]"
            :key="index2"
            :class="b('wrapper', ['wrapper--tr--td'])"
            v-bind="{
              ...(item2.bind || {})
            }"
          >
            <div :class="b('wrapper', ['wrapper--tr--td--context'])">
              {{filterZero((( data[columnIndex] || [])[index] || {})[item[index2].key]) }}
            </div>
          </td>
        </tr>
      </tbody>
     </table>
    </div>
</template>
<script>
  export default {
    name: 'CommonMoreTable',
    props: {
      columns: {
        type: Array,
        default: () => {
          return [
            []  // 这里按照tbodyColumns的数据填
          ]
        }
      },
      theadColumns: {
        type: Array,
        default: () => {
          return []
          // [
          //   [
          //     {
          //       name: '类别',
          //       key: 'name1',
          //       bind: {
          //         rowspan: '2',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       name: '品名',
          //       key: 'name2',
          //       bind: {
          //         rowspan: '2',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       name: '未来需求量',
          //       key: 'name3',
          //       bind: {
          //         colspan: "3",
          //         rowspan: "1",
          //         width: '40%',
          //         dataShow: false
          //       }
          //     },
          //     {
          //       name: '单位',
          //       key: 'name4',
          //       bind: {
          //         rowspan: '2',
          //         width: '20%',
          //       }
          //     }
          //   ],
          //   [
          //     {
          //       name: '未来7天',
          //       key: 'name5',
          //       bind: {
          //         rowspan: '1',
          //       }
          //     },
          //     {
          //       name: '未来15天',
          //       key: 'name6',
          //       bind: {
          //         rowspan: '1',
          //       }
          //     },
          //     {
          //       name: '未来30天',
          //       key: 'name7',
          //       bind: {
          //         rowspan: '1',
          //       }
          //     }
          //   ]
          // ]
        }
      },
      tbodyColumns: {
        type: Array,
        default: () => {
          return []
          // [
          //   [
          //     {
          //       key: 'name1',
          //       bind: {
          //         rowspan: '4',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name2',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name4',
          //       bind: {
          //         colspan: "1",
          //         rowspan: "1",
          //         width: '10%',
          //       }
          //     },
          //     {
          //       key: 'name5',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.4%',
          //       }
          //     },
          //     {
          //       key: 'name6',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.4%',
          //       }
          //     },
          //     {
          //       key: 'name7',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     }
          //   ],
          //   [
          //     {
          //       key: 'name1',
          //       bind: {
          //         rowspan: '4',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name2',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name4',
          //       bind: {
          //         colspan: "1",
          //         rowspan: "1",
          //         width: '13.33%',
          //       }
          //     },
          //     {
          //       key: 'name5',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.33%',
          //       }
          //     },
          //     {
          //       key: 'name6',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.34%',
          //       }
          //     },
          //     {
          //       key: 'name7',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     }
          //   ],
          //   [
          //     {
          //       key: 'name1',
          //       bind: {
          //         rowspan: '4',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name2',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name4',
          //       bind: {
          //         colspan: "1",
          //         rowspan: "1",
          //         width: '13.33%',
          //       }
          //     },
          //     {
          //       key: 'name5',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.33%',
          //       }
          //     },
          //     {
          //       key: 'name6',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.34%',
          //       }
          //     },
          //     {
          //       key: 'name7',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     }
          //   ],
          //   [
          //     {
          //       key: 'name1',
          //       bind: {
          //         rowspan: '4',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name2',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     },
          //     {
          //       key: 'name4',
          //       bind: {
          //         colspan: "1",
          //         rowspan: "1",
          //         width: '13.33%',
          //       }
          //     },
          //     {
          //       key: 'name5',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.33%',
          //       }
          //     },
          //     {
          //       key: 'name6',
          //       bind: {
          //         rowspan: '1',
          //         width: '13.34%',
          //       }
          //     },
          //     {
          //       key: 'name7',
          //       bind: {
          //         rowspan: '1',
          //         width: '20%',
          //       }
          //     }
          //   ],
          // ]
        }
      },
      data: {
        type: Array,
        default: () => {
          return [
            []  // 按照下面的数据放
          ]
          // [
          //   {
          //     name1: '防护',
          //     name2: '外科口罩',
          //     name4: '861',
          //     name5: '1845万',
          //     name6: '3690万',
          //     name7: '万个'
          //   },
          //   {
          //     // name1: '防护',
          //     name2: '医用防护口罩',
          //     name4: '105',
          //     name5: '210',
          //     name6: '420',
          //     name7: '万个'
          //   },
          //   {
          //     // name1: '防护',
          //     name2: '医用防护服',
          //     name4: '530',
          //     name5: '105',
          //     name6: '210',
          //     name7: '万个'
          //   },
          //   {
          //     // name1: '防护',
          //     name2: '医用目镜/医用隔离眼罩',
          //     name4: '7000',
          //     name5: '120000',
          //     name6: '120000',
          //     name7: '套'
          //   }
          // ]
        }
      },
      border: {
        type: Boolean,
        default: false
      },
      tableStyle: {
        type: Object,
        default: () => {
          return {}
        }
      },
    },
    // computed: {
    //   isShowTd(columnIndex, index, index2, item) {
    //     const val = ((this.data[columnIndex] || [])[index] || {})[item[index2].key]
    //     if (typeof val === 'number') {
    //       return '' + val
    //     }
    //     return val
    //   }
    // },
    filters: {
      filterZero(val) {
        if (typeof val === 'number') {
          return '' + val
        }
        return val
      }
    },
    methods: {
      getMax(arr, name) {
        return (arr.reduce(function (pre, curv) {
            return pre[name] < curv[name] ? curv : pre;
        }).bind || {})[name]
      },
      filterZero(val) {
        if (typeof val === 'number') {
          return '' + val
        }
        return val
      }
    }
  }
</script>
<style lang="less">
.CommonMoreTable{
  &__wrapper{
    &--wrapper{
      table, caption, tbody, tfoot, thead, tr, th, td{
        // border: 1px solid #000;
      }
      table{
        display: table;
        width: 100%;
        border-color: #E6E6E6;
        border: none;
        box-sizing: border-box;
        TABLE-LAYOUT: fixed;
        WORD-BREAK: break-all;
        &:not(:first-child){
          border-top: 0;
        }
      }
      tbody{
        border-color: #E6E6E6;
        display: table;
        width: 100%;
        border: none;
        box-sizing: border-box;
        TABLE-LAYOUT: fixed;
        WORD-BREAK: break-all;
      }
      &--th{
        background:rgba(253,248,248,1);
        // overflow: hidden;
        // display: block;
        display: table;
        width: 100%;
        .CommonMoreTable__wrapper--wrapper--tr{
          &--td{
            font-size:12px;
            font-family:PingFangSC-Light,PingFang SC;
            font-weight:300;
            color:rgba(208,2,27,1);
            line-height:20px;
            padding: 8px 0px;
            &--context{
              display: inline;
              word-break:break-all;
              word-wrap:break-word;
              font-size:12px;
              box-sizing: border-box;
              color:rgba(208,2,27,1);
            }
          }
        }
        // &:after{
        //   content: "";
        //   width:374px;
        //   height:1px;
        //   background:rgba(255,236,239,1);
        //   display: block;
        // }
      }
      &--tb{
      }
      &--tr{
        // padding: 3px 0;
        //   display: flex;
        //   justify-content: center; /* 水平居中 */
        //   align-items: center;     /* 垂直居中 */
        border: none;
        box-sizing: border-box;
        &--td{
          padding: 8px 3px;
          text-align: left;
          box-sizing: border-box;
          text-align:center; /** 设置水平方向居中 */
          vertical-align:middle; /** 设置垂直方向居中 */
          border-color: #E6E6E6;
          &:first-child{
            // padding-left: 14px;
          }
          &--context{
            display: inline;
            word-break:break-all;
            word-wrap:break-word;
            font-size:12px;
            box-sizing: border-box;
            color: #666666;
          }
        }
      }
      &--tr&--tr--border{
          //  border-bottom: 1px solid #E1E1E1;
        &:not(:last-child){
          // margin-top: 3px;
          //  border-bottom: 1px solid #E1E1E1;
        }
      }
    }
  }
}
</style>

    调用方法

    <template>
  <div>
    <CommonMoreTable :theadColumns="theadColumns" :columns="columns2" :data="data2"></CommonMoreTable>
  </div>
</template>
<script>
  import CommonMoreTable from '@/components/more-table/_base';
import { mapState, mapActions } from 'vuex';
  const keyObj = {
    key1: 'category',
    key2: 'productName',
    key3: 'name3',
    key4: 'next7Days',
    key5: 'next15Days',
    key6: 'next30Days',
    key7: 'unit',
  }
  const columnsObj = {
    key1: {
      key: keyObj.key1,
      bind: {
        rowspan: '4',
        width: '15%',
      }
    },
    key2: {
      key: keyObj.key2,
      bind: {
        rowspan: '1',
        width: '20%',
      }
    },
    key4: {
      key: keyObj.key4,
      bind: {
        colspan: "1",
        rowspan: "1",
        width: '18.3%',
      }
    },
    key5: {
      key: keyObj.key5,
      bind: {
        rowspan: '1',
        width: '18.3%',
      }
    },
    key6: {
      key: keyObj.key6,
      bind: {
        rowspan: '1',
        width: '18.3%',
      }
    },
    key7:{
      key: keyObj.key7,
      bind: {
        rowspan: '1',
        width: '10%',
      }
    }
  }
  export default {
    components: {
      CommonMoreTable
    },
    data() {
      return {
        theadColumns: [
            [
              {
                name: '类别',
                key: keyObj.key1,
                bind: {
                  rowspan: '2',
                  width: '15%',
                }
              },
              {
                name: '品名',
                key: keyObj.key2,
                bind: {
                  rowspan: '2',
                  width: '20%',
                }
              },
              {
                name: '未来需求量',
                key: keyObj.key3,
                bind: {
                  colspan: "3",
                  rowspan: "1",
                  width: '55%',
                }
              },
              {
                name: '单位',
                key: keyObj.key7,
                bind: {
                  rowspan: '2',
                  width: '10%',
                }
              }
            ],
            [
              {
                name: '未来7天',
                key: keyObj.key4,
                bind: {
                  rowspan: '1',
                  width: '18.3%',
                }
              },
              {
                name: '未来15天',
                key: keyObj.key5,
                bind: {
                  rowspan: '1',
                  width: '18.3%',
                }
              },
              {
                name: '未来30天',
                key: keyObj.key6,
                bind: {
                  rowspan: '1',
                  width: '18.3%',
                }
              }
            ]
          ],
    protectKeyMaterials: [
            {
                "category":"分类一",
                "next15Days":"111",
                "next30Days":"222",
                "next7Days":"333",
                "productName":"A",
                "unit":"万个"
            },
            {
                "category":"分类一",
                "next15Days":"210",
                "next30Days":"420",
                "next7Days":"105",
                "productName":"B",
                "unit":"万个"
            },
            {
                "category":"分类一",
                "next15Days":"105",
                "next30Days":"210",
                "next7Days":"53",
                "productName":"c",
                "unit":"万套"
            },
            {
                "category":"分类一",
                "next15Days":"120000",
                "next30Days":"120000",
                "next7Days":"70000",
                "productName":"d",
                "unit":"副"
            },
            {
                "category":"分类2",
                "next15Days":"22500",
                "next30Days":"45000",
                "next7Days":"10500",
                "productName":"A",
                "unit":"箱"
            },
            {
                "category":"分类2",
                "next15Days":"225000",
                "next30Days":"450000",
                "next7Days":"105000",
                "productName":"B",
                "unit":"瓶"
            },
            {
                "category":"分类2",
                "next15Days":"225000",
                "next30Days":"450000",
                "next7Days":"105000",
                "productName":"C",
                "unit":"台"
            },
            {
                "category":"分类3",
                "next15Days":"600",
                "next30Days":"600",
                "next7Days":"600",
                "productName":"A",
                "unit":"台"
            },
        ]

      }
    },
    computed: {
      columns2() {
        return this.data2.map(item => {
          return (item || []).map((item2, index) => {
            const arr = []
            if (index  == 0) {
              arr.push(
                {
                  ...columnsObj.key1,
                  bind: {
                    ...columnsObj.key1.bind,
                    rowspan: item.length
                  }
                }
              )
            }
            return [
              ...arr,
              ...[
                columnsObj.key2,
                columnsObj.key4,
                columnsObj.key5,
                columnsObj.key6,
                columnsObj.key7,
              ]
            ]
          })
        })
      },
      data2() {
        const obj = {}
        this.protectKeyMaterials.forEach(item => {
          // category
          if (Object.keys(obj).indexOf(item[keyObj.key1]) === -1) {
            obj[item[keyObj.key1]] = []
            obj[item[keyObj.key1]].push(item)
          } else {
            obj[item[keyObj.key1]].push(item)
          }
        })
        return Object.values(obj)
      }
    },
    created() {
      this.getProtectKeyMaterials()
    },
    mounted() {
    },
    methods: {
      ...mapActions(['getProtectKeyMaterials'])
    }
  }
</script>
    image.png

    相关文章

    表格 格式： 表格标签： ————定义表格 ———— 定义表格标题。 ———— 定义表格的表头。 ———— ...

  11. 教你如何在Word里快速制作单斜线和多斜线表头

    Word表格里面斜线表头应该如何制作呢？你是否还不知道呢？不用担心今天教大家如何在表格里面快速制作单斜线和多斜线表...

  12. 表格实现

    相关基础知识 表格标记 表头标记 表行标记 表元标记 设置跨行、跨列 中跨多行 跨多列 中跨...

  13. 2-12. 表格标签中的其他标签

    | | 定义表格 || | 定义表格标题。 || | 定义表格的表头。 || | 定义表格的行。 ...

  14. html-表格

    15. 表格标签 ： 表格框架 ： 表格头部 ： 表格主体 ：表头- - -加粗居中 ：行 ：列...

  15. element table 固定部分二级表头

    项目用vue+element开发,需求如下:表格为二级表头,一级表头下有多个二级表头,需要固定部分二级表头列在表格...

    16. 网友评论

        本文标题：多表格，多表头

        本文链接：https://www.haomeiwen.com/subject/lcbcfhtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        关于我们|服务条款|联系我们|多表格，多表头|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！