合并table表格，table点击变输入框功能，隐藏el-table表格头

静静湖

已于 2022-06-22 09:24:34 修改

阅读量940

点赞数

文章标签： vue.js

于 2022-04-13 17:49:40 首次发布

本文链接：https://blog.csdn.net/m0_60608114/article/details/124153954

版权

本文介绍了如何在Vue.js项目中使用el-table组件实现表格头隐藏，并详细讲解了如何设置属性`:show-header="false"`来达到隐藏表格头的效果。同时，讨论了表格的合并以及如何实现表格单元格点击后转换为输入框的交互功能。

摘要由CSDN通过智能技术生成

:show-header="false"表格属性设置成false，就可以隐藏表格头

<el-table :data="tableDatafeiliudong" border style="width: 100%" :show-header="false">

<template>
  <div style="margin:0px 0px 0px 22px">
    <div class = "kemubiao">
      <el-button type="primary" size="small" @click="chages">科目表</el-button>
    </div>
     <el-table
     @cell-click="tableDbEdit"
  :data="tableData"
    :span-method="objectSpanMethod"
    border=""
    stripe
    :header-cell-style="{
      'background-color': '#003F98',
      'color':'#FFF',
      'opacity': 0.7
    }"
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="ids" label="摘要">
        <template slot-scope="scope">
          <!-- 条件判断如果满足则显示表单，否则默认展示文字 -->
          <el-input v-model="scope.row.ids" v-if="showInput == `ids${scope.row.id}`"
            @blur='blurInput(scope.row.id,"ids",scope.row.ids)' v-focus :rows="18" type="textarea">
          </el-input>
          <p v-else>{
  {scope.row.ids}}</p>
        </template>
      </el-table-column>
    <el-table-column prop="amount1" label="会计科目">
        <template slot-scope="scope">
          <!-- 条件判断如果满足则显示表单，否则默认展示文字 -->