【vue】基于ElementUI封装了一个自定义Table组件

【代码背景】

最近写了10+表，上线以后时不时要改需求，一旦改动就是10+的工作量，所以决定把表格抽离出来单独写个组件，方便以后复用修改，这应该是写过最复杂的组件封装了，特此记录，小白一枚，接触vue也没多久，欢迎大家学习交流哦。

开发环境：vue + element ui

【准备工作】

封装组件的目的是方便复用，也就是多个地方引用相同或相似的组件功能，所以在封装之前一定要弄清楚，针对目前的Table需要封装哪些功能，有哪些共性可以抽离出来。这部分的思考非常重要，是影响组件封装质量的重要权衡点，所以多花一点时间是非常有必要的。

针对目前所有的表进行了分析，从样式上大致可分为4个部分：

->1. 序号列，每张表都有。

->2. 单位列，每张表都有，但是字段值label标签是变化的，label会根据后续查询操作进行更改，比如用户点击“险种”后，这里的label会从“单位”变成“险种”。

->3. 查询操作，这个字段是抽取共性最难的部分，几乎没有相似的地方，每张表的查询操作都不太一样，且各自查询逻辑也不一样。

->4. 其他字段渲染，有单层/多层表头之分。

相对应的解决办法如下：

->1. 序号列通过el-table可以自动完成渲染。

<el-table-column label="序号" type="index" align="center" fixed />

->2. 在渲染可变字段的时候，可以通过props传入变量。

<!-- 单位/可变字段 -->
<el-table-column
    :label="changeable.label"
    :prop="changeable.prop"
    align="center"
    fixed
    sortable
    :sort-by="changeable.sort"
    :min-width="flexColumnWidth(changeable.label,changeable.prop)"
/>

->3. 针对这个变化最多的字段，之前也考虑过用循环的方式把查询按钮渲染出来，尝试写过固定格式，然后添加条件判断渲染，但是无法达到预期的效果，后来在查找资料的时候突然看到了“插槽”的概念，具体可以参考这篇文章：https://vue-js.com/topic/5f6d68f24590fe0031e591f5 ，瞬间解决了这个问题。把个性化的部分抽出来作为“插槽”部分完美和组件结合使用。

<!--  子组件  -->
<!-- 查询操作 使用template插槽进行自定义组装 -->
<slot name="child" />

<!--  父组件 -->
<!-- 自定义具名插槽 -->
<template v-slot:child>
    <el-table-column label="查询操作" align="center" width="130px" fixed>
        <template slot-scope="scope">
            <!-- 按机构下挖 -->
            <el-tooltip
                v-if="scope.row.sale_no === ''"
                class="item"
                effect="dark"
                :content="scope.row.branch_no.endsWith('00')?'按机构查询':'按业务员查询'"
                placement="top"
                :enterable="false"
            >
                <el-button
                  type="success"
                  size="mini"
                  class="btn-column-query"
                  @click="digByType(scope.row,'机构')"
                >{{ scope.row.branch_no.endsWith('00')?'机构':'业务员' }}
                </el-button>
            </el-tooltip>
            <!-- 按险种下挖 -->
            <el-tooltip
                v-if="queryInfo.select_poltype==='0'"
                class="item"
                effect="dark"
                content="按险种查询"
                placement="top"
                :enterable="false"
            >
              <el-button
                  type="warning"
                  size="mini"
                  class="btn-column-query"
                  @click="digByType(scope.row,'险种')"
              >险种
              </el-button>
            </el-tooltip>
        </template>
    </el-table-column>
</template>

->4. 通过v-for循环渲染表头数据 

    <!-- v-for 循环渲染表头 -->
    <template v-for="item in headerData">
      <!-- 多层表头 -->
      <el-table-column
        v-if="item.children && item.children.length"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        align="center"
      >
        <el-table-column
          v-for="obj in item.children"
          :key="obj.prop"
          :label="obj.label"
          :prop="obj.prop"
          align="center"
          sortable
          :formatter="handleFormatter"
          :min-width="flexColumnWidth(obj.label,obj.prop)"
        />
      </el-table-column>
      <!-- 单层表头 -->
      <el-table-column
        v-else
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        align="center"
        :fixed="item.fixed"
        sortable
        :formatter="handleFormatter"
        :min-width="flexColumnWidth(item.label,item.prop)"
      />
    </template>

