表格点击单元格，实现textarea大文本框修改功能

 （最后附有完整代码）

 两个点：

第一个：

需求要实现一个表格，点击出现大文本框，可修改内容，用的是 $prompt 加 inputType: "textarea", 实现，但是有个问题，弹框和输入框的宽高，直接写不生效

this.$prompt(`${label}`, '编辑*', {
        inputValue: this.editingCell.value,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: "textarea",
        customClass: 'textareaBox'
      }

于是弹出框用的是，添加 customClass: 'textareaBox' 类名的方式，注意！！！style有写scoped会不生效，可以单独写个style标签中

<style>
.textareaBox {
  min-width:55%;
  height: 80%;
}
</style>

第二点：

textarea弹框高度问题，在这里我使用定时器实现，类名加textarea的方式

// textarea输入框的高度
      setTimeout(() => {
        const textarea = document.querySelector('.textareaBox textarea');
        if (textarea) {
          textarea.style.height = '300px'; // Set the height of the textarea
        }
      }, 100);

 （附完整代码）

<template>
  <!-- 整体min位置 -->
  <div class="divmin">
    <!-- ---------------人员指标参数配置-------------------- -->
    <h3 class="table-cee2">人员指标参数配置</h3>
    <el-table :data="tableData" row-key="id" border height="258">
      <!-- 子集代号 min-width="250"-->
      <el-table-column prop="SubsetCode" label="子集代号" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'SubsetCode', '子集代号')"><span>{{ scope.row.SubsetCode }}</span></div>
        </template>
      </el-table-column>
      <!-- 同步指标名称 -->
      <el-table-column prop="SyncName" label="同步指标名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'SyncName', '同步指标名称')"><span>{{ scope.row.SyncName }}</span></div>
        </template>
      </el-table-column>
      <!-- 唯一指标 -->
      <el-table-column prop="TBindexName" label="唯一指标" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'TBindexName', '唯一指标')"><span>{{ scope.row.TBindexName }}</span></div>
        </template>
      </el-table-column>
      <!-- 查询指标 -->
      <el-table-column prop="queryIndicators" label="查询指标" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'queryIndicators', '查询指标')"><span>{{ scope.row.queryIndicators }}</span></div>
        </template>
      </el-table-column>
      <!-- SQL视图 -->
      <el-table-column prop="SQLview" label="SQL视图" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'SQLview', 'SQL视图')"><span>{{ scope.row.SQLview }}</span></div>
        </template>
      </el-table-column>
      <!-- 地址接口 -->
      <el-table-column prop="AdresLnface" label="地址接口" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'AdresLnface', '地址接口')"><span>{{ scope.row.AdresLnface }}</span></div>
        </template>
      </el-table-column>
      <!-- 其它参数配置1 -->
      <el-table-column prop="ParameterOne" label="其它参数配置1" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'ParameterOne', '其它参数配置1')"><span>{{ scope.row.ParameterOne }}</span></div>
        </template>
      </el-table-column>
      <!-- 其它参数配置2 -->
      <el-table-column prop="ParameterTwo" label="其它参数配置2" show-overflow-tooltip>
        <template slot-scope="scope">
          <div @click="editCell(scope.row, 'ParameterTwo', '其它参数配置2')"><span>{{ scope.row.ParameterTwo }}</span></div>
        </template>
      </el-table-column>
      <!-- 字段映射 -->
      <el-table-column prop="fieldMapping" label="字段映射">
        <template>
          <el-button style="width: 78px;" size="mini" type="success" plain @click="viewFile(scope.row.fieldMapping)">查看</el-button><br>
          <el-button style="margin-top:2px;" size="mini" type="success" plain @click="handleUpload">重新上传</el-button>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" prop="caozuo" align="center" min-width="58">
        <template slot-scope="scope">
          <el-button plain type="danger" size="mini" @click="onDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      // ...
    editingCell: { row: null, column: null, value: null },
      // --- 人员指标参数配置 ---
      tableData: [
        { id: '1', SubsetCode:'A011111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', SyncName:'A01,A02,A03111', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs11111111111', ParameterOne:'gs11111111111', ParameterTwo:'gs11111111111',},
        { id: '2', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '3', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '4', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
        { id: '5', SubsetCode:'A01', SyncName:'A01,A02,A03', TBindexName:'dad', queryIndicators:'faf', SQLview:'a', fieldMapping:'faf', AdresLnface:'gs', ParameterOne:'gs', ParameterTwo:'gs',},
      ],
    }
  },
  methods: {
    // --- 人员指标参数配置的方法 ---
    editCell(row, column, label) {
      this.editingCell.row = row;
      this.editingCell.column = column;
      this.editingCell.value = row[column];
      this.editingCell.label = label;
      // 打开弹窗
      this.$prompt(`${label}`, '编辑*', {
        inputValue: this.editingCell.value,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType: "textarea",
        customClass: 'textareaBox'
      }).then(({ value }) => {
        this.editingCell.row[column] = value; // 将输入的值赋给对应的单元格
        this.editingCell = { row: null, column: null, value: null, label: null }; // 重置editingCell
      }).catch(() => {
        this.editingCell = { row: null, column: null, value: null, label: null }; // 重置editingCell
      });
      // textarea输入框的高度
      setTimeout(() => {
        const textarea = document.querySelector('.textareaBox textarea');
        if (textarea) {
          textarea.style.height = '300px'; // Set the height of the textarea
        }
      }, 100);
    },
    // 查看
    viewFile(filePath) {
      this.$msgbox({
        title: '查看文件',
        message: `<div style="text-align: center;"><a href="${filePath}" target="_blank">点击查看文件</a></div>`,
        showCancelButton: false,
        confirmButtonText: '确定',
      });
    },
    // 重新上传
    handleUpload() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.style.display = 'none';
      fileInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        // 在这里可以上传文件，可以使用axios或其他方法发送文件到服务器
        console.log('上传的文件:', file);
      });
      document.body.appendChild(fileInput);
      fileInput.click();
    },
    // --- 删除按钮 ---
    onDelete(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) { this.tableData.splice(index, 1); }
    },
  },
}
</script>


<style>
/* 人员指标参数配置，每个弹出框宽高 */
.textareaBox {
  min-width:55%;
  height: 80%;
}
</style>
<style scoped lang="less">
.divmin {
  max-width: 1130px;
  margin: auto;
  border: 1px solid #e0dede; /* 添加外部边框 */
  padding: 2px 12px;
}

/* --------------------- 人员指标参数配置 --------------------------- */
/* 下边框线 */
.table-cell {
  color: #837e7e;
  padding-bottom:5px;
  padding-top:8px;
  border-bottom: 1px solid #e5e2e2;
}
.table-cee2{
  color: #837e7e;
  padding-top:15px;
  margin-bottom:5px;
  border-top: 1px solid #e5e2e2;
}
/* 每行高度 */
::v-deep {
  .el-table .el-table__cell {
    padding: 1px 0;
    text-align: center;
    font-size: 11px;
    text-overflow: ellipsis;
  }
  .el-table .cell {
    line-height: 16px;
  }
  .el-table th.el-table__cell>.cell {
    padding: 6px 0;
    background: linear-gradient(135deg, #c3fdff, #b9b6e5); /* 设置淡蓝色金属感渐变背景色 */
    border-radius: 1px; /* 设置圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    border: none;
  }
}
</style>