Vue 参数太多，如何做折叠（隐藏参数），点击显示参数，使用el-table

原创已于 2024-01-06 20:11:43 修改 · 810 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2024-01-06 17:45:48 首次发布

本文介绍了如何在Vue项目中使用ElementUI的el-table组件创建可折叠的表格，解决表头固定且数据处理的问题，并提供了一种更简便的方法通过el-collapse来管理和隐藏过多的参数。

方法一：使用el-table 表格，但是el-table有表头，无法删除表头，智能缩小表头高度，

并且el-table的data必须是数组。

弊端：如果加载参数，或者保存参数，必须使用tableData1.value[0]，存在参数使用错误，或者不合理，对于一个严谨的程序员，必须合理，简便。

效果：折叠

展开：

全部展开：

方法二：更简便，更美观

连接如下：

Vue 参数太多，如何做折叠（隐藏参数），点击显示参数，使用el-collapse，-优快云博客

方法一代码：

<template>
  <el-table :data="tableData1"  style="width: 100%">
    <el-table-column type="expand" width= "40">
      <template #default="props">
      <el-row>
      <el-col :span=5>
       <el-text  >名称</el-text>  
      </el-col>
      <el-col :span=5>
          <el-input  v-model="props.row.name" />
      </el-col>
      <el-col :span=5 />
      <el-col :span=5>
       <el-text  >时间</el-text>  
      </el-col>
       <el-col :span=5>
          <el-input  v-model="props.row.date" />
      </el-col>
      </el-row>
     <el-row>
      <el-col :span=5>
       <el-text  >地址</el-text>  
      </el-col>
      <el-col :span=5>
          <el-input  v-model="props.row.address" />
      </el-col>
      <el-col :span=5 />
      <el-col :span=5>
       <el-text  >城市</el-text>  
      </el-col>
       <el-col :span=5>
          <el-input  v-model="props.row.city" />
      </el-col>
      </el-row>
      </template>
    </el-table-column>
    <el-table-column  >
     <el-text style="color:black;font-weight: bold;">参数1:</el-text>
    </el-table-column>
  </el-table>
    <el-table :data="tableData2"  style="width: 100%">
    <el-table-column type="expand" width= "40">
      <template #default="props">
      <el-row>
      <el-col :span=5>
       <el-text  >名称</el-text>  
      </el-col>
      <el-col :span=5>
          <el-input   v-model="props.row.name" />
      </el-col>
      <el-col :span=5 />
      <el-col :span=5>
       <el-text  >时间</el-text>  
      </el-col>
       <el-col :span=6>
          <el-input  v-model="props.row.date" />
      </el-col>
      </el-row>
     <el-row>
      <el-col :span=5>
       <el-text  >地址</el-text>  
      </el-col>
      <el-col :span=5>
          <el-input  v-model="props.row.address" />
      </el-col>
      <el-col :span=5 />
      <el-col :span=5>
       <el-text  >城市</el-text>  
      </el-col>
       <el-col :span=5>
          <el-input  v-model="props.row.city" />
      </el-col>
      </el-row>
      </template>
    </el-table-column>
    <el-table-column  >
     <el-text style="color:black;font-weight: bold;">参数2:</el-text>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData1 = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
   
  }
]
const tableData2 = [
  {
    date: '2016-05-03',
    name: 'Tom',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
   
  }
]
</script>