＜template＞123123123123 ＜div class=“container“＞123123123123 ＜table＞123123123123 ＜tbody＞12312

<template>123123123123  <div class="container">123123123123    <table>123123123123      <tbody>123123123123        <tr>123123123123          <th class="report-table-message-title">姓名</th>123123123123          <td>123123123123            <div class="report-table-message-info">123123123123              <textarea123123123123                class="auto-resize-textarea"123123123123                v-model="name"123123123123                @focus="expandTextarea"123123123123                @blur="collapseTextarea"123123123123                @input="autoResizeTextarea"123123123123              ></textarea>123123123123            </div>123123123123          </td>123123123123        </tr>123123123123        <tr>123123123123          <th class="report-table-message-title">性别</th>123123123123          <td>123123123123            <div class="report-table-message-info">123123123123              <textarea123123123123                class="auto-resize-textarea"123123123123                v-model="gender"123123123123                @focus="expandTextarea"123123123123                @blur="collapseTextarea"123123123123                @input="autoResizeTextarea"123123123123              ></textarea>123123123123            </div>123123123123          </td>123123123123        </tr>123123123123        <tr>123123123123          <th class="report-table-message-title">年纪</th>123123123123          <td>123123123123            <div class="report-table-message-info">123123123123              <textarea123123123123                class="auto-resize-textarea"123123123123                v-model="age"123123123123                @focus="expandTextarea"123123123123                @blur="collapseTextarea"123123123123                @input="autoResizeTextarea"123123123123              ></textarea>123123123123            </div>123123123123          </td>123123123123        </tr>123123123123      </tbody>123123123123    </table>123123123123  </div>123123123123</template>123123123123123123123123<script>123123123123export default {123123123123  data() {123123123123    return {123123123123      name: '张三',123123123123      gender: '男',123123123123      age: '25',123123123123    };123123123123  },123123123123  methods: {123123123123    autoResizeTextarea(event) {123123123123      const textarea = event.target;123123123123      textarea.style.height = 'auto';123123123123      textarea.style.height = textarea.scrollHeight + 'px';123123123123    },123123123123    expandTextarea(event) {123123123123      const textarea = event.target;123123123123      textarea.classList.add('textarea-expanded');123123123123      textarea.style.overflow = 'visible'; // Expand textarea to show all content123123123123      this.autoResizeTextarea(event);123123123123    },123123123123    collapseTextarea(event) {123123123123      const textarea = event.target;123123123123      textarea.classList.remove('textarea-expanded');123123123123      textarea.style.height = '30px'; // Reset height to cell height123123123123      textarea.style.overflow = 'hidden'; // Hide overflow content when collapsed123123123123    },123123123123  },123123123123  mounted() {123123123123    const textareas = document.querySelectorAll('.auto-resize-textarea');123123123123    textareas.forEach((textarea) => {123123123123      this.autoResizeTextarea({ target: textarea });123123123123    });123123123123  },123123123123};123123123123</script>123123123123123123123123<style>123123123123.container {123123123123  width: 600px;123123123123  height: 200px;123123123123  border: 1px solid black; /* 可选：为容器添加边框 */123123123123}123123123123table {123123123123  border-collapse: collapse;123123123123  width: 100%;123123123123}123123123123th.report-table-message-title {123123123123  width: 10%;123123123123  height: 30px;123123123123  background-color: grey; /* 表头背景为灰色 */123123123123  border: 1px solid black;123123123123  padding: 0;123123123123  position: relative; /* Required for absolute positioning of textarea */123123123123}123123123123td {123123123123  width: 90%;123123123123  height: 30px;123123123123  border: 1px solid black;123123123123  padding: 0;123123123123  position: relative; /* Required for absolute positioning of textarea */123123123123}123123123123.report-table-message-info {123123123123  width: 100%;123123123123  height: 100%;123123123123  position: absolute;123123123123  top: 0;123123123123  left: 0;123123123123  box-sizing: border-box;123123123123}123123123123.auto-resize-textarea {123123123123  width: 100%; /* Adjust to fit within the 90% cell, considering border and padding */123123123123  height: 30px; /* Initial height to match the cell height */123123123123  border: none;123123123123  box-sizing: border-box;123123123123  resize: none; /* Prevent resizing */123123123123  overflow: hidden; /* Hide overflow by default */123123123123  position: absolute; /* Ensure textarea is positioned absolutely */123123123123  top: 0;123123123123  left: 0;123123123123  z-index: 1; /* Default z-index */123123123123  background: white; /* Optional: to ensure textarea background covers the cell content */123123123123  min-height: 30px; /* Ensure minimum height matches cell height */123123123123}123123123123.textarea-expanded {123123123123  z-index: 1000;123123123123  overflow: visible; /* Show overflow content when expanded */123123123123  min-height: 30px; /* Ensure minimum height matches cell height */123123123123}123123123123</style>123123123123