vue 组件化开发（二）带有复杂表头以及可编辑表格的开发

最新推荐文章于 2025-06-13 11:55:29 发布

渔倒到

最新推荐文章于 2025-06-13 11:55:29 发布

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 全家桶文章标签： vue组件化开发复杂表头可编辑表格

本文链接：https://blog.youkuaiyun.com/weixin_38500689/article/details/99681453

本文介绍了使用Vue进行组件化开发，重点探讨如何实现带有复杂表头和可编辑功能的表格。通过拆分成主组件及三个子组件——drop-title、AutoTtips和headerCheck，实现了灵活的表格展示和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似效果看图

可展开，可编辑基数，自动计算单位及个人缴费情况

主组件：

<template>
  <div class="edit-table">
    <drop-title
      :unitPaymentNum="unitPaymentNum"
      :personPaymentNum="personPaymentNum"
      :readOnly="readOnly"
      :titleName="titleName"
      :showTable="showTable"
      @setTableVisible="handleShowTable"
      @setBase="setBaseNumber"
    ></drop-title>
    <transition name="el-fade-in-linear">
      <el-row v-if="showTable">
        <el-col>
          <el-table class="el-my-table" :data="tableData" style="width: 100%" stripe>
            <el-table-column prop="have" align="center" v-if="!readOnly" width="100" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.have"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="险种" width="150"></el-table-column>
            <el-table-column prop="unitBase" label="单位缴费">
              <el-table-column label="基数">
                <template slot-scope="scope">
                  <i
                    v-if="!readOnly"
                    class="el-icon-caret-top"
                    @mouseenter="handleMouseenter($event, scope, 'unit')"
                    @mouseout="handleMouseleave"
                  ></i>
                  <el-input required :disabled="readOnly" size="small" v-model="scope.row.unitBase"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="unitRatio" label="比列"></el-table-column>
              <el-table-column prop="unitMoney" label="金额"></el-table-column>
            </el-table-column>
            <el-table-column label="个人缴费">
              <el-table-column prop="personalBase" label="基数">
                <template slot-scope="scope">
                  <i
                    v-if="!readOnly"
                    class="el-icon-caret-top"
                    @mouseenter="handleMouseenter($event, scope, 'person')"
                    @mouseout="handleMouseleave"
                  ></i>
                  <el-input :disabled="readOnly" size="small" v-model="scope.row.personalBase"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="personalRatio" label="比列"> </el-table-column>
              <el-table-column prop="personalMoney" label="金额"> </el-table-column>
            </el-table-column>
            <el-table-column prop="insuredUnitName" label="参保单位" width="200">
              <template slot-scope="scope">
                <el-select :disabled="readOnly" v-model="scope.row.insuredUnitName" size="small">
                  <el-option
                    v-for="day in monthdaysCode"
                    :key="day.code"
                    :label="day.name"
                    :value="day.code"
                  ></el-option>
                </el-