el-table实现多行合并的效果,并可编辑单元格

₍•ʚ•₎呀呀

已于 2024-01-10 08:45:59 修改

阅读量966

点赞数 8

文章标签： vue.js elementui javascript

于 2024-01-09 11:37:23 首次发布

本文链接：https://blog.csdn.net/weixin_60886885/article/details/135476328

版权

背景

数据为数组包对象，对象里面有属性值是数组；无需处理数据，直接使用el-table包el-table的方法，通过修改el-table的样式直接实现多行合并的效果

html代码

<template>
    <div>
      <el-table size="mini" :data="tableData" v-loading="ruletableLoading" border style="width: 100%" height="calc(100% - 56px)" class="rule-table">
        <el-table-column label="AA" prop="code" show-overflow-tooltip>
          <template #default="scope">
            <!-- <div class="item"> -->
            <div class="cell-content item-normal" @click.stop="cellClick">
              <el-input size="small" class="item__input" v-model="scope.row.code" placeholder="请输入" @blur="handleBlur"></el-input>
              <div class="item__txt">{{ scope.row.code }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="BB" prop="name" show-overflow-tooltip>
          <template #default="scope">
            <!-- <div class="item"> -->
            <div class="cell-content item-normal" @click.stop="cellClick">
              <el-input size="small" class="item__input" v-model="scope.row.name" placeholder="请输入" @blur="handleBlur"></el-input>
              <div class="item__txt">{{ scope.row.name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="CC">
          <template #default="scope">
            <el-table :data="scope.row.items" :border="false" :show-header="false" class="no-border-table">
              <el-table-column prop="name" show-overflow-tooltip>
                <template #default="scope">
                  <!-- <div class="item"> -->
                  <div class="cell-content item-normal" @click.stop="cellClick">
                    <el-input size="small" class="item__input" v-model="scope.row.name" placeholder="请输入" @blur="handleBlur"></el-input>
                    <div class="item__txt">{{ scope.row.name }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="DD" width="120">
          <template #default="scope">
            <el-table :data="scope.row.items" :border="false" :show-header="false" class="no-border-table">
              <el-table-column prop="percent" show-overflow-tooltip>
                <template #default="scope">
                  <!-- <div class="item"> -->
                  <div class="cell-content item-normal" @click.stop="cellClick">
                    <el-input size="small" class="item__input" v-model="scope.row.percent" placeholder="请输入" @blur="handleBlur"></el-input>
                    <div class="item__txt">{{ scope.row.percent }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="EE" width="120">
          <template #default="scope">
            <el-table :data="scope.row.items" :border="false" :show-header="false" class="no-border-table">
              <el-table-column prop="score" show-overflow-tooltip>
                <template #default="scope">
                  <!-- <div class="item"> -->
                  <div class="cell-content item-normal" @click.stop="cellClick">
                    <el-input size="small" class="item__input" v-model="scope.row.score" placeholder="请输入" @blur="handleBlur"></el-input>
                    <div class="item__txt">{{ scope.row.score }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="FF" prop="totalScore" show-overflow-tooltip width="120">
          <template #default="scope">
            <!-- <div class="item"> -->
            <div class="cell-content item-normal" @click.stop="cellClick">
              <el-input size="small" class="item__input" v-model="scope.row.totalScore" placeholder="请输入" @blur="handleBlur"></el-input>
              <div class="item__txt">{{ scope.row.totalScore }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="GG">
          <template #default="scope">
            <el-table :data="scope.row.classStandard" :border="false" :show-header="false" class="no-border-table">
              <el-table-column prop="express" show-overflow-tooltip>
                <template #default="scope">
                  <!-- <div class="item"> -->
                  <div class="cell-content item-normal" @click.stop="cellClick">
                    <el-input size="small" class="item__input" v-model="scope.row.express" placeholder="请输入" @blur="handleBlur"></el-input>
                    <div class="item__txt">{{ scope.row.express }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="HH">
          <template #default="scope">
            <el-table :data="scope.row.classStandard" :border="false" :show-header="false" class="no-border-table">
              <el-table-column prop="class" show-overflow-tooltip>
                <template #default="scope">
                  <!-- <div class="item"> -->
                  <div class="cell-content item-normal" @click.stop="cellClick">
                    <el-input size="small" class="item__input" v-model="scope.row.class" placeholder="请输入" @blur="handleBlur"></el-input>
                    <div class="item__txt">{{ scope.row.class }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="II">
          <template #default="scope">
            <el-table :data="scope.row.classStandard" :border="false" :show-header="false" class="no-border-table">
              <el-table-column prop="remark" show-overflow-tooltip>
                <template #default="scope">
                  <div class="cell-content item-normal" @click.stop="cellClick">
                    <el-input size="small" class="item__input" v-model="scope.row.remark" placeholder="请输入" @blur="handleBlur"></el-input>
                    <div class="item__txt">{{ scope.row.remark }}</div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </template>

js代码

主要是cellClick和handleBlur控制的，首先需要找到包裹el-input和展示表格文字的父div,然后通过点击父div和el-input的失去焦点事件控制内部这两个元素的显示和隐藏

<script setup>
import { ref, computed,onMounted } from 'vue'
import ruletableDataJson from './ruleManage.json'
import { cloneDeep } from 'lodash'



const tableData=ref([])

onMounted(()=>{
  tableData.value=[
  {
    "id": 9090,
    "code": "1",
    "name": "密码和车好多看",
    "remark": "",
    "items": [
      {
        "id": 6767,
        "name": "合适的客户收款",       
        "percent": 0.7,   
        "score": 100 
      },
      {
        "id": 89808,
        "name": "附近的看法好的",       
        "percent": 0.3,    
        "score": 67 
      }
    ],
    "classStandard": [
      {
        "express": "年卡就诊卡",
        "remark": "活动开始计划的卡号",
        "class": "打开了电视机了"
      },
      {
        "express": "手机多少空间",
        "remark": "简单说来就是了",
        "class": "的"
      },
      {
        "express": "的角度来讲罗迪克",
        "remark": "十九岁的离开拘留所",
        "class": "对手的实力的距离"
      },
      {
        "express": "但是肯定是咯",
        "remark": "发达的",
        "class": "人工费v1"
      },
      {
        "express": "的快捷键",
        "remark": "附近的垃圾分类",
        "class": "分隔符"
      },
      {
        "express": "三大三",
        "remark": "反对反对开始",
        "class": "对顶的"
      },
      {
        "express": "多睡的",
        "remark": "对顶的",
        "class": "对对对对"
      },
      {
        "express": "对顶的",
        "remark": "的舒适性",
        "class": "多睡的"
      },
      {
        "express": "是啥",
        "remark": "都是大客户",
        "class": "山东江苏科技"
      }

    ]
  },
  {
    "id": 9090,
    "code": "2",
    "name": "密码和车好多看",
    "remark": "",
    "items": [
      {
        "id": 6767,
        "name": "合适的客户收款",       
        "percent": 0.7,   
        "score": 100 
      },
      {
        "id": 89808,
        "name": "附近的看法好的",       
        "percent": 0.3,    
        "score": 67 
      }
    ],
    "classStandard": [
      {
        "express": "年卡就诊卡",
        "remark": "活动开始计划的卡号",
        "class": "打开了电视机了"
      },
      {
        "express": "手机多少空间",
        "remark": "简单说来就是了",
        "class": "的"
      },
      {
        "express": "的角度来讲罗迪克",
        "remark": "十九岁的离开拘留所",
        "class": "对手的实力的距离"
      },
      {
        "express": "但是肯定是咯",
        "remark": "发达的",
        "class": "人工费v1"
      },
      {
        "express": "的快捷键",
        "remark": "附近的垃圾分类",
        "class": "分隔符"
      },
      {
        "express": "三大三",
        "remark": "反对反对开始",
        "class": "对顶的"
      },
      {
        "express": "多睡的",
        "remark": "对顶的",
        "class": "对对对对"
      },
      {
        "express": "对顶的",
        "remark": "的舒适性",
        "class": "多睡的"
      },
      {
        "express": "是啥",
        "remark": "都是大客户",
        "class": "山东江苏科技"
      }

    ]
  },
  {
    "id": 9090,
    "code": "3",
    "name": "密码和车好多看",
    "remark": "",
    "items": [
      {
        "id": 6767,
        "name": "合适的客户收款",       
        "percent": 0.7,   
        "score": 100 
      },
      {
        "id": 89808,
        "name": "附近的看法好的",       
        "percent": 0.3,    
        "score": 67 
      }
    ],
    "classStandard": [
      {
        "express": "年卡就诊卡",
        "remark": "活动开始计划的卡号",
        "class": "打开了电视机了"
      },
      {
        "express": "手机多少空间",
        "remark": "简单说来就是了",
        "class": "的"
      },
      {
        "express": "的角度来讲罗迪克",
        "remark": "十九岁的离开拘留所",
        "class": "对手的实力的距离"
      },
      {
        "express": "但是肯定是咯",
        "remark": "发达的",
        "class": "人工费v1"
      },
      {
        "express": "的快捷键",
        "remark": "附近的垃圾分类",
        "class": "分隔符"
      },
      {
        "express": "三大三",
        "remark": "反对反对开始",
        "class": "对顶的"
      },
      {
        "express": "多睡的",
        "remark": "对顶的",
        "class": "对对对对"
      },
      {
        "express": "对顶的",
        "remark": "的舒适性",
        "class": "多睡的"
      },
      {
        "express": "是啥",
        "remark": "都是大客户",
        "class": "山东江苏科技"
      }

    ]
  },
  ]
})

const cellClick = e => {
  let element = e.target.parentNode
  element.classList.remove('item-normal')
  element.classList.add('item-edit')
}

const handleBlur = e => {
  let element = e.target.parentNode.parentNode
  element.classList.remove('item-edit')
  element.classList.add('item-normal')
  dotShow.value=true
}
</script>

scss样式

首先设置cell-content的基础样式；元素饿显示和隐藏就单独拿出来通过在事件中做切换


  <style lang='scss' scoped>

// 对elementplus的样式修改

    .rule-table:deep() .cell {
  padding-left: 0px;
  padding-right: 0px;
}

:deep(.el-table--border) {
  border: none;
}

.rule-table .no-border-table :deep()tr:last-child td {
  border-bottom: none;
}

:deep().el-table::before {
  width: 0%;
  height: 0px;
}
.rule-table .no-border-table :deep()th {
  border-right: none;
}
.rule-table .no-border-table :deep()td {
  border-right: none;
}



// 可编辑

.cell-content {
  cursor: pointer;
  .item__input {
    // display: none;
    width: 95%;
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__inner {
      height: 24px !important;
    }
    /* 调整elementUI中样式 如果不需要调整请忽略 */
    .el-input__suffix {
      i {
        font-size: 12px !important;
        line-height: 26px !important;
      }
    }
  }
  .item__txt {
    // display: block;
    box-sizing: border-box;
    line-height: 32px;
    padding: 0 9px;
  }
}
// 单独设置编辑状态和常规状态
.item-edit {
  .item__input {
    display: block;
  }
  .item__txt {
    display: none;
  }
}
.item-normal {
  .item__input {
    display: none;
  }
  .item__txt {
    display: block;
  }
}

  </style>