【完整代码】 

子组件 ReportTabel.vue

<template>
  <!-- 报表模板 -->
  <el-table
    ref="tableRef"
    v-loading="loading"
    :data="tableData"
    border
    stripe
    :header-cell-style="MyHeaderCellStyle"
    :cell-style="MyCellStyle"
    show-summary
    :summary-method="accountSummaries"
    :height="TableHeight"
    style="margin-top: 0px"
  >
    <el-table-column label="序号" type="index" align="center" fixed />
    <!-- 单位/可变字段 -->
    <el-table-column
      :label="changeable.label"
      :prop="changeable.prop"
      align="center"
      fixed
      sortable
      :sort-by="changeable.sort"
      :min-width="flexColumnWidth(changeable.label,changeable.prop)"
    />
    <!-- 查询操作 使用template插槽进行自定义组装 -->
    <slot name="child" />
    <!-- v-for 循环渲染表头 -->
    <template v-for="item in headerData">
      <!-- 多层表头 -->
      <el-table-column
        v-if="item.children && item.children.length"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        align="center"
      >
        <el-table-column
          v-for="obj in item.children"
          :key="obj.prop"
          :label="obj.label"
          :prop="obj.prop"
          align="center"
          sortable
          :formatter="handleFormatter"
          :min-width="flexColumnWidth(obj.label,obj.prop)"
        />
      </el-table-column>
      <!-- 单层表头 -->
      <el-table-column
        v-else
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        align="center"
        :fixed="item.fixed"
        sortable
        :formatter="handleFormatter"
        :min-width="flexColumnWidth(item.label,item.prop)"
      />
    </template>
  </el-table>
</template>

<script>
  export default {
    name: 'Index',
    props: {
      // 表头数据
      headerData: {
        type: Array,
        default: () => [],
        require: true
      },
      // 表头可变字段：单位/业务员/....
      changeable: {
        type: Object,
        default: () => {
          return {
            label: '单位',
            prop: 'branch_name',
            sort: 'branch_no'
          }
        }
      },
      // 表格数据
      tableData: {
        type: Array,
        default: () => [],
        require: true
      },
      // 自定义合计
      accountSummaries: {
        type: Function,
        default: () => {
          return null
        }
      },
      // 控制数据刷新
      loading: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        TableHeight: 550 // 默认表格高度
      }
    },
    watch: {
      // tableData是el-table绑定的数据
      tableData: {
        // 解决表格显示错位问题
        handler () {
          this.$nextTick(() => {
            // tableRef是el-table绑定的ref属性值
            this.$refs.tableRef.doLayout() // 对 Table 进行重新布局
          })
        },
        deep: true
      }
    },
    created () {
      // 动态计算表格高度
      const windowHeight = document.documentElement.clientHeight || document.bodyclientHeight
      this.TableHeight = windowHeight - 150 // 数值"140"根据需要调整
    },
    methods: {
      /**
       * 遍历列的所有内容，获取最宽一列的宽度
       * @param arr
       */
      getMaxLength (arr) {
        return arr.reduce((acc, item) => {
          if (item) {
            const calcLen = this.getTextWidth(item)
            if (acc < calcLen) {
              acc = calcLen
            }
          }
          return acc
        }, 0)
      },
      /**
       * 使用span标签包裹内容，然后计算span的宽度 width： px
       * @param valArr
       */
      getTextWidth (str) {
        let width = 0
        const html = document.createElement('span')
        html.innerText = str
        html.className = 'getTextWidth'
        document.querySelector('body').appendChild(html)
        width = document.querySelector('.getTextWidth').offsetWidth
        document.querySelector('.getTextWidth').remove()
        return width
      },
      /**
       * el-table-column 自适应列宽
       * @param prop_label: 表名
       * @param table_data: 表格数据
       */
      flexColumnWidth (label, prop) {
        // console.log('label', label)
        // console.log('prop', prop)
        // console.log(this.tableData)
        // 1.获取该列的所有数据
        const arr = this.tableData.map(x => x[prop])
        arr.push(label) // 把每列的表头也加进去算
        // console.log(arr)
        // 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
        return (this.getMaxLength(arr) + 25) + 'px'
      },
      // 格式化字段 string->number 用于排序
      handleFormatter (row, column, cellValue, index) {
        // console.log('row', row)
        // console.log('column', column)
        // console.log('cellValue', cellValue)
        // console.log('index', index)
        row[column.property] = Number(row[column.property])
        return row[column.property]
      },
      // [表头]设置样式
      MyHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
        // console.log('column', column.property)
        let style = null
        this.headerData.forEach(item => {
          if (item.prop === column.property) {
            style = item.header_style
          }
          // 存在子节点
          if (item.children && item.children.length) {
            for (let i = 0; i < item.children.length; i++) {
              if (item.children[i].prop === column.property) {
                style = item.header_child_style
              }
            }
          }
        })
        return style
      },
      // [表格]设置样式
      MyCellStyle ({ row, column, rowIndex, columnIndex }) {
        // console.log(column)
        let style = null
        this.headerData.forEach(item => {
          if (item.prop === column.property) {
            style = item.cell_style
          }
          // 存在子节点
          if (item.children && item.children.length) {
            for (let i = 0; i < item.children.length; i++) {
              if (item.children[i].prop === column.property) {
                style = item.cell_style
              }
            }
          }
        })
        return style
      }
    }
  }
