Vue自定义组件

一、自定义组件

<template>
  <div style="margin-bottom: 30px">
    <b class="table-title">【{{titleName}}】xxxx统计</b>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        align="center"
        prop="total"
        label="合计"
        width="120">
      </el-table-column>
      <el-table-column
        :render-header="renderHeader"
        v-for="item in dataList"
        :index="parseInt(item.areaCode)"
        align="center"
        :prop="item.areaCode"
        :label="item.areaName"
        :width="columnWidth">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "CountTable",
    #   props为组件中定义的参数，后续页面调用时需要传递过来的参数
    props: ['titleName','tableData', 'dataList', 'loading'],
    methods: {
      // 自定义表头
      renderHeader(h, {column}){
        let _this = this;
        return h('div',[
          h('span', {
            domProps:{
              innerHTML:column.label
            },
            style:{
              color: '#17895D',
              cursor: 'pointer',
            },
            on: {
              click: function () {
                _this.$emit('clickItem', column);
              }
            }
          })
        ]);
      },
      /** 底部滑动框计算 */
      columnWidth() {
        if (this.dataList.length > 10) {
          return '150';
        } else {
          return 'auto';
        }
      }
    }
  }
</script>

<style>
  .table-title {
    text-align: center;
    line-height: 50px;
    display: block;
    font-size: 24px;
    padding: 15px;
  }
</style>

二、使用组件

1、在需要调用的页面引入组件

import CountTable from "../../../xxxx/CountTable";

2、在需要调用的页面注册组件

components: {CountTable}

3、使用组件

<count-table :title-name="allData[0].titleName" :table-data="allData[0].tableData"
:data-list="allData[0].dataList"></count-table>