vue table展开填写输入框 会自动折叠

在Vue.js中，要实现表格（table）行的展开与折叠功能，并且当展开行时显示输入框供用户编辑，可以利用`v-for`循环遍历数据、加上条件控制以及`element-ui`库中的`el-table-column`组件来达成。以下是基本的步骤：

1. 首先，引入Element UI的Table组件和其他必要的样式。

<template>
  <el-table :data="items" style="width: 100%">
    <!-- 其他列... -->
    <el-table-column v-if="showDetail(row)" label="详情">
      <template slot-scope="{ row }">
        <el-collapse v-model="row.expanded">
          <el-collapse-item title="点击展开">
            <el-form :model="row.content" @submit.prevent="handleFormSubmit(row)">
              <!-- 输入框或其他表单元素 -->
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </template>
    </el-table-column>
    <!-- ...其他列... -->
  </el-table>
</template>

<script>
import { ElCollapse, ElCollapseItem, ElFormItem, ElForm } from 'element-plus';

export default {
  components: {
    ElCollapse,
    ElCollapseItem,
    ElFormItem,
    ElForm
  },
  data() {
    return {
      items: [], // 数据源
      showDetail(row) {
        return !row.isExpanded; // 初始隐藏，只有未展开才返回true
      },
      row: {}, // 表示当前展开的行数据
    };
  },
  methods: {
    handleFormSubmit(row) {
      // 编辑内容并更新数据源
      this.$set(this.items, row.index, {
        ...row,
        isExpanded: false, // 展开标记，关闭时置为false
        content: // 新的内容值
      });
    }
  }
};
</script>

在这个例子中，`showDetail`函数用于判断是否显示展开细节，而`handleFormSubmit`处理表单提交时的数据更新和折叠。当用户提交表单时，将对应的行标记为已展开（`isExpanded`）并保存新的内容。