</script>

<style scoped>
  .el-table /deep/ th {
    padding: 0;
    white-space: nowrap;
    min-width: fit-content;
  }

  .el-table /deep/ td {
    padding: 1px;
    white-space: nowrap;
    width: fit-content;
  }

  /** 修改el-card默认paddingL:20px-内边距 **/
  >>> .el-card__body {
    padding: 10px;
  }

  .el-table /deep/ .cell {
    white-space: nowrap;
    width: fit-content;
  }
</style>

父组件引用组件

// 引入组件
import ReportTable from '@/components/ReportTable'

<template>
  <!--报表数据-->
      <report-table
        :header-data="headerData"
        :changeable="changeable"
        :table-data="tableData"
        :account-summaries="accountSummaries2"
        :loading="loading"
      >
        <!-- 自定义具名插槽 -->
        <template v-slot:child>
          <el-table-column label="查询操作" align="center" width="130px" fixed>
            <template slot-scope="scope">
              <!-- 按机构下挖 -->
              <el-tooltip
                v-if="scope.row.sale_no === ''"
                class="item"
                effect="dark"
                :content="scope.row.branch_no.endsWith('00')?'按机构查询':'按业务员查询'"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="success"
                  size="mini"
                  class="btn-column-query"
                  @click="digByType(scope.row,'机构')"
                >{{ scope.row.branch_no.endsWith('00')?'机构':'业务员' }}
                </el-button>
              </el-tooltip>
              <!-- 按险种下挖 -->
              <el-tooltip
                v-if="queryInfo.select_poltype==='0'"
                class="item"
                effect="dark"
                content="按险种查询"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="warning"
                  size="mini"
                  class="btn-column-query"
                  @click="digByType(scope.row,'险种')"
                >险种
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </template>
      </report-table>
</template>

