vue组件封装，简单的表格组件封装。组件插槽简单使用。Table 组件封装

电脑版发表于：2020/9/19 15:19

看到设计图上有一个类似的表格需要重复使用，就封装一个简单的表格组件，方便重复使用，很简单就是做数据展示，不进行编辑这。数据通过外面传递过去，然后里边循环生成行和列就行，然后加点样式，就是因为类似的样式要重复使用。

效果如下：
![](https://img.tnblog.net/arcimg/aojiancc2/d90de9f195164a07abd0b74096f51c34.png)

### 封装组件
代码很简单，表头想着通用一点就做了一个插槽，让外面传递过来，当然也可以做成传递数据在组件里边生成。然后行列的数据就是传递一串json，过来做一个双循环解析一下数据即可。

行的显示风格做成了组件的参数，居中或者左对齐等，可以根据需要多写几套样式，通过参数传递过来决定显示方式。表头的显示方式也写了两个样式，居中或者左对齐。代码如下，很简单。
```
<template>
    <div >
        <table class="zuxia_table">
            

            
            <slot name="zuxia_table_header"></slot>

            
            <tr v-for="(item, index) in rowdata" :key="index" class="content_tr" :class="row_style">
                <td v-for="(tditem,zindex) in item" :key="zindex">{{tditem}}</td>
            </tr>
        </table>
    </div>
  </template>
  
  <script>

  export default {
    // 组件名字
    name: 'ZuxiaTable',
    // 组件参数
    props: {
      percentage: {
        type: Number,
        default: 0
      },
      title: {
       type: String,
       default: '默认标题'
      },
      // 行的显示风格，居中或者左对齐等，可以根据需要多写几套样式   
      row_style: {
       type: String,
       default: 'content_tr_center'
      },
      rowdata: {
        type: Array,
        default: () => {
            return []
        },
        // required: true
      }
    },
    data() {
      return {
        // tr_type:"content_tr_center"
      }
    },
    components: {
    },
    mounted() {
    },
    beforeDestroy () {
    },
    methods: {
    }
  }
  </script>
  

<style lang="scss" scoped>


.zuxia_table{
   margin-top: 20px;
   width: 100%;
   border-collapse: collapse;

   .zuxia_table_header{
    background-color: rgba(13, 81, 137, 0.5);
    // opacity: 0.5;

    th{
      height: 13px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #23FFFC;
      line-height: 33px;
      padding-left: 10px;
    }
   }

   // 提供一个左对齐的样式，引用组件的时候可以直接用    
   .zuxia_table_header_left
   {
        text-align: left;
   }

   .content_tr{
    height: 41px;
    // background: #082044;
    background-color: rgba(8, 32, 68, 0.4);

      td{
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 33px;
        //   padding-left: 10px;
      }
   } 
   
    //----------- start 行风格-左对齐  --------------
    .content_tr_left{
      td{
          padding-left: 10px;
      }
   } 

    .content_tr_left>td:first-child{
      padding-left: 15px;
   }
   //----------- end 行风格-左对齐  --------------

   
   //----------- start 行风格-居中  --------------
   .content_tr_center{
      td{
          text-align: center;
      }
   } 

   .content_tr_center>td:first-child{
      padding-left: 15px;
    //   text-align: left;
   }
   //----------- end 行风格-居中  --------------

}

</style>
```

### 使用组件
先引用一下组件,以及提供一下测试的json数据
```
import ZuxiaGrid from '@/views/component/zuxia_grid.vue'
import ZuxiaTable from '@/views/component/zuxia_table.vue'
export default {
  components: {
      ZuxiaGrid,
      ZuxiaTable
  },
  data() {
    return {
      rowdata:[
          {
              name:"2022级计算机1班",
              class:"yy1",
              content:"xx",
              datetiem:'8-12 09:33:52',
              pro:"40%",
              zh:"50%",
              sort:"1"
          },
          {
              name:"2022级计算机1班",
              class:"yy2",
              content:"xx",
              datetiem:'8-15 09:33:52',
              pro:"40%",
              zh:"50%",
              sort:"3"
          },
          {
              name:"2022级计算机1班",
              class:"yy3",
              content:"xx",
              datetiem:'8-13 09:33:52',
              pro:"40%",
              zh:"50%",
              sort:"2"
          },
          {
              name:"2022级计算机1班",
              class:"yy2",
              content:"xx",
              datetiem:'8-15 09:33:52',
              pro:"40%",
              zh:"50%",
              sort:"3"
          },
          {
              name:"2022级计算机1班",
              class:"yy2",
              content:"xx",
              datetiem:'8-15 09:33:52',
              pro:"40%",
              zh:"60%",
              sort:"6"
          },
      ],
      newrowdata:[
          {
              name:"张三丰",
              class:"2022级计算机1班",
              content:"通过什么什么什么什么什么评估",
              datetiem:'8-15 09:33:52',
          },
          {
              name:"张三丰",
              class:"2022级计算机1班",
              content:"通过什么什么什么什么什么评估",
              datetiem:'8-15 09:33:52',
          },
          {
              name:"张三丰",
              class:"2022级计算机1班",
              content:"通过什么什么什么什么什么评估",
              datetiem:'8-15 09:33:52',
          },
          {
              name:"张三丰",
              class:"2022级计算机1班",
              content:"通过什么什么什么什么什么评估",
              datetiem:'8-15 09:33:52',
          },
          {
              name:"张三丰",
              class:"2022级计算机1班",
              content:"通过什么什么什么什么什么评估",
              datetiem:'8-15 09:33:52',
          }
      ]
  },
```
使用组件
```
<div class="bc_left_com">
  <ZuxiaGrid  style="height:100%">
    <template #content>
      <ZuxiaTable row_style="content_tr_left" :rowdata="rowdata">
        <template #zuxia_table_header>
          <tr class="zuxia_table_header zuxia_table_header_left">
              <th>班级名称</th>
              <th>班主任</th>
              <th>评估</th>
              <th>实验</th>
              <th>项目</th>
              <th>综合</th>
              <th>排名</th>
          </tr>
        </template>
      </ZuxiaTable>
    </template>
  </ZuxiaGrid>
</div>
<div class="bc_middle_com">
  <ZuxiaGrid title="最新使用记录" style="height:100%">
    <template #content>
      <ZuxiaTable row_style="content_tr_center" :rowdata="newrowdata">
        <template #zuxia_table_header>
          <tr class="zuxia_table_header">
            <th>姓名</th>
            <th>班级</th>
            <th>事件</th>
            <th>时间</th>
          </tr>
        </template>
      </ZuxiaTable>
    </template>
  </ZuxiaGrid>
</div>
```

效果如下：左边的表格表头与数据都是左对齐的，右边的表格表头与数据是居中的，如果需要其他风格的可以多提供几套样式，通过参数传递进去就行了。表头是通过插槽放进去的，不同的风格可以在外面写更简单

![](https://img.tnblog.net/arcimg/aojiancc2/d90de9f195164a07abd0b74096f51c34.png)

外面那块高亮格子的组件封装可以参考：https://www.tnblog.net/aojiancc2/article/details/7826

剑轩

vue组件封装，简单的表格组件封装。组件插槽简单使用。Table 组件封装

{{item.title}}