<script>
  // 引入组件
  import ReportTable from '@/components/ReportTable'

  // 表格头数据
  const tableHeaderData = [
    {
      label: '保费合计',
      prop: 'sum_amnt',
      fixed: true,
      header_style: 'background-color: #FFCCCC;color: #333;',
      cell_style: 'background-color: #FFE6E5'
    },
    {
      label: '大个险',
      prop: 'gx',
      children: [
        { label: '首年保费', prop: 'gx_snbf' },
        { label: '首年标保', prop: 'gx_snbb' },
        { label: '首年期交', prop: 'gx_snqj' },
        { label: '10年及以上期交', prop: 'gx_10qj' },
        { label: '保障型保费', prop: 'gx_bzxbf' },
        { label: '续期保费', prop: 'gx_xqbf' },
        { label: '短险保费', prop: 'gx_dxbf' }
      ],
      header_style: 'background-color: #CCCCFF;color: #333;font-size: 14px',
      header_child_style: 'background-color: #CCCCFF;color: #333;',
      cell_style: 'background-color: #DBD9FF'
    },
    {
      label: '银保',
      prop: 'yb',
      children: [
        { label: '首年保费', prop: 'yb_snbf' },
        { label: '首年标保', prop: 'yb_snbb' },
        { label: '首年期交', prop: 'yb_snqj' },
        { label: '保障型保费', prop: 'yb_bzxbf' },
        { label: '续期保费', prop: 'yb_xqbf' },
        { label: '短险保费', prop: 'yb_dxbf' }
      ],
      header_style: 'background-color: #FFCC99;color: #333;font-size: 14px',
      header_child_style: 'background-color: #FFCC99;color: #333;',
      cell_style: 'background-color: #FFE4AB'
    },
    {
      label: '团险',
      prop: 'tx',
      children: [
        { label: '首年保费', prop: 'tx_snbf' },
        { label: '首年期交', prop: 'tx_snqj' },
        { label: '续期保费', prop: 'tx_xqbf' },
        { label: '短险保费', prop: 'tx_dxbf' }
      ],
      header_style: 'background-color: #CCFFCC;color: #333;font-size: 14px',
      header_child_style: 'background-color: #CCFFCC;color: #333;',
      cell_style: 'background-color: #E4FFD9'
    }
  ]

  export default {
    name: 'Index',
    components: { // 组件注册
      'report-table': ReportTable
    },
    data () {
      return {
        headerData: tableHeaderData, // 表头数据
        tableData: [], // 表格数据
        tableTotal: [], // 表格合计数组
        changeable: { // 可变字段：单位/业务员/险种
          label: '单位',
          prop: 'branch_name',
          sort: 'branch_no'
        },
        loading: false,
        queryInfo: {} // 表格的查询条件
      }
    },
    created () {
      this.checkReportData() // 渲染表格
    },
    methods: {
      // 渲染表格数据
      checkReportData () {
          this.loading = true
          checkReport01tb1(this.queryInfo).then(res => {
            if (res.data === null) {
              this.$message.info('当前查询结果为空')
              this.tableData = [] // 清空当前列表
              this.tableTotal = [] // 清空合计数组
            } else {
              this.handleChangeable(res.data.body[0]) // 处理可变字段
              this.tableData = res.data.body // 渲染表格数据
              this.tableTotal = res.data.total[0] // 渲染表格合计数据
            }
            this.loading = false
          })
      },
      // 按类型下挖
      digByType (rowInfo, type) {
        // 根据type 修改queryInfo 查询不同的返回结果
        this.checkReportData()
      },
      // 根据list结果渲染changeable字段
      handleChangeable (rowData) {
        if (rowData.branch_no !== '' && rowData.branch_name !== '') {
          this.changeable = {
            label: '单位',
            prop: 'branch_name',
            sort: 'branch_no'
          }
        }
        if (rowData.sale_no !== '' && rowData.sale_name !== '') {
          this.changeable = {
            label: '业务员',
            prop: 'sale_name',
            sort: 'sale_no'
          }
        }
        if (rowData.pol_code !== '' && rowData.pol_name !== '') {
          this.changeable = {
            label: '险种名称',
            prop: 'pol_name',
            sort: 'pol_code'
          }
        }
      },
      // 自定义合计（后台获取total数据)
      accountSummaries2 (param) {
        // console.log('param', param)
        const { columns } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          if (index === 1 || index === 2) {
            sums[index] = '-'
            return
          }
          // 如果查询结果为空
          if (this.tableTotal.length === 0) {
            sums[index] = '0'
          } else {
            sums[index] = this.tableTotal[column.property]
          }
        })
        return sums
      }
    }
  }
</script>

 【几点说明】

 （1）在渲染表头数据时把当前表头和单元格的样式也加进去了 

 <el-table>的表头跟单元格的样式是通过header-cell-style和cell-style实现的，具体请参考Element - The world's most popular Vue UI framework

 

双层的表头为了区别字号大小所以写了2个style，实际上只需要header_style和cell_style就行了

（2） 在渲染单层/多层表头的时候，这里只写了针对两层的情况，如果需要渲染三层及以上可以参考之前写过的一个demo：【vue】基于ElementUI实现动态表格_爱吃香草冰淇淋的阿喵的博客-CSDN博客_vue动态表格

 （3）flexColumnWidth是为了自适应表格列宽，关于这个可以参考上一篇文：【vue】ElementUI el-table自适应列宽实现_爱吃香草冰淇淋的阿喵的博客-CSDN博客_vue表格宽度自适应

【参考】
https://vue-js.com/topic/5f6d68f24590fe0031e591f5